国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

邊距重疊與BFC

BicycleWarrior / 2842人閱讀

摘要：邊距重疊邊界重疊是指兩個(gè)或多個(gè)盒子可能相鄰也可能嵌套的相鄰邊界其間沒有任何非空內(nèi)容補(bǔ)白邊框重合在一起而形成一個(gè)單一邊界。兄弟元素的邊界重疊可以看到和和之間的間距不是，發(fā)生了邊距重疊是取了它們之間的最大值。

邊距重疊

邊界重疊是指兩個(gè)或多個(gè)盒子(可能相鄰也可能嵌套)的相鄰邊界(其間沒有任何非空內(nèi)容、補(bǔ)白、邊框)重合在一起而形成一個(gè)單一邊界。
兩個(gè)或多個(gè)塊級(jí)盒子的垂直相鄰邊界會(huì)重合，它們的邊界寬度是相鄰邊界寬度中的最大值。注意水平邊界是不會(huì)重合的。

邊距重疊例子

父子元素的邊界重疊

以為期待的效果：

而實(shí)際上效果如下

在這里父元素的高度不是110px，而是100px，在這里發(fā)生了高度坍塌。原因是如果塊元素的 margin-top 與它的第一個(gè)子元素的margin-top 之間沒有 border、padding、inline content、 clearance 來(lái)分隔，或者塊元素的 margin-bottom 與它的最后一個(gè)子元素的margin-bottom 之間沒有 border、padding、inline content、height、min-height、 max-height 分隔，那么外邊距會(huì)塌陷。子元素多余的外邊距會(huì)被父元素的外邊距截?cái)唷?/p>

兄弟元素的邊界重疊




    
1

    
2

    
3

可以看到1和2,2和3之間的間距不是50px，發(fā)生了邊距重疊是取了它們之間的最大值30px。

空元素的邊界重疊
假設(shè)有一個(gè)空元素，它有外邊距，但是沒有邊框或填充。在這種情況下，上外邊距與下外邊距就碰到了一起，它們會(huì)發(fā)生合并：

BFC原理

解決上述問(wèn)題的其中一個(gè)辦法就是創(chuàng)建BFC。BFC的全稱為Block Formatting Context，即塊級(jí)格式化上下文。一個(gè)BFC有如下特性：

處于同一個(gè)BFC中的元素相互影響，可能會(huì)發(fā)生margin collapse；

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

計(jì)算BFC的高度時(shí)，考慮BFC所包含的所有元素，包括浮動(dòng)元素也參與計(jì)算；

浮動(dòng)盒的區(qū)域不會(huì)疊加到BFC上；

創(chuàng)建BFC

創(chuàng)建BFC的方法如下：

浮動(dòng)（float的值不為none）；

絕對(duì)定位元素（position的值為absolute或fixed）；

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

表格單元（display為table、table-cell、table-caption等HTML表格相關(guān)屬性）；

彈性盒（display為flex或inline-flex）；

overflow不為visible；

BFC的使用場(chǎng)景

防止垂直margin重疊：
父子元素的邊界重疊得解決方案：
在父元素上加上overflow:hidden;使其成為BFC。

.parent {
    background: #E7A1C5;
    overflow: hidden;
}

兄弟元素的邊界重疊，在第二個(gè)子元素創(chuàng)建一個(gè)BFC上下文：


    
1

    

        
2

    

    
3

清除內(nèi)部浮動(dòng)




    
我是浮動(dòng)元素

父元素#float的高度為0，解決方案為為父元素#float創(chuàng)建BFC，這樣浮動(dòng)子元素的高度也會(huì)參與到父元素的高度計(jì)算：

#float {
    background: #FEC68B;
    overflow: hidden;  /*這里也可以用float:left*/
}

自適應(yīng)兩欄布局


    
    
    
左

    
右

在這里設(shè)置右邊的高度高于左邊，可以看到左邊超出的部分跑到右邊去了，這是由于由于浮動(dòng)框不在文檔的普通流中，所以文檔的普通流中的塊框表現(xiàn)得就像浮動(dòng)框不存在一樣導(dǎo)致的。

解決方案為給右側(cè)元素創(chuàng)建一個(gè)BFC，原理是BFC不會(huì)與float元素發(fā)生重疊。

#layout .right {
    height: 110px;
    background: #ccc;
    overflow: auto;
}

參考鏈接：http://www.html-js.com/articl...

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

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

相關(guān)文章

  • 邊距重疊以及解決方案BFC

    摘要：邊距重疊統(tǒng)一的解決方案設(shè)置或者或者觸發(fā)邊距重疊有一下三種情況首先把所有的格式清空邊距重疊父子元素之間塊級(jí)父元素與第一個(gè)或者最后一個(gè)子元素父元素不存在上邊框上內(nèi)邊距內(nèi)聯(lián)元素清除浮動(dòng)。 邊距重疊 統(tǒng)一的解決方案；設(shè)置padding或者border或者觸發(fā)BFC 邊距重疊有一下三種情況： 首先把所有的margin格式清空 邊距重疊 html *{ margi...

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

  • 邊距重疊以及解決方案BFC

    摘要：邊距重疊統(tǒng)一的解決方案設(shè)置或者或者觸發(fā)邊距重疊有一下三種情況首先把所有的格式清空邊距重疊父子元素之間塊級(jí)父元素與第一個(gè)或者最后一個(gè)子元素父元素不存在上邊框上內(nèi)邊距內(nèi)聯(lián)元素清除浮動(dòng)。 邊距重疊 統(tǒng)一的解決方案；設(shè)置padding或者border或者觸發(fā)BFC 邊距重疊有一下三種情況： 首先把所有的margin格式清空 邊距重疊 html *{ margi...

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

  • 面試官：談?wù)勀銓?duì) CSS 盒模型的認(rèn)識(shí)?（你確定會(huì)？）

    摘要：從上圖可以看到盒子模型的范圍也包括，和標(biāo)準(zhǔn)盒子模型不同的是盒子模型的部分包含了和。運(yùn)行效果以上就是的清除浮動(dòng)原理。愿你成為終身學(xué)習(xí)者 題目：談?wù)勀銓?duì) CSS 盒模型的認(rèn)識(shí) 涉及知識(shí)點(diǎn)(層層遞進(jìn)): 基本概念：標(biāo)準(zhǔn)模型+ IE模型(區(qū)別) CSS如何設(shè)置這兩種模型 JS如何設(shè)置獲取盒子模型對(duì)應(yīng)的寬和高 實(shí)例題(根據(jù)盒模型解釋邊距重疊) BFC(邊距重疊解決方案) CSS盒模型 1. ...

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

  • 面試官：談?wù)勀銓?duì) CSS 盒模型的認(rèn)識(shí)?（你確定會(huì)？）

    摘要：從上圖可以看到盒子模型的范圍也包括，和標(biāo)準(zhǔn)盒子模型不同的是盒子模型的部分包含了和。運(yùn)行效果以上就是的清除浮動(dòng)原理。愿你成為終身學(xué)習(xí)者 題目：談?wù)勀銓?duì) CSS 盒模型的認(rèn)識(shí) 涉及知識(shí)點(diǎn)(層層遞進(jìn)): 基本概念：標(biāo)準(zhǔn)模型+ IE模型(區(qū)別) CSS如何設(shè)置這兩種模型 JS如何設(shè)置獲取盒子模型對(duì)應(yīng)的寬和高 實(shí)例題(根據(jù)盒模型解釋邊距重疊) BFC(邊距重疊解決方案) CSS盒模型 1. ...

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

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

0條評(píng)論

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