邊距合并、BFC、清除浮動

問題

在什么場景下會出現外邊距合并?如何合并?如何不讓相鄰元素外邊距合并?給個父子外邊距合并的范例


  • 外邊距合并會發生在相鄰元素、父子元素的外邊距 margin 重疊的時候。相鄰元素之間的距離,取決于這兩個元素之中外邊距較大的一個。
  • 需要注意的是,盒模型若不設定margin、padding、border或者值為0,都相當于不存在這些屬性,所以父元素內部元素的margin會透過不存在的padding、border,與父元素的margin發生了重疊,充當了父元素的margin,使得子元素的外邊距不能撐起在父元素中的位置。為了不發生這種情況,給父元素設定margin或者padding即可。


    父子元素邊距合并

    取消父子元素邊距合并

去除inline-block內縫隙有哪幾種常見方法?


  • 將父元素的字體大小設為font-size:0;
  • 去除html原文中元素直接的空格
  • 可以設inline-block元素的負margin

父容器使用overflow: auto| hidden撐開高度的原理是什么?


  • 使用overflow:auto | hidden,本質是將父容器轉變為一個BFC。在BFC的特性使得其包裹浮動元素。

BFC是什么?如何形成BFC,有什么作用?


  • w3c規范中的BFC定義
    浮動元素和絕對定位元素,非塊級盒子的塊級容器(例如 inline-blocks, table-cells, 和 table-captions),以及overflow值不為“visiable”的塊級盒子,都會為他們的內容創建新的BFC(塊級格式上下文)。
    在BFC中,盒子從頂端開始垂直地一個接一個地排列,兩個盒子之間的垂直的間隙是由他們的margin 值所決定的。在一個BFC中,兩個相鄰的塊級盒子的垂直外邊距會產生折疊。
    在BFC中,每一個盒子的左外邊緣(margin-left)會觸碰到容器的左邊緣(border-left)(對于從右到左的格式來說,則觸碰到右邊緣)。

  • 通過給容器添加下列任意一個樣式即可形成BFC

    • overflow: scroll
    • overflow: hidden
    • display: flex
    • float: left
    • display: table
  • 當元素分屬于其他BFC時,他們之間就不會產生一些聯系,例如外邊距折疊,文字環繞浮動元素。這些特性可以用來形成多欄布局,清除文字環繞,也可以用來包裹浮動元素。

浮動導致的父容器高度塌陷指什么?為什么會產生?有幾種解決方法


浮動高度塌陷
  • 浮動元素脫離了文檔流,使得父容器沒有內容,無法撐起自身高度。解決方法:
    • 清除浮動 stackoverflow
    • 父元素形成BFC,包裹浮動元素

以下代碼每一行的作用是什么? 為什么會產生作用? 和BFC撐開空間有什么區別?


.clearfix:after{ 
    content: ''; //空字符
    display: block;// 顯示為塊級元素
    clear: both;//清除兩側浮動
} //用于清除浮動 
.clearfix{ 
    *zoom: 1;//用于兼容IE6、7
}

本教程版權歸 張宇 和 饑人谷 所有,轉載須說明來源

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,814評論 1 92
  • relative:生成相對定位的元素,通過top,bottom,left,right的位置相對于其正常位置進行定位...
    zx9426閱讀 969評論 0 2
  • 一、在什么場景下會出現外邊距合并?如何合并?如何不讓相鄰元素外邊距合并?給個父子外邊距合并的范例 在CSS當中,相...
    dengpan閱讀 603評論 0 0
  • 一,浮動元素有什么特征?對父容器、其他浮動元素、普通元素、文字分別有什么影響? 浮動模型是一種可視化格式模型,浮動...
    DeeJay_Y閱讀 907評論 0 4
  • 1.浮動元素有什么特征?對父容器、其他浮動元素、普通元素、文字分別有什么影響? 浮動元素不在文檔的普通流中,它可以...
    饑人谷_Young丶K閱讀 464評論 0 0