1.在什么場景下會出現外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個父子外邊距合并的范例
- 外邊距合并：如下圖所示，當塊元素在正常文檔流中，它們之間相鄰（a和bottom和b的top）的外邊距會現合并,當塊元素浮動脫離文檔流，或者以inline-block（本身自帶間距）時，它們之間相鄰的外邊距不會被合并。合并時取值以他們之間同時滿足條件的較大值。
-
外邊距合并場景以及如何合并
-
相鄰的同胞元素
Paste_Image.png 父元素與子元素
-
- 第一個子元素的上外邊距和父元素的上外邊距。
-
最后一個子元素的下外邊距和父元素的下外邊距。(注意下圖右邊的下拉條)。
Paste_Image.png
如果塊元素的 margin-top
與它的第一個子元素的margin-top
之間沒有 border
、padding
、inline content、* clearance
* 來分隔，或者塊元素的 margin-bottom
與它的最后一個子元素的margin-bottom
之間沒有 border
、padding
、inline content、height
、min-height
、 max-height
分隔，那么外邊距會合并(塌陷)。子元素多余的外邊距會被父元素的外邊距截斷。
3.空元素:如下圖，設置它的上外邊距為100px.下外邊距為200px.但是它的總高度為200px.說明它的上外邊距和下外邊距合并。
-
如何不讓相鄰外邊距合并？
- 創建了新的BFC的元素（例如浮動元素或者'overflow'值為'visible'以外的元素）與它的子元素的外邊距不會折疊.
- 浮動元素不與任何元素的外邊距產生折疊（包括其父元素和子元素）
- 絕對定位元素不與任何元素的外邊距產生折疊
- inline-block元素不與任何元素的外邊距產生折疊
- 一個常規文檔流元素的margin-bottom與它下一個常規文檔流的兄弟元素的margin-top會產生折疊，除非它們之間存在間隙(clearance)
- 一個常規文檔流元素的margin-top 與其第一個常規文檔流的子元素的margin-top產生折疊，條件為父元素不包含 padding 和 border ，子元素不包含 clearance。
- 一個 'height' 為 'auto' 并且 'min-height' 為 '0'的常規文檔流元素的 margin-bottom 會與其最后一個常規文檔流子元素的 margin-bottom 折疊，條件為父元素不包含 padding 和 border ，子元素的 margin-bottom 不與包含 clearance 的 margin-top 折疊。
- 一個不包含border-top、border-bottom、padding-top、padding-bottom的常規文檔流元素，并且其 'height' 為 0 或 'auto'， 'min-height' 為 '0'，其里面也不包含行盒(line box)，其自身的 margin-top 和 margin-bottom 會折疊。
2.去除inline-block內縫隙有哪幾種常見方法?
-
inline-block內縫隙現象：
- 去除間隙方法：
1.讓元素之間本身沒有間隙
2.設置父元素font-size:0；消除占位符。
3.浮動
4.負margin，第一個需要特別設置。
3.父容器使用overflow: auto| hidden撐開高度的原理是什么？
- overflow:auto|hidden會創建一個BFC（塊級格式上下文），而BFC中每一個盒子的左外邊緣（margin-left）會觸碰到容器的左邊緣(border-left)（對于從右到左的格式來說，則觸碰到右邊緣）。
4.BFC是什么？如何形成BFC，有什么作用?
首先BFC是一個名詞，是一個獨立的布局環境，我們可以理解為一個箱子（實際上是看不見摸不著的），箱子里面物品的擺放是不受外界的影響的。轉換為BFC的理解則是：BFC中的元素的布局是不受外界的影響（我們往往利用這個特性來消除浮動元素對其非浮動的兄弟元素和其子元素帶來的影響。）并且在一個BFC中，塊盒與行盒（行盒由一行中所有的內聯元素所組成）都會垂直的沿著其父元素的邊框排列。
BFC形成條件
浮動元素和絕對定位元素，非塊級盒子的塊級容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不為“visiable”的塊級盒子，都會為他們的內容創建新的BFC（塊級格式上下文）。
在BFC中，盒子從頂端開始垂直地一個接一個地排列，兩個盒子之間的垂直的間隙是由他們的margin 值所決定的。在一個BFC中，兩個相鄰的塊級盒子的垂直外邊距會產生折疊。
作用：
1.為p元素創建一個新的BFC，使它不受外界其他元素的影響。
2.使父元素不受浮動（脫離文檔流的元素）元素影響而塌陷。
5.浮動導致的父容器高度塌陷指什么？為什么會產生？有幾種解決方法
- 看圖說話： 注意看父容器邊框，父容器沒有設置height值。
因為浮動會使元素脫離文檔流，父容器失去撐開它高度的條件，所以塌陷。
解決方法。
1.空元素設置clear屬性。
或者使用css偽類::after(原理同上)
2 為其父元素創建一個BFC。（圖中所示o:h只是其中一種創建BFC的方式。）
6.以下代碼每一行的作用是什么？ 為什么會產生作用？ 和BFC撐開空間有什么區別？
.clearfix:after{ /*after屬性，在class="clearfix"的元素后面添加下面屬性*/
content: ''; display: block; clear: both; /*一個內容為空的元素，并且以塊元素方式呈現，左右不允許有浮動元素。*/
}
.clearfix{ *zoom: 1;} /zoom為IE的私有屬性，而*也只有IE才會識別*后面的代碼，zomm：1（設置對象的縮放比例）在這里只是IE用來清除浮動的一種方法。*/
這個任務做得頭有點痛阿！！！！！！！！！！！
本文版權歸本人和饑人谷所有，轉載請注明來源！
