問答
1. 浮動元素有什么特征？對父容器、其他浮動元素、普通元素、文字分別有什么影響?
- 浮動元素有什么特征
float 屬性可以使一個元素脫離正常的文檔流，然后被安放到它所在容器的的左端或者右端，并且其他的文本和行內(nèi)元素環(huán)繞它。 - 對父容器的影響
如果父容器內(nèi)的元素均為浮動元素，且父容器未設(shè)置height值，會出現(xiàn)父容器高度塌陷 - 對其他浮動元素的影響
同為float： left 或者 float： right的元素，會按照定義的先后順序進(jìn)行排列，一行內(nèi)放不下時會另起一行繼續(xù)排列；
如果給某個浮動元素設(shè)置了clear：left屬性，則該元素左側(cè)不允許有浮動元素，如果已經(jīng)有浮動元素在該元素左側(cè)，則該元素會換行，甚至可能出現(xiàn)被卡住的情況，clear：right及clear：both屬性類似 - 對普通元素的影響；
普通元素會因?yàn)楦兄坏礁釉氐拇嬖诙紦?jù)浮動元素的位置，可能導(dǎo)致被覆蓋； - 對文字的影響
普通元素感知不到浮動元素的存在，但普通元素內(nèi)的文字會感知到浮動元素的存在從而避開浮動元素進(jìn)行顯示，會出現(xiàn)文字環(huán)繞的現(xiàn)象。
2. 清除浮動指什么? 如何清除浮動? 兩種以上方法
- 清除浮動指什么
如果父容器內(nèi)的元素均為浮動元素，且父容器未設(shè)置height值，會出現(xiàn)父容器高度塌陷，清理浮動其實(shí)指的時清除掉父容器高度塌陷的問題 - 如何清楚浮動
1 在父容器內(nèi)添加空的標(biāo)簽，并對該空標(biāo)簽樣式設(shè)置為clear：both，使該空標(biāo)簽左右均沒有浮動元素，從而使該標(biāo)簽位置下移，以達(dá)到撐開父容器高度的目的
2 利用父容器的偽類選擇器給該父容器添加一個空的內(nèi)容，達(dá)到撐開父容器高度的目的，代碼如下：
.父容器:after{
content:"";
display:block;
clear:both;
}
3 使父元素形成新的BFC以達(dá)到清楚浮動
3. 有幾種定位方式，分別是如何實(shí)現(xiàn)定位的，參考點(diǎn)是什么，使用場景是什么？
- inherit：從父元素繼承；
- static：默認(rèn)值，沒有定位，元素出現(xiàn)在正常的文檔流中。參考點(diǎn)是文檔流中的位置。
- relative：相對定位。相對于元素本身正常位置進(jìn)行定位，通過top、bottom、left、right屬性來設(shè)置偏移量。使用場景：為絕對定位設(shè)定參照物或?qū)υ刈陨砦恢眠M(jìn)行局部調(diào)整。
- absolute：絕對定位。相對于static定位意外的第一個祖先元素進(jìn)行定位，若都沒有發(fā)現(xiàn)則以html標(biāo)簽為參考進(jìn)行定位。使用場景：當(dāng)想讓元素參照特定參照物進(jìn)行定位時使用。
- fixed：固定定位。生成絕對定位元素，相對于viewport進(jìn)行定位。
- sticky：對象在常態(tài)時遵循普通流。它就像是relative和fixed的合體，當(dāng)在屏幕中時按常規(guī)流排版，當(dāng)卷動到屏幕外時則表現(xiàn)如fixed。
4. z-index 有什么作用? 如何使用
z-index 屬性指定了一個元素及其子元素的 z-order。 當(dāng)元素之間重疊的時候，z-order 決定哪一個元素覆蓋在其余元素的上方顯示。 通常來說 z-index 較大的元素會覆蓋較小的一個。
對于一個已經(jīng)定位的元素（即position屬性值是非static的元素），z-index 屬性指定：
- 元素在當(dāng)前堆疊上下文中的堆疊層級。
- 元素是否創(chuàng)建一個新的本地堆疊上下文。
語法：
/* Keyword value */
z-index: auto;
/* <integer> values */
z-index: 0;
z-index: 3;
z-index: 289;
z-index: -1;/* 使用負(fù)值降低優(yōu)先級 */
/* Global values */
z-index: inherit;
z-index: initial;
z-index: unset;
- auto
元素不會建立一個新的本地堆疊上下文。當(dāng)前堆疊上下文中新生成的元素和父元素堆疊層級相同。 - <integer>
整型數(shù)字是生成的元素在當(dāng)前堆疊上下文中的堆疊層級。元素同時會創(chuàng)建一個堆疊層級為0的本地堆疊上下文。這意味著子元素的 z-indexes 不與元素外的其余元素的 z-indexes 進(jìn)行對比。
5.position:relative和負(fù)margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別
- position:relative使元素位置發(fā)生偏移時，只是改變了該元素的顯示位置，并未改變該元素在文檔流中本來的位置，會與其他元素產(chǎn)生視覺上的重疊現(xiàn)象；
- 負(fù)margin改變元素位置時同時改變該元素在文檔流中的位置；
6. BFC 是什么？如何生成 BFC？BFC 有什么作用？舉例說明
6.1 BFC 是什么
block formatting context，塊級格式化上下文
6.2 如何生成 BFC
塊格式化上下文由以下之一創(chuàng)建：
- 根元素或其它包含它的元素
- 浮動 (元素的float不是 none)
- 絕對定位的元素 (元素具有position為 absolute 或 fixed)
- 內(nèi)聯(lián)塊 inline-blocks (元素具有 display： inline-block)
- 表格單元格 (元素具有 display: table-cell，HTML表格單元格默認(rèn)屬性
) - 表格標(biāo)題 (元素具有 display: table-caption, HTML表格標(biāo)題默認(rèn)屬性)
- 塊元素具有overflow且值不是 visible
6.3 BFC 有什么作用
- BFC會阻止垂直外邊距（margin-top、margin-bottom）折疊
按照BFC的定義，只有同屬于一個BFC時，兩個元素才有可能發(fā)生垂直Margin的重疊，這個包括相鄰元素，嵌套元素，只要他們之間沒有阻擋(例如邊框，非空內(nèi)容，padding等)就會發(fā)生margin重疊。
因此要解決margin重疊問題，只要讓它們不在同一個BFC就行了，但是對于兩個相鄰元素來說，意義不大，沒有必要給它們加個外殼，但是對于嵌套元素來說就很有必要了，只要把父元素設(shè)為BFC就可以了。這樣子元素的margin就不會和父元素的margin發(fā)生重疊
例子：
父子元素上下margin合并
父子元素上下margin未合并
- BFC不會重疊浮動元素
例子：
浮動元素重疊.png
浮動元素未重疊.png
- BFC可以包含浮動
例子：
父容器高度塌陷.png
高度被撐開.png
7. 在什么場景下會出現(xiàn)外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個父子外邊距合并的范例
7.1 在什么場景下會出現(xiàn)外邊距合并
- 兄弟元素同處于一個BFC時，會出現(xiàn)上下margin合并的現(xiàn)象
- 當(dāng)父子元素中的父元素沒有border或padding時，且父元素不是BFC時，父子元素的上下margin會出現(xiàn)合并
7.2 如何合并
合并后的margin值取值為所合并的兩者中的大者
7.3 如何不讓相鄰元素外邊距合并？
可以把相鄰元素處于不同的BFC中從而阻止邊距合并
例子.png
7.4 給個父子外邊距合并的范例
請見6.3的第一個例子
