問答
1. 在什么場景下會出現(xiàn)外邊距合并烹看？如何合并？如何不讓相鄰元素外邊距合并酱吝？給個父子外邊距合并的范例
- 外邊距合并指的是垂直方向上的外邊距合并土思，產(chǎn)生的條件如下：
- 必須是處于文檔流中的塊級盒子并處于同一個BFC中。
- 外邊距必須是緊鄰著的己儒，即兩個外邊距之間不能有如Line box、clearance冲甘、padding途样、border等存在。
- 如何合并
合并的效果為兩個margin合并成只存在一個margin何暇，且取margin值更大者。 - 如何不讓相鄰?fù)膺吘嗪喜?br>
只要破壞外邊距合并產(chǎn)生的條件即可条辟。常用的有：
- overflow設(shè)置成非visiable生成BFC宏胯，并且讓兩個元素處于不同的BFC中。
- 根據(jù)需要設(shè)置定位或者浮動使其中之一脫離文檔流肩袍。
- 設(shè)置border使外邊距不緊鄰。
2. 去除inline-block內(nèi)縫隙有哪幾種常見方法?
去除inline-block內(nèi)縫隙的常見方法：
- 讓行內(nèi)塊元素的標(biāo)簽緊挨著颜屠，中間不要有空格鹰祸、換行。
- 使用浮動粗井。
- 使用負(fù)邊距街图。
3. 父容器使用overflow: auto| hidden撐開高度的原理是什么？
原理是父容器觸發(fā)了BFC餐济，在其內(nèi)開辟了一個獨立空間，不再受子元素的浮動影響醉冤，自然有高度了篙悯。
4. BFC是什么？如何形成BFC鸽照，有什么作用?
- BFC(Block Formatting Context)——塊級格式化上下文，指的是在其內(nèi)開辟了一個獨立空間定血，使內(nèi)部的元素不受外部影響漏峰。
- 觸發(fā)形成BFC的方法如下：
- 浮動或者絕對、固定定位觸發(fā)BFC浅乔。
- overflow屬性值非visiable。
- display成非塊級盒子席噩。
- 作用
- 清除浮動
- 消除外邊距合并
5. 浮動導(dǎo)致的父容器高度塌陷指什么贤壁？為什么會產(chǎn)生刁标？有幾種解決方法
- 浮動導(dǎo)致的父容器高度塌陷指浮動元素脫離文檔流红碑，自然沒有了高度绰上。
- 解決方法有兩種：
- 用clear:both(left或right)清除浮動造成的影響（使用調(diào)用一個偽元素的方法最佳），涉及的方法有task10中有提到蜈块，這里不做贅述。
- 通過觸發(fā)BFC來消除浮動帶來的影響爽哎。父容器使用overflow:hidden最佳器一，其它方法請看task10。
6. 以下代碼每一行的作用是什么盹舞？ 為什么會產(chǎn)生作用？ 和BFC撐開空間有什么區(qū)別癣亚？
.clearfix:after{
content: '';
display: block;
clear: both;
}
.clearfix{
*zoom: 1;
}
- 作用
用于清除浮動元素對父元素的影響获印。 - 原理
.clearfix:after聲明在父元素內(nèi)最后面創(chuàng)建一個子元素的偽元素，內(nèi)容為空玻孟、塊級元素鳍征、清除所有子元素的浮動；
.clearfix聲明兼容IE6艳丛。 - 與BFC區(qū)別
之前已經(jīng)多次提及清除浮動的方法主要有兩種性質(zhì):一種是用clear清除浮動，一種是觸發(fā)BFC清除浮動碰酝。本題代碼為前者戴差，BFC撐開空間為后者。
代碼
參考
本文章著作權(quán)歸饑人谷_九霄和饑人谷所有，轉(zhuǎn)載須說明來源
