1.在什么場(chǎng)景下會(huì)出現(xiàn)外邊距合并麸锉？如何合并？如何不讓相鄰元素外邊距合并俱萍？給個(gè)父子外邊距合并的范例宰缤？
-
1.當(dāng)兩個(gè)垂直元素外邊距相遇時(shí)就會(huì)出現(xiàn)外邊距合并;合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。一正一負(fù)呈队，取和;都為負(fù)數(shù)搞莺，則取負(fù)數(shù)絕對(duì)值的最大值。
-
父元素與子元素的外邊距合并掂咒，如下圖:
父元素的上外邊距為20px,子元素的上外邊距為40px,最后綠色區(qū)域距上外邊距是40px;
-
兄弟元素的外邊距合并,如下圖:
如上圖藍(lán)色區(qū)域的上下外邊距是40px,黃色區(qū)域的上外邊距是40px,最后這兩塊間的距離合并為40px才沧。
-
元素自身的外邊距合并，如下圖:
3塊是空元素绍刮，它有外邊距温圆，但是沒有邊框或填充,所以它跟上下兩個(gè)兄弟元素外邊距合并了。
-
-
2.如何合并:
- 兩個(gè)相鄰的外邊距都是正數(shù)時(shí)孩革，合并取它們兩者之間較大的值岁歉。
- 兩個(gè)相鄰的外邊距都是負(fù)數(shù)時(shí)，合并取兩者絕對(duì)值的較大值膝蜈。
- 兩個(gè)外邊距一正一負(fù)時(shí)锅移，合并取兩者相加的和。
-
3.如何不讓相鄰元素外邊距合并?
不合并可以使用inline-block饱搏，float非剃，overflow形成BFC，相鄰就不合并了,如下所示:-
使用浮動(dòng)推沸，如下圖所示:
浮動(dòng)元素不與任何元素產(chǎn)生外邊距合并.
-
使用display:inline-block,如下圖所示:
-
使用overflow:hidden,如下圖所示:
給子元素加了父元素div之后备绽，利用overflow:hidden，外邊距不合并鬓催，可見父元素創(chuàng)建BFC與子元素的外邊距不發(fā)生合并肺素，同時(shí)兩個(gè)父元素內(nèi)的子元素也不發(fā)生合并。
-
使用絕對(duì)定位的元素宇驾，不與任何元素發(fā)生外邊距合并,如下圖所示:
-
綜上所述:兩個(gè)元素外邊距會(huì)不會(huì)合并主要看它們外邊距之間有沒有分界線存在倍靡。要想讓兩個(gè)元素的外邊距不合并，就要讓它們之間有道分界線课舍，這個(gè)分界線可以是border塌西，padding或者是BFC形成的獨(dú)立空間他挎。
2.去除inline-block內(nèi)縫隙有哪幾種常見方法?
-
如下圖所示:
去除的方法有四種:
- 1.去除標(biāo)簽之間的空格（即不換行or拆開標(biāo)簽）
- 2.使用負(fù)margin
- 3.使用float
- 4.父容器設(shè)置font-size=0
如下圖所示:
3.父容器使用overflow: auto| hidden撐開高度的原理是什么？
- 父容器使用overflow: auto| hidden時(shí)可以創(chuàng)建BFC修復(fù)高度坍塌雨让，清除浮動(dòng)雇盖。例如子容器設(shè)置高度大于父容器時(shí)，父容器會(huì)自動(dòng)撐開栖忠。此時(shí)overflow:hidden會(huì)清除子容器浮動(dòng)崔挖，子容器超出高度部分會(huì)自動(dòng)隱藏;
4.BFC是什么？如何形成BFC庵寞，有什么作用?
BFC的概念：浮動(dòng)元素和絕對(duì)定位元素狸相，非塊級(jí)盒子的塊級(jí)容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不為“visiable”的塊級(jí)盒子捐川，都會(huì)為他們的內(nèi)容創(chuàng)建新的BFC（塊級(jí)格式上下文）脓鹃。
在BFC中，盒子從頂端開始垂直地一個(gè)接一個(gè)地排列古沥，兩個(gè)盒子之間的垂直的間隙是由他們的margin 值所決定的瘸右。在一個(gè)BFC中，兩個(gè)相鄰的塊級(jí)盒子的垂直外邊距會(huì)產(chǎn)生折疊岩齿。
首先BFC是一個(gè)名詞太颤，是一個(gè)獨(dú)立的布局環(huán)境，我們可以理解為一個(gè)箱子（實(shí)際上是看不見摸不著的）盹沈，箱子里面物品的擺放是不受外界的影響的龄章。轉(zhuǎn)換為BFC的理解則是：BFC中的元素的布局是不受外界的影響（我們往往利用這個(gè)特性來消除浮動(dòng)元素對(duì)其非浮動(dòng)的兄弟元素和其子元素帶來的影響。）-
如何形成BFC乞封？
- 用float屬性（none值除外）做裙；
- 用絕對(duì)定位absolute；
- overflow（visible值除外）肃晚；
- display屬性為table-cell, table-caption, inline-block, flex, 或者inline-flex;
-
作用:
- ①清除浮動(dòng)
- ②防止外邊距合并
- ③用于布局锚贱，比如兩欄布局
- ④清除文字環(huán)繞
5.浮動(dòng)導(dǎo)致的父容器高度塌陷指什么？為什么會(huì)產(chǎn)生陷揪？有幾種解決方法惋鸥？
- 如下圖所示:
浮動(dòng)導(dǎo)致的父容器高度塌陷指當(dāng)父元素不設(shè)置高度的時(shí)候，子元素設(shè)置浮動(dòng)之后悍缠，它脫離當(dāng)前文檔流，所以它無法撐開其父元素耐量，造成父元素高度塌陷飞蚓。
-
有兩種解決辦法:
-
1.給父元素添加display: inline-block; overflow: auto; 或 overflow: hidden;樣式，使父容器形成BFC空間廊蜒。
圖1:
圖3: -
-
2.利用:after偽類元素?fù)伍_趴拧。
6.以下代碼每一行的作用是什么溅漾？ 為什么會(huì)產(chǎn)生作用？ 和BFC撐開空間有什么區(qū)別著榴？
- 這段代碼總的作用就是利用after偽類來創(chuàng)建一個(gè)虛擬空塊元素添履，再利用clear屬性清除浮動(dòng)。
- 區(qū)別: 這個(gè)方法是使用內(nèi)容將父容器撐開,而BFC是形成一個(gè)內(nèi)部的獨(dú)立小空間來包容浮動(dòng)元素脑又，不受外部元素影響暮胧。
