1、浮動元素有什么特征？對父容器、其他浮動元素、普通元素、文字分別有什么影響?
浮動的元素會脫離文檔流，向左或者向右移動至包含塊內(nèi)邊緣或者同樣浮動的元素外邊緣。
- 對父容器:如果父容器內(nèi)的元素均設置了浮動，那么他們脫離普通流無法撐起父容器的高度，導致父元素的塌陷。
- 對其它浮動元素：同一父容器內(nèi)的浮動元素按照設定的方向并排排列，當父元素的寬度不夠時，后面的元素會向下移動，直到有足夠的空間；如果浮動元素的高度不同，那么有可能擋住移動的路徑。
- 對普通元素：無法辨別普通元素，有可能導致覆蓋其它普通元素，不會占據(jù)其位置。
- 對文字：文字能夠識別浮動元素，會圍繞浮動元素。
2、清除浮動指什么? 如何清除浮動? 兩種以上方法
清除浮動指的清除浮動元素對當前元素的影響；
- 在文檔中添加一個元素，給他設置一個樣式，clear:both;這種方法會在文檔的最后產(chǎn)生一個無意義標簽。
- 使用:after 偽元素 消除浮動
.clearfix:after {
content: "";
display: block;
clear: both;
}
- 將父容器變成BFC
3、有幾種定位方式，分別是如何實現(xiàn)定位的，參考點是什么，使用場景是什么？
| 屬性 | 描述 |
|---|---|
| absolute | 絕對定位 根據(jù)不為默種定位方式認定位的第一個父元素進行定位 |
| static | 默認值 沒有定位，元素出現(xiàn)在正常的流中 |
| fixed | 生成絕對定位的元素，相對于瀏覽器窗口進行定位 |
| relative | 相對定位。相對于元素本身正常位置進行定位，通過top、bottom、left、right屬性來設置偏移量。使用場 景為絕對定位設定參照物或?qū)υ刈陨砦恢眠M行局部調(diào)整。 |
| inherit | 從父元素繼承定位屬性 |
| sticky | 對象在常態(tài)時遵循普通流。它就像是relative和fixed的合體，當在屏幕中時按常規(guī)流排版，當卷動到屏幕外 時則表現(xiàn)如fixed |
css的定位方式基本有四種：普通流，相對定位，絕對定位，固定定位
- 普通流是默認定位方式，在普通流中元素框的位置由元素在html中的位置決定，元素position屬性為static或繼承來的static時就會按照普通流定位，這也是我們最常見的方式。
- 相對定位比較簡單，對應position屬性的relative值，如果對一個元素進行相對定位，它將出現(xiàn)在他所在的位置上，然后可以通過設置垂直或水平位置，讓這個元素相對于它自己移動，在使用相對定位時，無論元素是否移動，元素在文檔流中占據(jù)原來空間，只是表現(xiàn)出來的位置會改變。
- 絕對定位的元素的位置是相對于距離最近的非static祖先元素位置決定的。如果元素沒有已定位的祖先元素，那么他的位置就相對于初始包含塊html來定位。因為絕對定位與文檔流無關(guān)，所以絕對定位的元素可以覆蓋頁面上的其他元素，可以通過z-index屬性控制疊放順序，z-index越高，元素位置越靠上。也可以理解為層級。
- 固定定位是屬于絕對定位中的一種。一般使用場景，例如：導航欄，右側(cè)工具欄，底部回到頂部按鈕等。它的定位是相對于瀏覽器的視窗口（viewport）來定的，而其他的絕對定位則是相對于文檔（html）定位的。
注：絕對定位，固定定位會脫離文檔流
4、z-index 有什么作用? 如何使用?
z-index 屬性指定一個元素的堆疊順序，在相同定位中，擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。
z-index有三個屬性：
- auto 默認。堆疊順序與父元素相等。
- number設置元素的堆疊順序。
- inherit規(guī)定應該從父元素繼承 z-index 屬性的值。
5、position:relative和負margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別
position:relative和負margin都可以使元素位置發(fā)生偏移，二者的區(qū)別表現(xiàn)在：
- margin會使元素在文檔流中的位置發(fā)生偏移，它會放棄偏移之前占據(jù)的空間，緊挨其后的元素會填充這部分空間。
- 相對定位后元素位置發(fā)生偏移，它仍會堅守原來占據(jù)的空間，不會讓文檔流的其他元素流入。
6、BFC 是什么？如何生成 BFC？BFC 有什么作用？舉例說明
BFC(Block formatting context)直譯為"塊級格式化上下文",使元素形成獨立的與其他塊隔離的容器，確保內(nèi)部元素的屬性不會影響到外部其它元素。
生成BFC的元素屬性如下：
- float 除了none以外的值
- overflow 除了visible 以外的值（hidden，auto，scroll ）
- display (table-cell，table-caption，inline-block, flex, inline-flex)
- position值為（absolute，fixed）
- fieldset元素
BFC的作用：
-
清除內(nèi)部浮動
Paste_Image.png
2.防止垂直 margin 重疊
Paste_Image.png
7、在什么場景下會出現(xiàn)外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個父子外邊距合并的范例
當兩個垂直外邊距（margin）相遇時，將形成一個外邊距合并，合并后的高度以這兩個外邊距中高度值較大值為準。
外邊距合并：
-
相鄰的同胞元素
Paste_Image.png
把相鄰元素設置成BFC可以不讓相鄰元素外邊距合并
-
父元素與子元素（在父元素沒有邊框，padding等的情況下，子元素與父元素的垂直外邊距會發(fā)生合并）
Paste_Image.png
阻止父子外邊距合并如下：
- 將父元素生成一個新的BFC,
- 給父元素加上一個邊框或者padding等.
- 當元素外邊距為負值時，元素會往該反向移動多少距離（例如上部外邊距為10px,就會往上移動10px），當2個元素的外邊距之和小于0時，外邊距為負值的元素會覆蓋其他元素，對其他元素產(chǎn)生影響；當2個元素的外邊距之和為正數(shù)時，即為這2個元素之間的外邊距。
Paste_Image.png
