1、在什么場景下會出現(xiàn)外邊距合并站削？如何合并坊萝？如何不讓相鄰元素外邊距合并？給個父子外邊距合并的范例
- 當(dāng)一個元素出現(xiàn)在另一個元素上面時，第一個元素的下外邊距與第二個元素的上外邊距會發(fā)生合并十偶。
- 合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者菩鲜。
父子外邊距合并范例
父子之間會產(chǎn)生邊距合并，通過父元素增加border或padding值大于0惦积，來解決邊距合并問題接校。
浮動元素之間不產(chǎn)生外邊距
inline-block 可以解決合并問題
2、去除inline-block內(nèi)縫隙有哪幾種常見方法?
縫隙演示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>inline-block縫隙</title>
<style>
html,body,ul,li{
margin:0;
padding:0;
}
.box {
border:1px solid green;
}
.box > li{
list-style:none;
display:inline-block;
background:blue;
font-size:16px;
color:white;
}
</style>
</head>
<body>
<ul class="box">
<li>tag1</li>
<li>tag2</li>
<li>tag3</li>
</ul>
</body>
</html>
- 以刪除html中多余的空格來去除縫隙
- 或者用負(fù)外邊距實現(xiàn)去除效果狮崩，注意第一個元素會溢出元素框蛛勉，需要單獨設(shè)置
- 可以用浮動屬性來去除縫隙，不過要記得用BFC將父元素?fù)伍_
- 在父元素寫上font-size：0睦柴；消除空格占位符的大小以去除縫隙
3、父容器使用overflow: auto| hidden撐開高度的原理是什么？
overflow會產(chǎn)生BFC砖茸，創(chuàng)造獨立布局環(huán)境希坚，使元素不受浮動元素的影響。
所以針對撐開父元素的情況恬试，是由于父元素創(chuàng)建了BFC窝趣，使父元素形成獨立環(huán)境，從而浮動元素被包含在內(nèi)训柴，自然撐開哑舒。
4、BFC是什么幻馁？如何形成BFC洗鸵，有什么作用?
浮動元素和絕對定位元素，非塊級盒子的塊級容器（例如 inline-blocks, table-cells, 和 table-captions）仗嗦，以及overflow值不為“visiable”的塊級盒子膘滨，都會為他們的內(nèi)容創(chuàng)建新的BFC（塊級格式上下文）。
在BFC中稀拐，盒子從頂端開始垂直地一個接一個地排列火邓，兩個盒子之間的垂直的間隙是由他們的margin 值所決定的。在一個BFC中德撬，兩個相鄰的塊級盒子的垂直外邊距會產(chǎn)生折疊铲咨。
首先BFC是一個名詞，是一個獨立的布局環(huán)境蜓洪，我們可以理解為一個箱子（實際上是看不見摸不著的）纤勒，箱子里面物品的擺放是不受外界的影響的。轉(zhuǎn)換為BFC的理解則是：BFC中的元素的布局是不受外界的影響（我們往往利用這個特性來消除浮動元素對其非浮動的兄弟元素和其子元素帶來的影響隆檀。）形成BFC
用float屬性（none值除外）摇天；
用絕對定位absolute粹湃；
overflow（visible值除外）；
display屬性為table-cell, table-caption, inline-block, flex, 或者inline-flex
- 作用
- 撐開父元素
- 阻止外邊距合并
- 清除浮動的文字環(huán)繞影響或位置影響
- BFC用法靈活泉坐，可以很方便的解決很多布局問題为鳄，但是情況很多，需要具體問題具體分析腕让。
5济赎、浮動導(dǎo)致的父容器高度塌陷指什么？為什么會產(chǎn)生记某？有幾種解決方法
高度塌陷是指司训，在父元素的height為0時，對其內(nèi)部元素應(yīng)用浮動屬性液南，浮動屬性使元素脫離文檔流壳猜，而父元素沒有元素可以支撐，從而高度塌陷滑凉，變?yōu)?统扳。
- 解決方法
- 利用空元素清除浮動
- 在CSS中創(chuàng)建空元素
- 使用BFC，使父元素按照BFC渲染畅姊，包含住浮動元素
6咒钟、以下代碼每一行的作用是什么？ 為什么會產(chǎn)生作用若未？ 和BFC撐開空間有什么區(qū)別朱嘴？
.clearfix:after{
content: '';
display: block;
clear: both;
}
.clearfix{
*zoom: 1;
}
作用
可以將父元素高度撐開，避免子元素浮動之后粗合，父元素高度塌陷萍嬉。
zoom這個屬性是IE專有屬性，其他瀏覽器沒有隙疚，它可以設(shè)置或檢索對象的縮放比壤追，它還有其他一些小作用，比如觸發(fā)ie的hasLayout屬性供屉，清除浮動行冰、清除margin的重疊等。現(xiàn)在已經(jīng)基本不用這個屬性伶丐，所以僅在考慮兼容的清除浮動會用到悼做。
** 本教程版權(quán)歸作者和饑人谷所有，轉(zhuǎn)載須說明來源撵割！ **
