成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

【CSS】BFC - 塊級(jí)格式化上下文

李文鵬 / 1962人閱讀

摘要：塊級(jí)格式化上下文。其優(yōu)點(diǎn)為自適應(yīng)內(nèi)容由于封閉而更健壯，容錯(cuò)性更強(qiáng)。兩個(gè)相鄰的外邊距都是負(fù)數(shù)時(shí)，折疊結(jié)果是兩者絕對值的較大值。兩個(gè)外邊距一正一負(fù)時(shí)，折疊結(jié)果是兩者的相加的和。這可能是因?yàn)闉g覽器四舍五入了列寬從而所有列的總寬度會(huì)超出容器。

BFC（block formatting context）塊級(jí)格式化上下文。

如果一個(gè)元素具有 BFC，內(nèi)部子元素?zé)o論如何都不會(huì)影響外部的元素。所以，BFC 元素是不可能發(fā)生 margin 重疊的，因?yàn)?margin 重疊是會(huì)影響外面的元素的; BFC 元素也可以用來清除浮動(dòng)的影響，因?yàn)槿绻磺宄釉馗?dòng)則父元素高度塌陷，必然會(huì)影響后面元素布局和定位，這顯然有違 BFC 元素的子元素不會(huì)影響外部元素的設(shè)定。

觸發(fā)BFC的情況有幾下幾種：

根元素;

float 的值不為 none;

overflow 的值為 auto、scroll 或 hidden;

display 的值為 table-cell、table-caption 和 inline-block 中的任何一個(gè);

position 的值不為 relative 和 static。

BFC是一個(gè)獨(dú)立的布局環(huán)境，其中的元素布局是不受外界的影響，并且在一個(gè)BFC中，塊盒與行盒（行盒由一行中所有的內(nèi)聯(lián)元素所組成）都會(huì)垂直的沿著其父元素的邊框排列。

上面幾種情況下無須使用 clear:both 屬性去清除浮動(dòng)

BFC 與流體布局

BFC 的結(jié)界特性最重要的用途其實(shí)不是去 margin 重疊或者是清除 float 影響，而是實(shí)現(xiàn)更健壯、更智能的自適應(yīng)布局。

其優(yōu)點(diǎn)為：

自適應(yīng)內(nèi)容由于封閉而更健壯，容錯(cuò)性 更強(qiáng)。比方說，內(nèi)部設(shè)置 clear:both 不會(huì)與 float 元素相互干擾而導(dǎo)致錯(cuò)位

自適應(yīng)內(nèi)容自動(dòng)填滿浮動(dòng)以外區(qū)域，無 須關(guān)心浮動(dòng)元素寬度，可以整站大規(guī)模應(yīng)用

因此遇到兩欄布局可以使用如下方式：


    
    
你好，你好，你好...




...

.left { float: left; }
.right { float: right; }
.bfc { overflow: hidden; }

能實(shí)現(xiàn)自適應(yīng)布局的屬性有以下幾個(gè)：

overflow：autohidden (適用于IE7及以上)

display:inline-block (適用于IE6、IE7)

display:table-cell (適用于IE8)

利用以上屬性可實(shí)現(xiàn)兩套針對IE7以上的自適應(yīng)布局：
1、借助overflow

.lbf-content { overflow: hidden; }

2、融合 display:table-cell 和 display:inline-block

.lbf-content {
    display: table-cell; 
    width: 9999px; 
    /* 如果不需要兼容 IE7，下面樣式可以省略 */       *display: inline-block; *width: auto;
}

以上兩種基于BFC的自適應(yīng)布局均支持無限嵌套，因此，多欄自適應(yīng)可以通過嵌套方式實(shí)現(xiàn)。

最后，關(guān)于display:table-cell 元素內(nèi)連續(xù)英文字符無法換行的問題，可以用下面這種方式解決：

.word-break {
      display: table;
      width: 100%;
      table-layout: fixed;
      word-break: break-all;
}
外邊距折疊

常規(guī)流布局時(shí)，盒子都是垂直排列，兩者之間的間距由各自的外邊距所決定，但不是二者外邊距之和。


  
Sibling 1

  
Sibling 2




......

.container {
  background-color: red;
  overflow: hidden; /* creates a block formatting context */
}
p {
  background-color: lightgreen;
  margin: 10px 0;
}

其渲染結(jié)果為：

理論上，兩個(gè)p元素之間的外邊距應(yīng)當(dāng)是二者外邊距之和（20px）但實(shí)際上卻是10px，這是外邊距折疊(Collapsing Margins)的結(jié)果。

折疊的結(jié)果按照如下規(guī)則計(jì)算：

1、兩個(gè)相鄰的外邊距都是正數(shù)時(shí)，折疊結(jié)果是它們兩者之間較大的值。

2、兩個(gè)相鄰的外邊距都是負(fù)數(shù)時(shí)，折疊結(jié)果是兩者絕對值的較大值。

3、兩個(gè)外邊距一正一負(fù)時(shí)，折疊結(jié)果是兩者的相加的和。

產(chǎn)生折疊的必備條件：margin必須是鄰接的!

利用 BFC 避免外邊距折疊

BFC產(chǎn)生外邊距折疊要滿足一個(gè)條件：兩個(gè)相鄰元素要處于同一個(gè)BFC中。所以，若兩個(gè)相鄰元素在不同的BFC中，就能避免外邊距折疊。


    
Sibling 1

    
Sibling 2

    
    

        
Sibling 3

    




......

.container {
    background-color: red;
    overflow: hidden; /* creates a block formatting context */
}
p {
    margin: 10px 0;
    background-color: lightgreen;
}
.newBFC {
    overflow: hidden;  /* creates new block formatting context */
}

結(jié)果如圖所示：

由于第二個(gè)和第三個(gè)元素不屬于同一個(gè)BFC，因此不會(huì)發(fā)生外邊距折疊。

BFC包含浮動(dòng)

浮動(dòng)元素是會(huì)脫離文檔流的(絕對定位元素會(huì)脫離文檔流)。如果一個(gè)沒有高度或者h(yuǎn)eight是auto的容器的子元素是浮動(dòng)元素，則該容器的高度是不會(huì)被撐開的。我們通常會(huì)利用偽元素(:after或者:before)來解決這個(gè)問題。
BFC能包含浮動(dòng)，也能解決容器高度不會(huì)被撐開的問題。


    
Sibling

    
Sibling




......

.container {
  background-color: green;
}
.container div {
  float: left;
  background-color: lightgreen;
  margin: 10px;
}

由于父元素沒有高度，內(nèi)部元素浮動(dòng)后脫離父元素，解決方式為將父元素變?yōu)锽FC，解決方式如下：

.container {
    overflow: hidden; //利用overflow：hidden將父元素變?yōu)锽FC
    background-color: green;
}
多列布局使用BFC

如果我們創(chuàng)建一個(gè)占滿整個(gè)容器寬度的多列布局，在某些瀏覽器中最后一列有時(shí)候會(huì)掉到下一行。這可能是因?yàn)闉g覽器四舍五入了列寬從而所有列的總寬度會(huì)超出容器。但如果我們在多列布局中的最后一列里創(chuàng)建一個(gè)新的BFC，它將總是占據(jù)其他列先占位完畢后剩下的空間。


    
column 1

    
column 2

    
column 3




......

.column {
    width: 31.33%;
    background-color: green;
    float: left;
    margin: 0 1%;
}
.column:last-child {
    float: none;
    overflow: hidden; 
}

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

轉(zhuǎn)載請注明本文地址：http://hztianpu.com/yun/114293.html

相關(guān)文章

  • 十分鐘復(fù)習(xí)CSS盒模型與BFC

    摘要：盒模型與本文為收集整理總結(jié)網(wǎng)上資源旨在系統(tǒng)復(fù)習(xí)盒模型與節(jié)省復(fù)習(xí)時(shí)間閱讀分鐘什么是盒模型每一個(gè)文檔中，每個(gè)元素都被表示為一個(gè)矩形的盒子它都會(huì)具有內(nèi)容區(qū)盒模型主要分兩種標(biāo)準(zhǔn)盒模型盒模型怪異盒模型兩者的區(qū)別標(biāo)準(zhǔn)盒模型的寬高則為內(nèi)容區(qū)域的寬高盒模型 css盒模型與BFC 本文為收集整理總結(jié)網(wǎng)上資源 旨在系統(tǒng)復(fù)習(xí)css盒模型與bfc 節(jié)省復(fù)習(xí)時(shí)間 閱讀10分鐘 什么是盒模型 每一個(gè)文檔中，每...

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

  • 十分鐘復(fù)習(xí)CSS盒模型與BFC

    摘要：盒模型與本文為收集整理總結(jié)網(wǎng)上資源旨在系統(tǒng)復(fù)習(xí)盒模型與節(jié)省復(fù)習(xí)時(shí)間閱讀分鐘什么是盒模型每一個(gè)文檔中，每個(gè)元素都被表示為一個(gè)矩形的盒子它都會(huì)具有內(nèi)容區(qū)盒模型主要分兩種標(biāo)準(zhǔn)盒模型盒模型怪異盒模型兩者的區(qū)別標(biāo)準(zhǔn)盒模型的寬高則為內(nèi)容區(qū)域的寬高盒模型 css盒模型與BFC 本文為收集整理總結(jié)網(wǎng)上資源 旨在系統(tǒng)復(fù)習(xí)css盒模型與bfc 節(jié)省復(fù)習(xí)時(shí)間 閱讀10分鐘 什么是盒模型 每一個(gè)文檔中，每...

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

  • BFC原理詳解

    摘要：最常見的有簡稱和簡稱?？梢园阉斫獬墒且粋€(gè)獨(dú)立的容器，并且這個(gè)容器的里的布局，與這個(gè)容器外的毫不相干。根據(jù)布局規(guī)則第二條垂直方向的距離由決定。參考前端精選文摘神奇背后的原理之詳解深入理解流體特性和特性下多欄自適應(yīng)布局布局 一.BFC是什么 在解釋 BFC 是什么之前，需要先介紹 Box、Formatting Context的概念。 1.BOX：CSS布局的基本單位 Box是CSS布局的...

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

  • 前端進(jìn)階之什么是BFC？BFC的原理是什么？如何創(chuàng)建BFC？

    摘要：官方說法就是它規(guī)定了用戶端在媒介中如何處理文檔樹。是的包含塊，同時(shí)又是的包含塊，不是絕對的。因此稱為匿名盒子。行內(nèi)盒子行內(nèi)級(jí)元素會(huì)生成行內(nèi)級(jí)盒子，該盒子同時(shí)會(huì)參與行內(nèi)格式化上下文的創(chuàng)建。如果只有一個(gè)值指定為，則其使用的值來自相等。 作者：陳大魚頭 github： KRISACHAN 盒模型 The CSS box model describes the rectangular b...

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

  • CSS > 譯文：理解CSS中的塊級(jí)格式化上下文

    摘要：譯文理解中的塊級(jí)格式化上下文塊級(jí)格式化上下文是網(wǎng)頁視覺渲染的一部分，并用于決定塊盒子的布局。根據(jù)所言浮動(dòng)絕對定位元素為或行內(nèi)塊元素表格單元格表格標(biāo)題以及屬性值不為的元素除了該值被傳播到視點(diǎn)的情況將創(chuàng)建一個(gè)新的塊級(jí)格式化上下文。 CSS > 譯文：理解CSS中的塊級(jí)格式化上下文 Original Author: Ritesh Kumar Original Article: http:/...

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

  • CSS中重要的BFC

    摘要：中有個(gè)重要的概念，搞懂可以讓我們理解中某些原本詭異的地方。簡介在解釋之前，先說一下文檔流。我們常說的文檔流其實(shí)分為定位流浮動(dòng)流普通流三種。使用包含浮動(dòng)元素注意，這里觸發(fā)并不能阻止其它形式的脫離文檔流的元素覆蓋正常流元素。 CSS中有個(gè)重要的概念BFC，搞懂BFC可以讓我們理解CSS中某些原本詭異(??)的地方。 1. 簡介 在解釋BFC之前，先說一下文檔流。我們常說的文檔流其實(shí)分為定位...

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

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

0條評(píng)論

閱讀需要支付1元查看
<