1.在什么場景下會出現(xiàn)外邊距合并琢歇？如何合并兰怠？如何不讓相鄰元素外邊距合并梦鉴？給個父子外邊距合并的范例。
- 當(dāng)block元素按照正常文檔流從上至下排列時揭保，位于上方的block元素的下外邊距會與其相鄰下方的元素的上外邊距產(chǎn)生合并肥橙，如例中的.div1,.div2,.div3元素〗章拢或者block中的子元素亦為block元素且父元素?zé)o邊框時存筏，會出現(xiàn)子元素的上外邊距與父元素的上外邊距合并，如例中的.child元素味榛。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style type="text/css">
body {
background-color: #bbb;
}
body>div {
background-color:#fff;
width: 100px;
height: 50px;
margin:20px;
}
.child {
background-color: #f00;
width: 50px;
height: 25px;
margin: 10px;
}
</style>
</head>
<body>
<div class="div1">A</div>
<div class="div2">B</div>
<div class="div3">
<div class="child">1</div>
C
</div>
</body>
</html>```
如上圖所示椭坚，A和B上下兩個block元素的外邊距產(chǎn)生合并，保留較大的外邊距尺寸搏色。C的子元素1與C的外邊距產(chǎn)生合并善茎，同樣保留較大的那個外邊距尺寸。
- 將各元素凡在不同的BFC中频轿，便可解決邊距合并的問題巾表。
- 舉例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style type="text/css">
body {
border:1px solid;
}
body>div {
width:200px;
height:100px;
margin:30px;
background-color:#aaa;
}
.child {
width:100px;
height:50px;
background-color:#f00;
margin:20px;
}
</style>
</head>
<body>
<div class="div1">
</div>
<div class="div2">
<div class="child"></div>
</div>
</body>
</html>```
效果如圖：
###2.去除inline-block內(nèi)縫隙有哪幾種常見方法？
- 某些情況下可以用浮動代替inline-block略吨；
- 給父元素添加樣式``` font-size:0;```；
- 為除第一個之外的inline-block元素添加右負邊距考阱；
- 將inline-block的html文件之間的空格（換行）刪除翠忠。
###3.父容器使用overflow: auto| hidden撐開高度的原理是什么？
在父容器上建立bfc乞榨，使其不受外界浮動元素的影響秽之。
###4.BFC是什么？如何形成BFC吃既，有什么作用考榨？
- BFC的全稱是塊級格式上下文，即將其子元素與其他元素分隔開鹦倚，使子元素的浮動等格式不對其他元素產(chǎn)生影響或避免其它元素對其子元素產(chǎn)生影響河质。
- 若需使一個以ct為類名的和元素形成BFC，可通過如下幾種方式
1. ```.ct { display: inline-block; }```
- ```.ct { overflow: auto; }```
- ```.ct { overflow: hidden; }```
- ``` .ct:after { content: '' ; display: block ; clear: both ; }```
其主要作用是將因子元素浮動而產(chǎn)生塌陷的父元素撐開震叙。
###5.浮動導(dǎo)致的父容器高度塌陷指什么掀鹅？為什么會產(chǎn)生？有幾種解決方法
- 由于子元素的浮動從而脫離了正常文檔流媒楼，子元素所占空間的高度為0乐尊，所以會導(dǎo)致父元素的高度因子元素而變?yōu)?.
- 解決方法
1. 給父元素添加```.ct { display: inline-block; }```、```.ct { overflow: auto; }```或```.ct { overflow: hidden; }```樣式划址，使父容器形成BFC空間扔嵌。
- 在父元素內(nèi)所有子元素最后添加一個空的塊級元素限府，并為其天機算``` clear : both ```屬性，也可通過在CSS中添加偽元素達到同樣的效果痢缎。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>task11</title>
<style type="text/css">
body>div {
border: 2px solid #f00;
margin:10px;
}
.child {
float:left;
width:100px;
height:60px;
border: 1px solid;
background-color:rgba(200,200,200,.5);
}
.ct1 {
display: inline-block;
}
.ct2 {
overflow: auto;
}
.ct3 {
overflow: hidden;
}
.ct4:after {
content:'';
display:block;
clear:both;
}
</style>
</head>
<body>
<div class="ct1">
<div class="child">1</div>
</div>
<div class="ct2">
<div class="child">2</div>
</div>
<div class="ct3">
<div class="child">3</div>
</div>
<div class="ct4">
<div class="child">4</div>
</div>
<div class="ct5">
<div class="child">5</div>
</div>
</body>
</html>```
6.以下代碼每一行的作用是什么胁勺？ 為什么會產(chǎn)生作用？ 和BFC撐開空間有什么區(qū)別牺弄？
.clearfix:after{ /在.clear元素的最后添加一個偽元素/
content: ''; /該子元素的內(nèi)容為空/
display: block; /將該元素設(shè)定為塊級元素/
clear: both; /清除左右浮動/
}
.clearfix{
zoom: 1; /兼容早期IE的hasLayout姻几，清除浮動*/
}```
上述方法相當(dāng)于在父元素內(nèi)添加一個子元素，且將該子元素清除左右浮動势告，達到撐開父元素的目的蛇捌。
BFC方法是使父元素能夠包含浮動的子元素，而上述方法只是在父元素中添加了一個子元素用于清除浮動咱台。
此教程版權(quán)歸本人及饑人谷所有络拌，轉(zhuǎn)載需注明來源。
