問題
在什么場景下會出現外邊距合并?如何合并?如何不讓相鄰元素外邊距合并?給個父子外邊距合并的范例
- 外邊距合并會發生在相鄰元素、父子元素的外邊距 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
}
本教程版權歸 張宇 和 饑人谷 所有,轉載須說明來源