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

資訊專欄INFORMATION COLUMN

邊距重疊與BFC

BicycleWarrior / 2848人閱讀

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

邊距重疊

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

邊距重疊例子

父子元素的邊界重疊

以為期待的效果：

而實際上效果如下

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

兄弟元素的邊界重疊




    
1

    
2

    
3

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

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

BFC原理

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

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

BFC在頁面上是一個獨立的容器，容器里面的子元素不會影響到外面的元素，反之亦然；

計算BFC的高度時，考慮BFC所包含的所有元素，包括浮動元素也參與計算；

浮動盒的區(qū)域不會疊加到BFC上；

創(chuàng)建BFC

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

浮動（float的值不為none）；

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

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

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

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

overflow不為visible；

BFC的使用場景

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

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

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


    
1

    

        
2

    

    
3

清除內(nèi)部浮動




    
我是浮動元素

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

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

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


    
    
    
左

    
右

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

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

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

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

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

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

相關(guān)文章

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

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

    Tychio 評論0 收藏0

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

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

    NervosNetwork 評論0 收藏0

  • 面試官：談?wù)勀銓?CSS 盒模型的認識?（你確定會？）

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

    CocoaChina 評論0 收藏0

  • 面試官：談?wù)勀銓?CSS 盒模型的認識?（你確定會？）

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

    Channe 評論0 收藏0

發(fā)表評論

0條評論

BicycleWarrior

男|高級講師

TA的文章

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