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

資訊專欄INFORMATION COLUMN

CSS布局相關(guān)基本概念

wangxinarhat / 3781人閱讀

摘要：當(dāng)一個(gè)元素從正常文檔流中抽出后，仍然在文檔流中的其他元素將忽略該元素并填補(bǔ)他原先的空間基于文檔流，理解定位模式相對(duì)定位，即相對(duì)于元素在文檔流中位置進(jìn)行偏移。絕對(duì)定位，即完全脫離文檔流，相對(duì)于屬性非值的最近父級(jí)元素進(jìn)行偏移。

主要參考文檔：
http://www.zhangxinxu.com/wor...
https://www.cnblogs.com/dojo-...

測(cè)試?yán)樱?br>https://codepen.io/icyfanfan/...
https://codepen.io/icyfanfan/...

理解文檔流對(duì)于理解CSS布局其他相關(guān)概念很重要！！

文檔流

將窗體自上而下劃分為一行一行，在每行中從左至右排放元素，即為文檔流

每個(gè)非浮動(dòng)塊級(jí)元素獨(dú)占一行，浮動(dòng)元素按規(guī)定(left or right)浮在行的一端，若當(dāng)前行放不下，則起新行再浮動(dòng)

內(nèi)聯(lián)元素不會(huì)獨(dú)占一行，幾乎所有元素(內(nèi)聯(lián)、塊級(jí)等)都可以生成子行以擺放子元素

有三種情況將使得元素脫離文檔流而存在，分別是浮動(dòng)，絕對(duì)定位， 固定定位。 但是在IE中浮動(dòng)元素也存在于文檔流中

浮動(dòng)元素不占任何正常文檔流空間，而浮動(dòng)元素的定位還是基于正常的文檔流，然后從文檔流中抽出并盡可能遠(yuǎn)的移動(dòng)至左側(cè)或者右側(cè)。文字內(nèi)容會(huì)圍繞在浮動(dòng)元素周圍。當(dāng)一個(gè)元素從正常文檔流中抽出后，仍然在文檔流中的其他元素將忽略該元素并填補(bǔ)他原先的空間

基于文檔流，理解定位模式：

相對(duì)定位， 即相對(duì)于元素在文檔流中位置進(jìn)行偏移。 但保留原占位。
絕對(duì)定位， 即完全脫離文檔流， 相對(duì)于position屬性非static值的最近父級(jí)元素進(jìn)行偏移。
固定定位， 即完全脫離文檔流， 相對(duì)于視區(qū)進(jìn)行偏移

塊級(jí)元素 BLOCK-LEVEL ELEMENT

標(biāo)簽：div
特點(diǎn)：

一個(gè)元素占一行

可設(shè)置寬度、高度、行高、邊框、內(nèi)外邊距

未設(shè)置寬度的情況下，寬度自動(dòng)填滿外部容器

內(nèi)部可以容納其他塊級(jí)元素或者內(nèi)聯(lián)元素

塊狀元素的流體特性
塊狀水平元素，如div元素，在默認(rèn)情況下（未定義寬度、非浮動(dòng)絕對(duì)定位等），水平方向會(huì)自動(dòng)填滿外部的容器；如果有margin-left/margin-right, padding-left/padding-right, border-left-width/border-right-width等，實(shí)際內(nèi)容區(qū)域會(huì)響應(yīng)變窄。

內(nèi)聯(lián)元素 INLINE ELEMENT

標(biāo)簽：span
特點(diǎn)：

和其他內(nèi)聯(lián)特性元素在同一行上，行布局表現(xiàn)形式

不可設(shè)置寬度、高度、內(nèi)外邊距

寬度由內(nèi)部元素決定，可以設(shè)置邊框，但邊框的表現(xiàn)是每一行都會(huì)被設(shè)置（對(duì)比塊級(jí)元素）

內(nèi)部可以容納文本或其他內(nèi)聯(lián)元素

內(nèi)聯(lián)塊級(jí)

display: inline-block
特點(diǎn)：

將對(duì)象呈現(xiàn)為inline對(duì)象，但是對(duì)象的內(nèi)容作為block對(duì)象呈現(xiàn)。和其他內(nèi)聯(lián)對(duì)象同一行顯示

和塊級(jí)元素一樣可以設(shè)置寬高、內(nèi)外邊距等

內(nèi)部可以容納

Formatting Context：指頁面中的一個(gè)渲染區(qū)域，并且擁有一套渲染規(guī)則，他決定了其子元素如何定位，以及與其他元素的相互關(guān)系和作用。

BFC-BLOCK FORMATTING CONTEXT 塊級(jí)格式化上下文

BFC元素特性表現(xiàn)原則就是，內(nèi)部子元素再怎么翻江倒海，翻云覆雨都不會(huì)影響外部的元素 - 所以，避免margin穿透啊，清除浮動(dòng)什么的也好理解了 - from 張?chǎng)涡馼log原話
理解：一個(gè)獨(dú)立的塊級(jí)渲染區(qū)域，只有Block-level box參與，該區(qū)域擁有一套渲染規(guī)則來約束塊級(jí)盒子的布局，內(nèi)部布局不會(huì)受外部影響也不會(huì)對(duì)外部產(chǎn)生影響

如何產(chǎn)生BFC：

float的值不為none

overflow的值不為auto, scroll或hidden

display的值為table-cell, table-caption或inline-block
（測(cè)試時(shí)發(fā)現(xiàn)display:table也會(huì)有觸發(fā)bfc，table會(huì)默認(rèn)生成一個(gè)匿名的table-cell，正是這個(gè)匿名的table-ccell生成了BFC）

position的值不為relative或static

BFC規(guī)則

生成BFC元素的子元素會(huì)一個(gè)接一個(gè)的放置。垂直方向上他們的起點(diǎn)是一個(gè)包含塊的頂部，兩個(gè)相鄰子元素之間的垂直距離取決于元素的margin特性。在BFC中相鄰的塊級(jí)元素外邊距會(huì)折疊。

生成BFC元素的子元素中，每一個(gè)子元素做外邊距與包含塊的左邊界相接觸，（對(duì)于從右到左的格式化，右外邊距接觸右邊界），即使浮動(dòng)元素也是如此（盡管子元素的內(nèi)容區(qū)域會(huì)由于浮動(dòng)而壓縮），除非這個(gè)子元素也創(chuàng)建了一個(gè)新的BFC（如它自身也是一個(gè)浮動(dòng)元素）。

分析：

內(nèi)部的Box會(huì)在垂直方向上一個(gè)接一個(gè)的放置

垂直方向上的距離由margin決定。（完整的說法是：屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊，與方向無關(guān)。）

每個(gè)元素的左外邊距與包含塊的左邊界相接觸（從左向右），即使浮動(dòng)元素也是如此。（這說明BFC中子元素不會(huì)超出他的包含塊，而position為absolute的元素可以超出他的包含塊邊界）

BFC的區(qū)域不會(huì)與float的元素區(qū)域重疊

計(jì)算BFC的高度時(shí)，浮動(dòng)子元素也參與計(jì)算

BFC就是頁面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面元素，反之亦然

借此回憶一下之前學(xué)習(xí)過的一些布局知識(shí)
垂直方向上，兩個(gè)相鄰div margin重疊：其實(shí)是在同一個(gè)bfc環(huán)境中
設(shè)置父元素overflow:hidden或浮動(dòng)父元素能清除浮動(dòng)影響：其實(shí)就是使父元素觸發(fā)bfc，讓子元素參與父元素的高度計(jì)算

BFC應(yīng)用
防止margin重疊：將發(fā)生重疊的元素放到兩個(gè)BFC中（或者使其中一個(gè)產(chǎn)生BFC）
清除浮動(dòng)：略
布局：利用BFC區(qū)域不會(huì)與float元素區(qū)域重疊的特性，便于實(shí)現(xiàn)多欄布局

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

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

相關(guān)文章

  • 最流行的5個(gè)前端框架對(duì)比

    摘要：是目前可用框架中無可爭(zhēng)議的領(lǐng)導(dǎo)者。框架大小預(yù)處理器和響應(yīng)式布局是模塊化是啟動(dòng)模板布局是圖標(biāo)集設(shè)置附加附件無捆綁，許多第三方插件可用。是排在第二名的框架。是一個(gè)語義化設(shè)計(jì)的前端開源框架。 如今出現(xiàn)了大量的CSS前端框架，但真正優(yōu)秀的框架只有少數(shù)幾個(gè)。 本文將會(huì)比較其中五個(gè)最佳的框架。每個(gè)框架都有自己的優(yōu)點(diǎn)和缺點(diǎn)，以及具體的應(yīng)用領(lǐng)域，你可以根據(jù)自己的具體項(xiàng)目需求進(jìn)行選擇。此外，許多選項(xiàng)都是...

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

  • HTML-CSS

    摘要：但是，從字體上來說雪碧圖制作，使用以及相關(guān)，圖文。由于采用了編譯，所以能夠保證在瀏覽器不支持標(biāo)準(zhǔn)布局的情況下，回滾到舊版本的，保證移動(dòng)設(shè)備中能呈現(xiàn)出一樣的布局效果。我不想陷入和的紛爭(zhēng)，但是有一件事是確定的極大的提升了移動(dòng)端 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個(gè)問題：怎樣通過 CSS 簡(jiǎn)單而優(yōu)雅的實(shí)現(xiàn)水平、垂直同時(shí)居中。記得剛開始學(xué)習(xí) CSS 的時(shí)候，看到 ...

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

  • HTML-CSS

    摘要：但是，從字體上來說雪碧圖制作，使用以及相關(guān)，圖文。由于采用了編譯，所以能夠保證在瀏覽器不支持標(biāo)準(zhǔn)布局的情況下，回滾到舊版本的，保證移動(dòng)設(shè)備中能呈現(xiàn)出一樣的布局效果。我不想陷入和的紛爭(zhēng)，但是有一件事是確定的極大的提升了移動(dòng)端 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個(gè)問題：怎樣通過 CSS 簡(jiǎn)單而優(yōu)雅的實(shí)現(xiàn)水平、垂直同時(shí)居中。記得剛開始學(xué)習(xí) CSS 的時(shí)候，看到 ...

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

  • 常見的面試問題：【CSS】CSS盒模型

    摘要：標(biāo)準(zhǔn)盒模型盒子總寬度高度。以上支持，除此外還可以取到相對(duì)于視窗的上下左右的距離。包括高度寬度內(nèi)邊距和邊框，不包括外邊距。主要看怎么父元素的盒模型如何設(shè)置?？赵氐倪吘嘀丿B是取與的最大值。 一、概念 CSS盒模型本質(zhì)上是一個(gè)盒子，封裝周圍的HTML元素，它包括：外邊距（margin）、邊框（border）、內(nèi)邊距（padding）、實(shí)際內(nèi)容（content）四個(gè)屬性。CSS盒模型：標(biāo)準(zhǔn)模...

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

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

0條評(píng)論

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