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

將窗體自上而下分成一行行，并在每行中按從左至右的順序排放元素，即為文檔流。也就是文檔中可顯示對象在排列中所占用的位置，比如塊級元素默認占據一行。
浮動float以及定位中的絕對定位position:absolute和固定定位position:fixed都可以讓元素脫離文檔流。

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

1. position:static：默認屬性，沒有設置定位的都是該定位，元素不會有特殊偏移位置。
2. position:relative：相對定位，相對于自己原來的位置進行定位，元素不會脫離文檔流。
   
   相對定位.png
3. position:absolute：絕對定位，相對于父容器上擁有定位的元素位置定位，如果父級沒有定位則逐級向上查找，元素脫離文檔流。
   
   絕對定位.png
4. position:fixed：固定定位，相對于瀏覽器窗口進行定位。
   
   固定定位.png

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

position:relative：相對于自己原來的位置進行定位，元素不會脫離文檔流。
position:fixed：固定定位，相對于瀏覽器窗口進行定位。
position:absolute：絕對定位，相對于父容器上擁有定位的元素位置定位，如果父級沒有定位則逐級向上查找，元素脫離文檔流。

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

z-index設置元素的堆疊屬性，擁有更高堆疊順序的元素總是會處在上面，該屬性設置一個定位元素沿 z 軸的位置，z 軸定義為垂直延伸到顯示區的軸。如果為正數，則離用戶更近，為負數則表示離用戶更遠。只有在對元素進行了定位之后才可以設置元素的z-index屬性。

z-index屬性.png

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

負margin就是把邊距屬性設置為負數，設置margin-bottom margin-right時元素本身不會發生位置偏移，設置margin-left margin-top時才會讓元素發生位置偏移，但不管兩種設置都會影響后面的元素。
position:relative會讓元素發生位置偏移，但是因為本身并沒有脫離文檔流，所以不會對后面的元素有影響。

margin和relative.png

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

利用position:absolute，要設定居中的容器設置為絕對定位，然后調整top和left為50%，再設置margin為本身寬高的負一半。

滿屏父元素的居中.png

固定高度父元素的居中.png

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

浮動框不在普通文檔流中，所以文檔中的塊框就表現得像浮動框不存在一樣。浮動框可以左右移動，直到碰到邊緣或者下一個浮動框。
1.框一像右浮動碰到邊緣：

右浮動.png

2.框一左浮動，框一因為脫離文檔流，所以框二向上移動，框一蓋住框二：

左浮動.png

3.依次浮動：

依次浮動.png

4.在沒有足夠的水平空間時，元素會像下移動至空間足夠：

沒有足夠水平空間.png

高度不同時被卡住.png

浮動會讓文字環繞浮動元素布局：

文字環繞.png

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

浮動帶來各種遍歷，而其脫離文檔流的特性也會帶來各種問題，例如元素環繞等，清除浮動就是來解決這些問題，清除浮動是針對元素本身，只對自己有效，不能影響別的元素。
浮動引起的問題：

float引起的問題.png

clear清除浮動.png

浮動和定位參考

代碼

一.寫出如下兩欄布局, 其中中間區塊寬度900px, 居中,左側邊欄寬度200px, 右側邊欄寬度700px
ps: 圖片左浮動，導航欄整體右浮動，導航欄里面的li元素左浮動。
ps: aside左浮動，main左浮動
凡是有浮動的地方，其直接父元素必須清除浮動

0_1462790808720_upload-f2f4502f-a0e1-4328-8077-4701058384ca

0_1462963669833_upload-4feae399-e99f-4209-add5-1fcc2c98deea

本文版權歸本人和饑人谷所有，轉載請注明來源。