問答

1. 文檔流的概念指什么？有哪種方式可以讓元素脫離文檔流?

答：

• 文檔流就是元素本身在HTML頁面渲染中的位置，自上而下的結構
• float:value,position:absolute,display:none可以使元素脫離文檔流

2. 有幾種定位方式，分別是如何實現定位的，使用場景如何？

答：

• position:absolute 絕對定位，相對于最近的非static定位的祖先元素而定位，用于某些需要改變位置的元素
• position:relative 相對定位，相對于自身的位置而定位，用于一些排版
• position:fixed 固定定位，相對于瀏覽器窗口定位，用于導航、廣告、側邊欄等

3. absolute, relative, fixed 偏移的參考點分別是什么

答：

• position:absolute 相對于最近的非static定位的祖先元素而定位
• position:relative 相對于自身的位置進行偏移
• position: fixed 相對于瀏覽器窗口進行偏移
• demo

4. z-index 有什么作用? 如何使用?

答：

• 因為絕對定位與文檔流無關，所以相同層級的盒模型會造成覆蓋現象從而沒有實現想要的效果，這時候可以在有定位的元素上使用z-index屬性控制元素的Z軸來調整元素的層級，達到想要的效果。
• demo

5. position:relative和負margin都可以使元素位置發生偏移?二者有什么區別

答：

• position:relative根據自身做定位處理，并且沒有脫離文檔流，所以設置偏移后文檔流的位置并沒有變
• 設置負margin的方法會讓其他元素的位置進行改變
• demo

6. 如何讓一個固定寬高的元素在頁面上垂直水平居中?

答：

• 設置position:absolute，top:50%，left:50%，margin-left: - 1/2的盒子寬度，margin-top: - 1/2的盒子高度 進行定位，形成頁面上垂直水平居中。
• demo

7. 浮動元素有什么特征？對其他浮動元素、普通元素、文字分別有什么影響?

答：

• 浮動元素依據float:right or left屬性設置，依據父元素的邊緣限制，形成左右浮動，并且脫離文檔流。
• 對于其他浮動的元素，會根據float:right or left依照方向依次排列
• 對于沒有設置浮動的元素，由于設置浮動的元素會脫離文檔流，所以在下方的元素會占據原來浮動元素的位置
• 對于文字，會形成文本環繞的效果
• demo

8. 清除浮動指什么? 如何清除浮動?

答：

• 清除浮動是指解決浮動所帶來的頁面布局的影響，比如：
  1. 父元素的高度無法被撐開，影響與父元素同級的元素
  2. 與浮動元素同級的非浮動元素會跟隨其后
  3. 若非第一個元素浮動，則該元素之前的元素也需要浮動，否則會影響頁面顯示的結構
• 父元素添加overflow:auto屬性解決父元素高度塌陷的問題
• 通過給不要浮動的元素添加clear:both可以解決2,3的問題
• 最好看的寫法是給父元素添加一個"::after"偽元素標簽，相當于在父元素里添了了最后一個子元素，它的目的是為了解決1,2,3的問題

 .父元素:after{
    content:'';
    display:block;
    clear:both;
    height:0;
    visibility:hidden;
} 

• demo