在什么場(chǎng)景下會(huì)出現(xiàn)外邊距合并诉植？如何合并？如何不讓相鄰元素外邊距合并昵观？給個(gè)父子外邊距合并的范例
在CSS當(dāng)中晾腔，相鄰的兩個(gè)盒子（可能是兄弟關(guān)系也可能是父子關(guān)系）的外邊距可以結(jié)合成一個(gè)單獨(dú)的外邊距。這種合并外邊距的方式被稱為折疊啊犬，并且因而所結(jié)合成的外邊距稱為折疊外邊距灼擂。
折疊的結(jié)果：
兩個(gè)相鄰的外邊距都是正數(shù)時(shí)，折疊結(jié)果是它們兩者之間較大的值觉至。
代碼
兩個(gè)相鄰的外邊距都是負(fù)數(shù)時(shí)剔应，折疊結(jié)果是兩者絕對(duì)值的較大值。
代碼
兩個(gè)外邊距一正一負(fù)時(shí)，折疊結(jié)果是兩者的相加的和峻贮。
代碼
產(chǎn)生折疊的必備條件：margin必須是鄰接的!
而根據(jù)w3c規(guī)范席怪，兩個(gè)margin是鄰接的必須滿足以下條件：
- 必須是處于常規(guī)文檔流（非float和絕對(duì)定位）的塊級(jí)盒子,并且處于同一個(gè)BFC當(dāng)中。
- 沒有線盒纤控，沒有空隙（clearance挂捻，下面會(huì)講到），沒有padding和border將他們分隔開
- 都屬于垂直方向上相鄰的外邊距船万，可以是下面任意一種情況
- 元素的margin-top與其第一個(gè)常規(guī)文檔流的子元素的margin-top(父子合并)
height為auto的元素的margin-bottom與其最后一個(gè)常規(guī)文檔流的子元素的margin-bottom
元素的margin-bottom與其下一個(gè)常規(guī)文檔流的兄弟元素的margin-top(兄弟合并)
高度為0并且最小高度也為0刻撒，不包含常規(guī)文檔流的子元素，并且自身沒有建立新的BFC的元素的margin-top和margin-bottom（自身合并）
例1：代碼
例1-1：代碼
例2：代碼
例3：代碼
以上的條件意味著下列的規(guī)則：即不讓元素邊距合并的辦法
- 創(chuàng)建了新的BFC的元素（例如浮動(dòng)元素或者'overflow'值為'visible'以外的元素）與它的子元素的外邊距不會(huì)折疊
- 浮動(dòng)元素不與任何元素的外邊距產(chǎn)生折疊（包括其父元素和子元素）
- 絕對(duì)定位元素不與任何元素的外邊距產(chǎn)生折疊
- inline-block元素不與任何元素的外邊距產(chǎn)生折疊
- 兄弟合并疫赎。一個(gè)常規(guī)文檔流元素的margin-bottom與它下一個(gè)常規(guī)文檔流的兄弟元素的margin-top會(huì)產(chǎn)生折疊，除非它們之間存在間隙（clearance）碎节。
-
父子合并捧搞。一個(gè)常規(guī)文檔流元素的margin-top 與其第一個(gè)常規(guī)文檔流的子元素的margin-top產(chǎn)生折疊，條件為父元素不包含 padding 和 border 狮荔，子元素不包含 clearance胎撇。
兄弟合并 - 父子合并。一個(gè) 'height' 為 'auto' 并且 'min-height' 為 '0'的常規(guī)文檔流元素的 margin-bottom 會(huì)與其最后一個(gè)常規(guī)文檔流子元素的 margin-bottom 折疊殖氏，條件為父元素不包含 padding 和 border 晚树，子元素的 margin-bottom 不與包含 clearance 的 margin-top 折疊。
- 一個(gè)不包含border-top雅采、border-bottom爵憎、padding-top、padding-bottom的常規(guī)文檔流元素婚瓜，并且其 'height' 為 0 或 'auto'宝鼓， 'min-height' 為 '0'，其里面也不包含行盒(line box)巴刻，其自身的 margin-top 和 margin-bottom 會(huì)折疊愚铡。
例1:代碼
對(duì)box2使用未生效
對(duì)box2父元素box3使用生效
例1-1：代碼
例1-2：代碼
例1-3:代碼
例3：代碼
padding不為0
例3-1：代碼
例3-1-2：代碼
將height改為min-height則可以發(fā)生外邊距合并，但記住min-height不要設(shè)置太大胡陪，大于auto會(huì)導(dǎo)致多出一部分高度.
例4：代碼
不包含border-top沥寥、border-bottom、padding-top柠座、padding-bottom的常規(guī)文檔流元素邑雅，并且其 'height' 為 0 或 'auto'， 'min-height' 為 '0'愚隧，其里面也不包含行盒(line box)其中只要一點(diǎn)不滿足蒂阱，就不會(huì)發(fā)生折疊锻全。
關(guān)于clearance
當(dāng)浮動(dòng)元素之后的元素設(shè)置clear以閉合相關(guān)方向的浮動(dòng)時(shí)，根據(jù)w3c規(guī)范規(guī)定录煤，閉合浮動(dòng)的元素會(huì)在其margin-top以上產(chǎn)生一定的空隙（clearance鳄厌，如下圖），該空隙會(huì)阻止元素margin-top的折疊妈踊，并作為間距存在于元素的margin-top的上方了嚎。
代碼
上面的圖中我們可以看到，我們?yōu)榧t色塊盒設(shè)置的40px的margin-top（這里我們通過(guò)相同高度的陰影來(lái)將其可視化）好像并沒有對(duì)紫色塊盒起作用廊营，而且無(wú)論我們?cè)趺葱薷倪@個(gè)margin-top值都不會(huì)影響紅色塊盒的位置歪泳，而只由綠色塊盒的margin-bottom所決定。
也就是說(shuō)露筒，我們只需要知道呐伞，閉合浮動(dòng)的元素的border-top會(huì)緊貼著相應(yīng)的浮動(dòng)元素的margin-bottom。
閉合浮動(dòng)的塊盒在margin-top上所產(chǎn)生的間距（clearance）的值與該塊盒的margin-top之和應(yīng)該足夠讓該塊盒垂直的跨越浮動(dòng)元素的margin-bottom慎式，使閉合浮動(dòng)的塊盒的border-top恰好與浮動(dòng)元素的塊盒的margin-bottom相鄰接伶氢。
用上圖例子中的相關(guān)值可以得出這樣一個(gè)式子：r-margin-top + r-clearance = g-margin-top + g-height + g-margin-bottom
如果r-margin-top大于g-margin-top + g-height + g-margin-bottom時(shí)，r-clearance則失去作用瘪吏，閉合浮動(dòng)的塊盒會(huì)移動(dòng)
PS癣防！閉合浮動(dòng)并不能使浮動(dòng)元素回到原來(lái)的BFC當(dāng)中！
去除inline-block內(nèi)縫隙有哪幾種常見方法?
縫隙存在的本質(zhì)原因是因?yàn)閾Q行空格造成的原因
-
寫在同一行
另外一種寫法掌眠，不寫在同一行
-
利用負(fù)margin,注意第一個(gè)元素不需要負(fù)margin
-
使用浮動(dòng)
-
利用父元素font-size
父容器使用overflow: auto| hidden撐開高度的原理是什么蕾盯？
overflow 屬性規(guī)定當(dāng)內(nèi)容溢出元素框時(shí)發(fā)生的事情。
當(dāng)元素設(shè)置浮動(dòng)時(shí)蓝丙，父元素感知不到元素的存在级遭，造成高度塌陷。在父容器使用overflow屬性是形成一個(gè)BFC渺尘，使其內(nèi)部元素不受外界的影響装畅。
BFC是什么？如何形成BFC沧烈，有什么作用?
- 定義：浮動(dòng)元素和絕對(duì)定位元素，非塊級(jí)盒子的塊級(jí)容器（例如 inline-blocks, table-cells, 和 table-captions）像云，以及overflow值不為“visiable”的塊級(jí)盒子锌雀，都會(huì)為他們的內(nèi)容創(chuàng)建新的BFC（塊級(jí)格式上下文）。
- BFC是一個(gè)名詞迅诬，是一個(gè)獨(dú)立的布局環(huán)境腋逆，我們可以理解為一個(gè)箱子（實(shí)際上是看不見摸不著的），箱子里面物品的擺放是不受外界的影響的侈贷。（類似于動(dòng)漫中的結(jié)界）
形成BFC： - float：left|right
- 絕對(duì)定位absolute惩歉，fixed
- overflow（visible值除外）
- display屬性為table-cell, table-caption, inline-block
- 作用：
- 用于消除浮動(dòng)元素對(duì)其非浮動(dòng)的兄弟元素和其子元素帶來(lái)的影響
- 用于阻止外邊距合并
- 頁(yè)面布局
浮動(dòng)導(dǎo)致的父容器高度塌陷指什么？為什么會(huì)產(chǎn)生？有幾種解決方法
當(dāng)元素設(shè)置浮動(dòng)時(shí)撑蚌，父元素感知不到子元素的存在上遥，即丟失了高度，造成高度塌陷争涌。
未使用浮動(dòng)時(shí)
為了讓123并在一塊粉楚，使用浮動(dòng)，結(jié)果導(dǎo)致父元素高度塌陷亮垫。
解決辦法：
- 利用空元素清除浮動(dòng)：
代碼
- 在CSS中創(chuàng)建空元素：
代碼
- 使用BFC
代碼
關(guān)于使用BFC清除浮動(dòng)的副作用
| 方法 | 說(shuō)明 |
|---|---|
| overflow | 副作用最小模软，不過(guò)可能會(huì)不需要overflow的特性 |
| absolute | 收縮元素寬度，不易解決 |
| float | 收縮元素寬度饮潦，影響布局燃异，可借助clear解決 |
| inline-block | 收縮元素寬度，不易解決 |
以下代碼每一行的作用是什么继蜡？ 為什么會(huì)產(chǎn)生作用回俐？ 和BFC撐開空間有什么區(qū)別？
.clearfix:after{
content: '';
display: block;
clear: both;
}
.clearfix{
*zoom: 1;
}
| 代碼 | 說(shuō)明 |
|---|---|
| .clearfix:after | 偽元素選擇器 在claerfix元素之后插入生成的內(nèi)容 |
| content: ''; | 內(nèi)容為空 |
| display: block; | 表現(xiàn)為塊級(jí)元素壹瘟，如果不表現(xiàn)鲫剿，行內(nèi)元素不會(huì)撐開父元素 |
| clear: both; | 清除兩邊浮動(dòng) |
| *zoom: 1; | IE專有屬性，縮放比例稻轨，參數(shù)設(shè)為1的話灵莲，多用于清除浮動(dòng)，偽元素在在IE8以下不支持殴俱，IE8部分支持政冻。 |
本文版權(quán)歸本人及饑人谷所有，轉(zhuǎn)載請(qǐng)注明來(lái)源线欲。
