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

資訊專欄INFORMATION COLUMN

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

PAMPANG / 727人閱讀

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

BFC

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

BFC的作用：

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

生成BFC:

設(shè)置浮動(dòng)

設(shè)置絕對(duì)定位

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

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

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

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

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


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


總結(jié)：

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

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

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

相關(guān)文章

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

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

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

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

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

    jokester 評(píng)論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ù)相對(duì)于父容器(包含塊)的content box的寬度 只有包含塊的高度不依賴該元素時(shí)，百分比寬度才生效 paddi...

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

  • 深究盒模型的margin合并問(wèn)題

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

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

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

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

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

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

0條評(píng)論

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