成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

高級(jí)布局

liukai90 / 882人閱讀

摘要：一文檔流一文檔流概念概念普通流常規(guī)流將窗體自上而下分成一行一行，塊級(jí)元素從上至下行內(nèi)元素在每行中從左至右的順序依次排放元素。

一.文檔流

1.概念

normal flow(普通流,常規(guī)流)將窗體自上而下分成一行一行，塊級(jí)元素從上至下、行內(nèi)元素在每行中從左至右的順序依次排放元素。一個(gè)連續(xù)具有邏輯上下的頁(yè)面整體,出現(xiàn)在頁(yè)面中的顯示內(nèi)容,均可以理解為文檔流中。

2.BFC(Block formatting context)

塊級(jí)格式化上下文，它是一個(gè)獨(dú)立的渲染區(qū)域，只有Block-level box參與，它規(guī)定了內(nèi)部的Block-level Box如何布局，并且與這個(gè)區(qū)域外部毫不相干。

3.BFC規(guī)則

  • 內(nèi)部的Box會(huì)在垂直方向,一個(gè)接一個(gè)地放置。
  • Box自身垂直方向的位置由margin-top決定，屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊。
  • Box自身水平方向的位置由margin左或右決定(具體已經(jīng)參照BFC方位)，屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生疊加。

二.浮動(dòng)布局

1.概念

通過(guò)讓元素浮動(dòng),可以使元素在水平上左右移動(dòng),再通過(guò)margin屬性調(diào)整位置,就是使當(dāng)前元素脫離文檔流,相當(dāng)于浮動(dòng)起來(lái)一樣,浮動(dòng)的框可以左右移動(dòng),直至它的外邊緣遇到包含框或另一個(gè)浮動(dòng)框的邊緣。

2.基本語(yǔ)法

float:left | right

3.浮動(dòng)的印象

  • 對(duì)附近的元素布局造成改變,使得布局混亂。
  • 因?yàn)閕浮動(dòng)元素脫離了文檔流,會(huì)出現(xiàn)一種高度坍塌的現(xiàn)象:原來(lái)的父容器高度是當(dāng)前元素?fù)伍_(kāi)的,但是當(dāng)該元素浮動(dòng)后,脫離文檔流浮動(dòng)起來(lái),那父容器的高度就會(huì)坍塌(前提是父容器高度小于該浮動(dòng)元素)

4.清浮動(dòng)

目的:對(duì)父級(jí)所在容器中的Block-level Box布局不產(chǎn)生影響
原理:再浮動(dòng)布局情況下,讓父級(jí)獲得合適的高度
1.浮動(dòng)的父級(jí)設(shè)置高度
sup{
    height:npx;
}
2.浮動(dòng)的父級(jí)設(shè)置overflow
sup{
    overflow:hidden;
}
3.浮動(dòng)的父級(jí)兄弟設(shè)置clear
brother{
    clear: left | right | both;
}
4.浮動(dòng)的父級(jí)偽類(lèi)清浮動(dòng)
sup:after{
    content:"";
    display:block;
    clear:both;
}

三.流式布局

1.概念

流式布局是頁(yè)面元素的寬度按照分辨率進(jìn)行適配調(diào)整,但整體布局不變.就是布局脫離固定值限制,可以根據(jù)頁(yè)面情況改變相應(yīng)發(fā)生改變。

2.流式布局相關(guān)操作

1.百分比設(shè)置 %
    如:width: 90%;
2.窗口比設(shè)置 vw|vh
    如:width: 90vw;
3.字體控制 em|rem
    em為相對(duì)大小,大小為最近設(shè)置字體大小的父級(jí)規(guī)定的字體大小
    rem為html字體大小

四.定位布局

1.概念

定位布局的目的:讓目標(biāo)標(biāo)簽在指定參考系下任意布局

2.基本語(yǔ)法

position:static | relative | absolute | fixed
  • static:靜態(tài)定位,默認(rèn)定位.
  • relative:相對(duì)定位,未脫離文檔流,以自身原有位置作為參考坐標(biāo)系.
  • absolute:絕對(duì)定位,完全脫離文檔流,以最近定位父級(jí)作為參考坐標(biāo)系.
  • fixed:固定定位,完全脫離文檔流,以文檔窗口作為參考坐標(biāo)系.

定位開(kāi)啟后,四個(gè)定位方位便會(huì)開(kāi)啟,且四個(gè)方位均參與布局,如果發(fā)生沖突,左右取左,上下取上

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/1755.html

相關(guān)文章

  • 高級(jí)布局

    摘要：不完全脫離文檔流浮動(dòng)后的結(jié)果當(dāng)目標(biāo)標(biāo)簽的內(nèi)部有浮動(dòng)的子級(jí)，目標(biāo)標(biāo)簽的兄弟標(biāo)簽的布局會(huì)出現(xiàn)顯示異常在不做清浮動(dòng)的情況下，父級(jí)不會(huì)獲取子級(jí)的高度。一、文檔流(normal flow) 1.概念 將窗體自上而下分成一行一行，塊級(jí)元素從上至下，行內(nèi)元素在每行中從左至右順序排放元素 本質(zhì)為normal flow(普通流，常規(guī)流)，文檔流就是一個(gè)連續(xù)具有邏輯上下的頁(yè)面整體，也可以片面的說(shuō)，出現(xiàn)在頁(yè)面中的...

    Kylin_Mountain 評(píng)論0 收藏0

  • [譯]148個(gè)資源讓你成為CSS專(zhuān)家

    摘要：層疊樣式表二修訂版這是對(duì)作出的官方說(shuō)明。速查表兩份表來(lái)自一份關(guān)于基礎(chǔ)特性，一份關(guān)于布局。核心第一篇一份來(lái)自的基礎(chǔ)參考指南簡(jiǎn)寫(xiě)速查表簡(jiǎn)寫(xiě)形式參考書(shū)使用層疊樣式表基礎(chǔ)指南，包含使用的好處介紹個(gè)方法快速寫(xiě)成高質(zhì)量的寫(xiě)出高效的一些提示。 迄今為止，我已經(jīng)收集了100多個(gè)精通CSS的資源，它們能讓你更好地掌握CSS技巧，使你的布局設(shè)計(jì)脫穎而出。 CSS3 資源 20個(gè)學(xué)習(xí)CSS3的有用資源 C...

    impig33 評(píng)論0 收藏0

  • Iceworks 2.8.0 發(fā)布，自定義你的 React 模板

    摘要：那有沒(méi)有一種解決方案，是可以完全從零開(kāi)始去自定義一個(gè)模板，能按需進(jìn)行配置生成，答案是有的。在之前的版本，已經(jīng)支持自定義模板功能，但僅限于對(duì)進(jìn)行自定義，包含基礎(chǔ)導(dǎo)航側(cè)邊欄頁(yè)腳等配置，但這顯然是不夠的。 自定義模板顧名思義即是定制自己的模板，相對(duì)社區(qū)已有的各類(lèi) React 模板，大多數(shù)是全家桶的形式，內(nèi)置了很多功能和頁(yè)面集合，所謂開(kāi)箱即用；但在實(shí)際使用過(guò)程中，我們會(huì)發(fā)現(xiàn)，下載模板進(jìn)行相應(yīng)的...

    FrozenMap 評(píng)論0 收藏0

  • Iceworks 2.8.0 發(fā)布，自定義你的 React 模板

    摘要：那有沒(méi)有一種解決方案，是可以完全從零開(kāi)始去自定義一個(gè)模板，能按需進(jìn)行配置生成，答案是有的。在之前的版本，已經(jīng)支持自定義模板功能，但僅限于對(duì)進(jìn)行自定義，包含基礎(chǔ)導(dǎo)航側(cè)邊欄頁(yè)腳等配置，但這顯然是不夠的。 自定義模板顧名思義即是定制自己的模板，相對(duì)社區(qū)已有的各類(lèi) React 模板，大多數(shù)是全家桶的形式，內(nèi)置了很多功能和頁(yè)面集合，所謂開(kāi)箱即用；但在實(shí)際使用過(guò)程中，我們會(huì)發(fā)現(xiàn)，下載模板進(jìn)行相應(yīng)的...

    instein 評(píng)論0 收藏0

  • 高級(jí)布局補(bǔ)充.過(guò)濾以及動(dòng)畫(huà)

    摘要：默認(rèn)值為，表示繼承父元素的屬性，如果沒(méi)有父元素，則等同于?？梢愿淖?nèi)我舛嗟臉邮饺我舛嗟拇螖?shù)。請(qǐng)用百分比來(lái)規(guī)定變化發(fā)生的時(shí)間，或用關(guān)鍵詞和，等同于和。是動(dòng)畫(huà)的開(kāi)始，是動(dòng)畫(huà)的完成。為了得到最佳的瀏覽器支持，應(yīng)該始終定義和選擇器。一.Flex布局 1.概念 下圖為flex的相關(guān)概念示意圖 ? 使用flex布局的容器(flex container),他內(nèi)部的元素自動(dòng)成為flex項(xiàng)目(flex it...

    xialong 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<