- 浮動元素有什么特征？對父容器、其他浮動元素、普通元素、文字分別有什么影響?
- 浮動元素可以左右移動，浮動元素不在文檔的普通流中，文檔的普通流中的元素表現的就像浮動元素不存在一樣。
- 如果父容器的子元素都是浮動元素，且沒有定義高度，那么父容器會失去高度，在浮動元素之外-引起的父元素高度塌陷。
- 父容器足夠寬，與其他浮動元素同一水平方向依次排列。父容器寬度在同一水平方向上不能同時容納全部浮動元素時，超出父容器寬度的浮動元素向下移動,直到有足夠的空間,如果水平排列三個以上高度不同浮動元素，那么向下移動的時候可能被卡住。
- 浮動元素之后的普通元素因感知不到浮動元素的存在，而占據浮動元素原理的位置，導致被浮動元素覆蓋。
- 如果浮動的元素后面有一個文檔流中元素,那么這個元素的框會表現的像浮動元素不存在,但是框的文本內容會受到浮動元素的影響,會移動以留出空間。
- 清除浮動指什么? 如何清除浮動? 兩種以上方法
- 清除浮動是指清除浮動元素對當前元素的影響，如解決浮動父容器高度塌陷問題。
-
使用clear屬性清除浮動
image.png -
使用clear解決父容器高度塌陷問題
image.png - 使用BFC清除浮動
- 有幾種定位方式，分別是如何實現定位的，參考點是什么，使用場景是什么？
| 定位方式 | 參考點 | 使用場景 |
|---|---|---|
| inherit | 從父元素繼承position屬性的值 | 一般不用 |
| static | 默認值，沒有定位，元素出現在正常的流中 | 默認值 |
| relative | 相對定位，相對于元素在文檔流中占據的原來空間 | 元素自身位置局部調整 |
| absolute | 絕對定位，相對于相對于距離最近的非static祖先元素位置決定的。如果元素沒有已定位的祖先元素，那么他的位置就相對于初始包含塊html來定位 | 元素參照其他元素位置定位 |
| fixed | 固定定位，相對于瀏覽器窗口進行定位 | 固定小icon之類的位置 |
| sticky | 對象在常態時遵循普通流。它就像是relative和fixed的合體，當在屏幕中時按常規流排版，當卷動到屏幕外時則表現如fixed。 | 兼容性差，一般不用 |
- z-index 有什么作用? 如何使用?
z-index屬性設置元素在Z軸方向上的堆疊順序。數值越大，元素越靠上。屬性值沒有單位且可設置負數。 - position:relative和負margin都可以使元素位置發生偏移?二者有什么區別
- position:relative是指相對自己原本位置發生偏移，不影響其它普通流中元素的位置。
- 負margin：除了讓元素自身發生偏移還影響其它普通流中的元素。
- BFC 是什么？如何生成 BFC？BFC 有什么作用？舉例說明
- BFC全拼為Block Format Content 塊級格式化上下文
- float為 left|right
overflow為 hidden|auto|scroll
display為 table-cell|table-caption|inline-block
position為 absolute|fixed - 解決margin重疊問題。所謂margin重疊是指處于同一個BFC的相鄰元素、嵌套元素，只要它們之間沒有阻擋（如：邊框、非空內容、padding等）就會發生margin重疊。這是只要讓其中一個元素生成新的BFC就能解決margin重疊問題。
清除浮動。因為BFC可以包含浮動，所以讓父容器生成新的BFC可以讓父容器在視覺上包圍了浮動的子元素，因而清除了浮動。
- 在什么場景下會出現外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個父子外邊距合并的范例
- 相鄰元素外邊距合并：兩個元素都設置外邊距時，中間的外邊距不會相加，而是選擇外邊距的最大值。利用BFC阻止外邊距合并，使用float或者display:inline-block。
- 嵌套元素的外邊距合并
阻止嵌套元素的外邊距合并形成BFC可以阻止外邊柜合并或者元素上加上border或者padding。 -
父子外邊距合并
image.png
在父元素添加border或者padding解決。
