問(wèn)答
1.在什么場(chǎng)景下會(huì)出現(xiàn)外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個(gè)父子外邊距合并的范例
什么是外邊距合并？
在CSS當(dāng)中，相鄰的兩個(gè)盒子（可能是兄弟關(guān)系也可能是祖先關(guān)系）的外邊距可以結(jié)合成一個(gè)單獨(dú)的外邊距。這種合并外邊距的方式被稱為折疊，并且因而所結(jié)合成的外邊距稱為折疊外邊距。
1.什么情況會(huì)產(chǎn)生合并？
- 必須是處于常規(guī)文檔流（非float和絕對(duì)定位）的塊級(jí)盒子（塊級(jí)盒子的display屬性必須是以下三種之一：'block'， 'list-item'， 和 'table'）,并且處于同一個(gè)BFC當(dāng)中。
- 沒(méi)有線盒，沒(méi)有空隙（沒(méi)有使用clear屬性制造空隙），沒(méi)有padding和border將他們分隔開(kāi)
- 都屬于垂直方向上相鄰的外邊距
2.如何合并？
兩個(gè)相鄰的外邊距都是正數(shù)時(shí)，折疊結(jié)果是它們兩者之間較大的值。
兩個(gè)相鄰的外邊距都是負(fù)數(shù)時(shí)，折疊結(jié)果是兩者絕對(duì)值的較大值。
兩個(gè)外邊距一正一負(fù)時(shí)，折疊結(jié)果是兩者的相加的和
3.如何不讓相鄰元素外邊距合并？
-
元素使用浮動(dòng)和絕對(duì)定位 脫離文檔流，導(dǎo)致與普通元素的margin不在一個(gè)層面上，構(gòu)不成合并
下圖所示 所有div的大小都為100*100，紅色為普通元素margin:20px;、綠色為浮動(dòng)元素margin為30px；現(xiàn)在兩個(gè)元素的舉例為50px；
Paste_Image.png -
父元素設(shè)置border屬性 設(shè)置線盒
Paste_Image.png -
inline-block元素與其兄弟元素、子元素和父元素的外邊距都不會(huì)折疊（包括其父元素和子元素）
inline-block屬性之間不會(huì)合并
Paste_Image.png
inline-block和普通元素間不會(huì)合并
父子之間
父子之間如果合并會(huì)頂?shù)筋^
-
普通元素和使用clear屬性的元素之間
雖然普通元素和使用clear屬性的元素雖然同處在文檔流中，但是并沒(méi)有發(fā)生邊框合并
Paste_Image.png
2.去除inline-block內(nèi)縫隙有哪幾種常見(jiàn)方法?
我們?cè)谑褂胕nline-block將li標(biāo)簽設(shè)置橫向的時(shí)候會(huì)遇到如下情況，標(biāo)簽之間有縫隙
具體的解決辦法如下
1.li標(biāo)簽上不換行
<ul class="nav">
<li>1</li><li>2</li><li>3</li>
</ul>
<ul class="nav">
<li>1</li
><li>2</li
><li>3</li>
</ul>
2.使用負(fù)margin（第一個(gè)li標(biāo)簽除外）
.nav li:nth-child(1){
margin-left: 0;
}
.nav li{
display: inline-block;
background: blue;
list-style: none;
margin-left: -8px;
}
3.在父容器上設(shè)置font-size:0; li標(biāo)簽上再設(shè)置回來(lái)
.nav{
background: #ccc;
font-size: 0;
}
.nav li{
display: inline-block;
background: blue;
list-style: none;
font-size: 16px;
}
效果如下
3.父容器使用overflow: auto| hidden撐開(kāi)高度的原理是什么？
在父容器中使用overflow: auto| hidden式父容器形成BFC，在BFC內(nèi) 父容器高度計(jì)算 包括float元素都會(huì)算在內(nèi)
.container{
border: 1px solid;
overflow: auto; /*設(shè)置 overflow: auto| hidden 父容器形成BFC*/
width: 600px;
}
.item{
height: 200px;
width: 200px;
background: red;
float: right;
}
4.BFC是什么？如何形成BFC，有什么作用?
1.BFC是什么？
BFC 的全稱是Block Formating Contents 塊級(jí)格式上下文
w3c規(guī)范中的BFC定義：
浮動(dòng)元素和絕對(duì)定位元素，非塊級(jí)盒子的塊級(jí)容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不為“visiable”的塊級(jí)盒子，都會(huì)為他們的內(nèi)容創(chuàng)建新的BFC（塊級(jí)格式上下文）。
BFC的通俗理解：
首先BFC是一個(gè)名詞，是一個(gè)獨(dú)立的布局環(huán)境，我們可以理解為一個(gè)箱子（實(shí)際上是看不見(jiàn)摸不著的），箱子里面物品的擺放是不受外界的影響的。轉(zhuǎn)換為BFC的理解則是：BFC中的元素的布局是不受外界的影響（我們往往利用這個(gè)特性來(lái)消除浮動(dòng)元素對(duì)其非浮動(dòng)的兄弟元素和其子元素帶來(lái)的影響。）并且在一個(gè)BFC中，塊盒與行盒（行盒由一行中所有的內(nèi)聯(lián)元素所組成）都會(huì)垂直的沿著其父元素的邊框排列。
如何形成BFC？
- 在元素上定義float：left right
- 設(shè)置絕對(duì)定位 position: absolute
- 對(duì)于塊級(jí)元素（塊級(jí)盒子的display屬性必須是以下三種之一：'block'， 'list-item'， 和 'table'）使用overflow值為非visiable（常見(jiàn)用法是：auto| hidden ）
- 對(duì)于非塊級(jí)元素添加 display屬性為：inline-blocks, table-cells, 和 table-captions
-
BFC的作用？
1.撐開(kāi)浮動(dòng)元素的父元素 （如題目3）
2.解除文字環(huán)繞效果
我們先將文字放入p標(biāo)簽中
在沒(méi)有形成BFC前，文字是環(huán)繞在浮動(dòng)元素旁邊的
Paste_Image.png
在 p標(biāo)簽上加上 overflow: auto 使p標(biāo)簽自己形成BFC
.container P{
overflow: auto;
}
5.浮動(dòng)導(dǎo)致的父容器高度塌陷指什么？為什么會(huì)產(chǎn)生？有幾種解決方法
由于浮動(dòng)元素脫離文檔流，導(dǎo)致父容器的在計(jì)算高度時(shí) 為零，
有兩種解決辦法
1.在父容器中形成BFC
2.在父容器中添加偽類
.clear:after{
content: ""; /*內(nèi)容為空*/
display: block; /*將文本 變?yōu)閎lock*/
height: 0; /*不占用高度 ，用戶看不見(jiàn)*/
clear: both; /*清除元素左右的浮動(dòng)*/
}
6.以下代碼每一行的作用是什么？ 為什么會(huì)產(chǎn)生作用？ 和BFC撐開(kāi)空間有什么區(qū)別？
.clearfix:after{ /*使用偽元素、在元素后面加入新內(nèi)容*/
content: ""; /*內(nèi)容為空*/
display: block; /*將文本 變?yōu)閎lock*/
height: 0; /*不占用高度 ，用戶看不見(jiàn)*/
clear: both; /*清除元素左右的浮動(dòng)*/
}
.clearfix{ *zoom: 1;} /*使用星號(hào) 兼容IE6、IE7*/
本博客版權(quán)歸博主和饑人谷所有，轉(zhuǎn)載請(qǐng)說(shuō)明來(lái)源
