在什么場景下會出現外邊距合并？如何合并？
產生折疊的必備條件：margin必須是鄰接的
沒有線盒，沒有空隙（clearance，下面會講到），沒有padding和border將他們分隔開
都屬于垂直方向上相鄰的外邊距，可以是下面任意一種情況
元素的margin-top與其第一個常規文檔流的子元素的margin-top
元素的margin-bottom與其下一個常規文檔流的兄弟元素的margin-top
height為auto的元素的margin-bottom與其最后一個常規文檔流的子元素的margin-bottom
高度為0并且最小高度也為0，不包含常規文檔流的子元素，并且自身沒有建立新的BFC的元素的margin-top和margin-bottom
折疊的結果:
兩個相鄰的外邊距都是正數時，折疊結果是它們兩者之間較大的值
兩個相鄰的外邊距都是負數時，折疊結果是兩者絕對值的較大值
兩個外邊距一正一負時，折疊結果是兩者的相加的和
消除邊距合并
- 父子邊距合并：父容器加border或者padding：1px；
- 兄弟邊距合并：float或者display：inline-block;
- 不同父容器中的相鄰外邊距合并：overflow
- 自身上下外邊距合并：加border：transparent；或者padding：1px；或者overflow：auto；
消除list作為inline-block時的縫隙
- li與li之間不換行
<li>tag1</li><li>tag2</li><li>tag3</li> - 交錯換行
<li>tag1</li
><li>tag2</li
><li>tag3</li>
- 負margin，第一個li單獨設置margin-left：0；
margin-left: -4px;
- 設置li為float：left；父容器為overflow：auto；
- 父容器設置font-size：0；后代中須重設font-size；
父容器使用overflow: auto| hidden撐開高度的原理是什么？
父容器形成了一個BFC
浮動導致的父容器高度塌陷指什么
- 指元素浮動以后脫離了文檔流，無法撐開父容器的空間
- 解決辦法：
使用clear類（偽類）或clear清除浮動
.ct1::after{
display: block;
content: '';
clear: both;
}
BFC
- 定義：浮動元素和絕對定位元素，非塊級盒子的塊級容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不為“visiable”的塊級盒子，都會為他們的內容創建新的BFC（塊級格式上下文）
在BFC中，盒子從頂端開始垂直地一個接一個地排列，兩個盒子之間的垂直的間隙是由他們的margin 值所決定的。在一個BFC中，兩個相鄰的塊級盒子的垂直外邊距會產生折疊
在BFC中，每一個盒子的左外邊緣（margin-left）會觸碰到容器的左邊緣(border-left)（對于從右到左的格式來說，則觸碰到右邊緣） - 理解：首先BFC是一個名詞，是一個獨立的布局環境，我們可以理解為一個箱子（實際上是看不見摸不著的），箱子里面物品的擺放是不受外界的影響的。轉換為BFC的理解則是：BFC中的元素的布局是不受外界的影響（我們往往利用這個特性來消除浮動元素對其非浮動的兄弟元素和其子元素帶來的影響。）并且在一個BFC中，塊盒與行盒（行盒由一行中所有的內聯元素所組成）都會垂直的沿著其父元素的邊框排列
- 運用：
- 撐開父容器的高度
- 清除浮動
- 取消margin相遇時的折疊
讀代碼
.clearfix:after{ /*在容器的最后添加一個after偽類*/
content: ''; /*偽類的內容為空*/
display: block; /*作為塊級元素顯示*/
clear: both;/*清除浮動*/
}
.clearfix{
*zoom: 1;/*在IE6,7中實現以上效果*/
}
- 整體作用是實現父容器的高度被內部的浮動元素撐開，并在IE6,7中實現兼容
- 和BFC的不同：bfc是創建一個獨立空間，浮動元素包含在這個bfc之中，而添加偽類的方法中，實際上浮動元素并沒有包含在父元素中，但是包含了底部的空白偽類，因為我們為偽類添加了兩側不能有浮動元素的屬性，所以偽類被迫出現在了浮動元素的下方。
html中添加多個空格
- 使用特定字符替換空格
 ； - 空格外層套上pre標簽，常用于文字中包含代碼
<p>
<pre>
<code>
1.ddd
2.fff
</code>
</pre>
</p>
本教程版權歸饑人谷和作者所有，轉載須說明來源。
