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

資訊專欄INFORMATION COLUMN

20170601-BFC(塊級格式化上下文)

weknow619 / 829人閱讀

摘要：的全稱是塊級格式化上下文。浮動絕對定位的元素定位塊容器屬性為帶有屬性該屬性值不為和的為的塊級元素會在其內(nèi)部建立新的塊級格式化上下文。使用可以解決以下問題父子元素的上下合并問題文字圍繞浮動元素的問題和子元素浮動導(dǎo)致父元素高度為的問題。

BFC

BFC的全稱是Block Format Content -- 塊級格式化上下文。浮動、絕對定位的元素(absolute、fixed定位)、塊容器(display屬性為inline-block、table、table-cell、table、table-caption)、帶有overflow屬性(該屬性值不為visible和inherit)的display為block的塊級元素會在其內(nèi)部建立新的塊級格式化上下文。

BFC的作用：

元素們處于同一個塊級格式化上下文時，會遵守相同的規(guī)則/格式(例如父子元素的margin會重疊)，但是處于不同的塊級格式化上下文時，元素的排列展示遵守的規(guī)則/格式是不同的(處于不同的BFC的父子元素的margin不會重疊--->父級元素處于一個BFC中，父級元素內(nèi)部新建一個BFC)

生成BFC:

設(shè)置浮動

設(shè)置絕對定位

設(shè)置display屬性為inline-block、table、table-cell、table-caption

設(shè)置overflow屬性為 hidden、auto、scroll(不能設(shè)置為visible和inherit)

BFC的實際應(yīng)用：

父子元素的margin-top、margin-bottom會折疊，在父元素內(nèi)部生成新的BFC，可以阻止父子元素的margin-top、margin-bottom重疊

BFC可以阻止文字圍繞浮動元素的情況：下圖中的例子中，需要在block02元素內(nèi)部生成新的BFC，使得block02內(nèi)部的文字不圍繞浮動元素


使用浮動元素可能會出現(xiàn)父容器高度為0的現(xiàn)象，在父容器內(nèi)部生成新的BFC可以解決該問題


總結(jié)：

給塊級元素設(shè)置某些屬性，會在其內(nèi)部產(chǎn)生新的BFC(塊級格式化上下文)，處于相同的BFC的元素會遵守相同的規(guī)則/格式。使用BFC可以解決以下問題：父子元素的上下margin合并問題、文字圍繞浮動元素的問題和子元素浮動導(dǎo)致父元素高度為0的問題。

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

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

相關(guān)文章

  • 20170601-BFC(塊級格式化上下文)

    摘要：的全稱是塊級格式化上下文。浮動絕對定位的元素定位塊容器屬性為帶有屬性該屬性值不為和的為的塊級元素會在其內(nèi)部建立新的塊級格式化上下文。使用可以解決以下問題父子元素的上下合并問題文字圍繞浮動元素的問題和子元素浮動導(dǎo)致父元素高度為的問題。 BFC BFC的全稱是Block Format Content -- 塊級格式化上下文。浮動、絕對定位的元素(absolute、fixed定位)、塊容器(...

    PAMPANG 評論0 收藏0

  • 視覺格式化模型(Visual formatting model)

    摘要：塊級盒參與塊格式化上下文。行內(nèi)級盒參與行內(nèi)格式化上下文塊格式化上下文行內(nèi)格式化上下文相對定位浮動盒就是一個在當(dāng)前行向左或向右移動的盒。浮動絕對定位絕對定位模型中，一個盒會有相對于其包含塊的明確偏移，它會從常規(guī)流中全部移除不會影響后面的兄弟。 在可視化格式模型(Visual formatting model)當(dāng)中,文檔樹中的每個元素根據(jù)其盒模型生成0個或多個盒.這些盒的布局由(以下因素)...

    jokester 評論0 收藏0

  • CSS盒模型

    box model showImg(https://segmentfault.com/img/bVtyKC?w=746&h=455); Margin Border Padding Content width 指定content box 的寬度 百分?jǐn)?shù)相對于父容器(包含塊)的content box的寬度 只有包含塊的高度不依賴該元素時，百分比寬度才生效 paddi...

    fish 評論0 收藏0

  • 深究盒模型的margin合并問題

    摘要：即我們常說的脫離文檔流的元素。如果一個元素不是流外的，即仍在文檔流中的元素，就叫流內(nèi)元素。兩個兄弟盒之間的豎直距離由屬性決定。同一個塊格式化上下文中的相鄰塊級盒之間的豎直會合并。如果盒的和相鄰，那么可能會被徹底合并。 1.首先，了解一些詞匯 - 流內(nèi)元素? 如果一個元素是浮動的，絕對定位的或者是根元素，那么它就是流外元素。即我們常說的脫離文檔流的元素。如果一個元素不是流外的，即仍在文檔...

    cyqian 評論0 收藏0

  • BFC，包含塊，文檔流，浮動，定位是個啥關(guān)系---CSS視覺格式化模型

    摘要：視覺格式化模型瀏覽器在解析渲染我們所寫的內(nèi)容，順序渲染普通文檔流。渲染結(jié)果如下圖這兒有一個知識點文檔流按我的理解就是在瀏覽器渲染顯示的一個模式，這個模式的特點自上而下，從左到右排列規(guī)則。如果不特殊指定，瀏覽器會默認(rèn)當(dāng)前的渲染是按文檔流模式。 CSS視覺格式化模型 瀏覽器在解析渲染我們所寫的html內(nèi)容，順序渲染（普通文檔流）。 1 2 3 4 ...

    huashiou 評論0 收藏0

發(fā)表評論

0條評論

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