問答題
1. 在什么場景下會出現(xiàn)外邊距合并？如何合并念赶？如何不讓相鄰元素外邊距合并绸贡？給個父子外邊距合并的范例
外邊距出現(xiàn)場景包括：
-
父子元素的外邊距合并的問題及解決方案
當父元素不設置border而子元素設置margin時际插，父子元素的外邊距會產生合并。
如綠色方塊不設置border且設置margin:10px,粉色方塊設置margin:10px,產生父子外邊距合并绝编。
解決方案是在父元素中添加border或padding
設置padding情況下
設置border情況下
-
兄弟元素的外邊距合并的問題及解決方案
當相鄰的兄弟元素在同一個父容器下均設置margin時，會產生外邊距合并貌踏，并且margin值為二者的較大值十饥。
如2個粉色方塊分別設置的margin為10px和20px，但2個粉色方塊交接出的margin為20px而不是30px哩俭，從而產生外邊距合并绷跑。
解決方案是在使用float/display:inline-block/為相鄰的子元素生產BFC
float情形
.child-3,.child-4{
float:left;
}
<div class="box">
<div class="child child-3"></div>
<div class="child child-4"></div>
</div>
}
inline-block情形
.child-3,.child-4{
display:inline-block;
/*使用display時要注意child-3的margin-top會發(fā)生不規(guī)則偏移 */
}
<div class="box">
<div class="child child-3"></div>
<div class="child child-4"></div>
</div>
生成BFC
.ctn-3,ctn-4{
overflow:hidden;
/* 為child-3和child-4分別添加盒子，并將盒子進行BFC凡资； */
}
<div class="box">
<div class="ctn-3">
<div class="child child-3"></div>
</div>
<div class="ctn-4">
<div class="child child-4"></div>
</div>
</div>
2.去除inline-block內縫隙有哪幾種常見方法?
去除inline-block的間隙包括：
inline-block默認下的間隙
- 將display為inline-block的元素放置在一行砸捏，此方法不適用與包含較多內容的元素
<ul class="box">
<li>html</li><li>css</li><li>javascript</li>
- 使用浮動
利用float清除間隙
li{
font-size:30px;
display:inline-block;
background:lightblue;
float:left;
}
- 使用負邊距
利用負邊距清除間隙
li{
font-size:30px;
display:inline-block;
background:lightblue;
margin-left:-4px;
}
li:first-child{
margin:0;
}
3.父容器使用overflow: auto| hidden撐開高度的原理是什么谬运？
父容器在使用overflow: auto| hidden后使其產生BFC，從而為float開辟出一個獨立的空間垦藏，撐開父容器的高度梆暖。
4.BFC是什么？如何形成BFC掂骏，有什么作用?
BFC是什么
- BFC本質上就是是一個元素為其內部新生成的獨立空間轰驳，內部的內容全被格式化成塊級容器(注意是塊級容器，不是塊級元素)
- 既然內部的內容全部為塊級容器弟灼，自然按照塊級容器的排版方式——可設置寬高并且從左到右排列
- 由于相鄰的子元素同處一個空間级解，margin會產生合并
- 最后，即使是浮動元素在父容器建立的BFC內部也得老老實實地按照塊級容器排版田绑，不能搞特殊
如何形成BFC
根據(jù)w3c的定義：
浮動元素勤哗、絕對定位元素、非塊級元素的塊級容器（如inline-block,table-cells,and table-captions）和overflow值不為visible的塊級元素掩驱，這些元素都會為它們的內容建立BFC芒划。
因此，建立BFC的方式有：
- 為元素添加float非none的屬性值
- 為元素添加postion:absolute
- 為元素添加display:inline-block | table-cells | table-caption
- 為元素添加overflow:auto | hidden
BFC的作用
- 清除浮動
- 清除外邊距合并
......
5.浮動導致的父容器高度塌陷指什么欧穴？為什么會產生民逼？有幾種解決方法
- 父容器的高度若為自適應，子元素浮動后會產生父元素的高度塌陷
解釋：浮動元素脫離文檔流導致其內容消失在父容器中涮帘，由于父容器高度為自適應拼苍，即其高度全靠子元素內容撐開，子元素消失而父容器高度自然塌陷
方塊1和2未添加浮動
浮動導致的高度塌陷
- 父容器的高度塌陷的解決方案：
兩種思路焚辅，一種是父容器形成BFC而為內容開辟獨立空間映屋，另一種是使用清除浮動屬性- 父容器形成BFC
父容器形成BFC效果
[syntax]
- 父容器形成BFC
.box{
width:300px;
border:5px solid pink;
/* float:left; */
/* position:absolute; */
/* display:inline-block; */
/* display:table-cell; */
/* display:table-caption; */
overflow:hidden;
/* overflow:auto; */
}
- 利用清除浮動屬性
這里思想是在父容器中添加偽元素：after或：before（視具體情況而定），添加的元素（最好是沒有內容的元素同蜻，這里為了讓讀者徹底看到其中的原理棚点，所以content:"a"而在實際寫碼時使用content:""這個沒有內容的元素）將在父容器內部的最后或最前，再使用clear:both就可以達到撐開父容器高度的效果
[syntax]
.box:after{
content:"a";
display:block;
clear:both;
}
6.以下代碼每一行的作用是什么湾蔓？ 為什么會產生作用瘫析？ 和BFC撐開空間有什么區(qū)別？
.clearfix:after{
content: '';
display: block;
clear: both;
}
.clearfix{
*zoom: 1;
}
- 該段代碼起到清除浮動的作用默责，與通過父容器建立BFC的原理不同贬循，它使用clear屬性去清除浮動
- 第一段代碼的解釋是：給父容器定義class=“clearfix”，通過偽元素.clear:after在父容器內部的最后添加的一個內容為空的塊級元素桃序，再通過這一塊級元素清除浮動的屬性最終達到撐開父容器高度的效果
- 第二段代碼的解釋是：zoom屬性是IE瀏覽器的專有屬性杖虾，它本來是用來設置或檢索對象的縮放比例，但原有屬性很少被使用媒熊，最常使用的是利用zoom來兼容IE瀏覽器以清除浮動或外邊距合并奇适、以及觸發(fā)IE瀏覽器的haslayout
- _zoom是csshack中專門對IE6起作用坟比，*zoom則是針對IE6/7
- 本代碼中
*zoom:1是說明清除IE6/7瀏覽器中元素的浮動
