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

資訊專欄INFORMATION COLUMN

理解CSS布局和塊格式化上下文

cuieney / 534人閱讀

摘要：什么是塊格式化上下文，是頁面的可視化渲染的一部分，是塊盒子的布局過程發(fā)生的區(qū)域，也是浮動元素與其他元素交互的區(qū)域。直譯過來是格式化上下文，它是頁面中的一塊渲染區(qū)域，有一套渲染規(guī)則，決定了其子元素如何布局，以及和其他元素之間的關(guān)系和作用。

在進行html布局及css編寫的時候，你是否遇到過這樣的問題：

子元素設(shè)置浮動脫離文檔流后，父元素無法將其完全包裹

子元素浮動實現(xiàn)兩欄布局時，另一個子元素與浮動子元素重疊

垂直方向的外邊距margin重疊

...

通常我們使用塊級格式化上下文（BFC）就能解決。

什么是BFC？

塊格式化上下文（Block Formatting Context，BFC） 是Web頁面的可視化CSS渲染的一部分，是塊盒子的布局過程發(fā)生的區(qū)域，也是浮動元素與其他元素交互的區(qū)域。

FC(formatting context)直譯過來是格式化上下文，它是頁面中的一塊渲染區(qū)域，有一套渲染規(guī)則，決定了其子元素如何布局，以及和其他元素之間的關(guān)系和作用。

BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素，并且容器元素不會影響兄弟元素的布局。

什么情況下會創(chuàng)建BFC

根元素或包含根元素的元素

浮動元素（元素的 float 不是 none）

絕對定位元素（元素的 position 為 absolute 或 fixed）

行內(nèi)塊元素（元素的 display 為 inline-block）

表格單元格（元素的 display為 table-cell，HTML表格單元格默認為該值）

表格標題（元素的 display 為 table-caption，HTML表格標題默認為該值）

匿名表格單元格元素（元素的 display為 table、table-row、 table-row-group、table-header-group、table-footer-group（分別是HTML table、row、tbody、thead、tfoot的默認屬性）或 inline-table）

overflow 值不為 visible 的塊元素

display 值為 flow-root 的元素（新方式，文末會提及）

contain 值為 layout、content或 strict 的元素

彈性元素（display為 flex 或 inline-flex元素的直接子元素）

網(wǎng)格元素（display為 grid 或 inline-grid 元素的直接子元素）

多列容器（元素的 column-count 或 column-width 不為 auto，包括 column-count 為 1）

column-span 為 all 的元素始終會創(chuàng)建一個新的BFC，即使該元素沒有包裹在一個多列容器中。

常見應(yīng)用場景 使父元素包含浮動元素

下面例子解釋如何讓浮動內(nèi)容和父元素等高，清楚浮動負面影響

html


  
I am a floated element.

  I am text inside the outer box.

css

.outer {
  border: 5px dotted rgb(214,129,137);
  border-radius: 5px;
  width: 450px;
  padding: 10px;
  margin-bottom: 40px;
}

.float {
  padding: 10px;
  border: 5px solid rgba(214,129,137,.4);
  border-radius: 5px;
  background-color: rgba(233,78,119,.4);
  color: #fff;
  float: left;  
  width: 200px;
  margin: 0 20px 0 0;
}

通過給左側(cè)文字設(shè)置向左浮動實現(xiàn)文字環(huán)繞效果是很常見的做法，當文本足夠長時，會看到如下效果，父元素可以完全包裹子元素。

但事實上，float中的文字已經(jīng)脫離文檔，如果文檔流文字過少，浮動元素就會溢出父元素邊緣。

這時候為父元素設(shè)置overflow: auto或者除invisible默認值之外的任何有效值都能創(chuàng)建BFC解決這個問題，使父元素包含浮動元素

.outer {
  overflow: auto;
}

BFC防止垂直外邊距重疊

外邊距折疊的規(guī)則是：當兩個塊級元素相鄰并且在同一個塊級格式化上下文時，它們垂直方向上的外邊距會產(chǎn)生重疊

html


  
I am paragraph one and I have a margin top and bottom of 20px

  
I am paragraph two and I have a margin top and bottom of 20px

css

.outer {
  background-color: #ccc;
  margin: 0 0 40px 0;
}

p {
  padding: 0;
  margin: 20px 0 20px 0;
  background-color: rgb(233,78,119);
  color: #fff;
}

由于p元素的邊緣和外部div上的邊距之間沒有內(nèi)容，因此兩者將會合并，因此段落最終與框的頂部和底部齊平。我們在段落的上方和下方看不到任何灰色。如下圖：

當父元素設(shè)置了BFC之后，父元素與子元素p重疊區(qū)域?qū)⒉辉俸喜?/p> 

.outer {
  background-color: #ccc;
  margin: 0 0 40px 0;
  overflow: auto;
}

BFC防止文本環(huán)繞

依然像上面例子文字環(huán)繞效果的布局和樣式

html


  
I am a floated element.

  
I am text...

css

.float{
    float: left;
}

這時候如果不想要右側(cè)文字環(huán)繞浮動文字盒子，在左側(cè)div設(shè)置浮動的情況下，我可以通過使右邊div成為BFC，使兩個兄弟div互相隔離、互不影響，從而達到去除文字環(huán)繞的效果。

.text {
  overflow: auto;
}

創(chuàng)建BFC的新方式

創(chuàng)建BFC的許多方法通常會帶來一些副作用，目前為止似乎最安全的就是overflow屬性，但某些情況下我們不需要滾動條，此時滾動條就變成了這種方式的副作用，因此display有個新的屬性flow-root可以在任何需要創(chuàng)建BFC場景下使用，它并且不會帶來任何副作用。

flow-root瀏覽器兼容情況：

瀏覽器對此值的支持是有限的，如果要在不支持flex或網(wǎng)格布局瀏覽器創(chuàng)建回退，了解BFC阻止浮動元素的負面影響十分必要。

PS：更多前端資訊、技術(shù)干貨，請關(guān)注公眾號「前端新視界」

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

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

相關(guān)文章

  • 理解CSS布局和塊格式化上下文

    摘要：什么是塊格式化上下文，是頁面的可視化渲染的一部分，是塊盒子的布局過程發(fā)生的區(qū)域，也是浮動元素與其他元素交互的區(qū)域。直譯過來是格式化上下文，它是頁面中的一塊渲染區(qū)域，有一套渲染規(guī)則，決定了其子元素如何布局，以及和其他元素之間的關(guān)系和作用。 showImg(https://segmentfault.com/img/remote/1460000019193678); 在進行html布局及cs...

    Markxu 評論0 收藏0

  • 深入理解css盒子模型

    摘要：下面我們就一步一步揭開的神秘面紗，深入理解盒模型，這對我們在布局上會有一個質(zhì)的提升。與內(nèi)聯(lián)元素的百分比值與內(nèi)聯(lián)元素。 css是一門具象語言，并不像js那樣具有邏輯性，因此，就算入行了前端很久的工程師，也覺得css難以掌握。下面我們就一步一步揭開css的神秘面紗，深入理解css盒模型，這對我們在布局上會有一個質(zhì)的提升。 盒子模型 showImg(https://segmentfault....

    gplane 評論0 收藏0

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

    摘要：當一個元素從正常文檔流中抽出后，仍然在文檔流中的其他元素將忽略該元素并填補他原先的空間基于文檔流，理解定位模式相對定位，即相對于元素在文檔流中位置進行偏移。絕對定位，即完全脫離文檔流，相對于屬性非值的最近父級元素進行偏移。 主要參考文檔：http://www.zhangxinxu.com/wor...https://www.cnblogs.com/dojo-... 測試例子：https...

    wangxinarhat 評論0 收藏0

  • 「前端早讀君」css進階之徹底理解視覺格式化模型

    摘要：視覺格式化模型是用來處理和在視覺媒體上顯示文檔時使用的計算規(guī)則。匿名塊盒子在某些情況下進行視覺格式化時，需要添加一些增補性的盒子，這些盒子不能用選擇符選中，因此稱為匿名盒子。因此最好不要將其用于正式項目。 今日勵志 不論你在什么時候開始，重要的是開始之后不要停止。 前言 對于部分前端工程師來講，有時候CSS令他們很頭疼，明明設(shè)置了某個樣式，但是布局就是不起作用。 showImg(htt...

    Eidesen 評論0 收藏0

發(fā)表評論

0條評論

cuieney

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<