文檔流的概念指什么？有哪種方式可以讓元素脫離文檔流?
將窗體自上而下分成一行行，并在每行中按從左至右的順序排放元素，即為文檔流。也就是文檔中可顯示對象在排列中所占用的位置，比如塊級元素默認(rèn)占據(jù)一行。
浮動float以及定位中的絕對定位position:absolute和固定定位position:fixed都可以讓元素脫離文檔流。
有幾種定位方式，分別是如何實現(xiàn)定位的，使用場景如何？
-
position:static：默認(rèn)屬性，沒有設(shè)置定位的都是該定位，元素不會有特殊偏移位置。 -
position:relative：相對定位，相對于自己原來的位置進(jìn)行定位，元素不會脫離文檔流。
相對定位.png -
position:absolute：絕對定位，相對于父容器上擁有定位的元素位置定位，如果父級沒有定位則逐級向上查找，元素脫離文檔流。
絕對定位.png -
position:fixed：固定定位，相對于瀏覽器窗口進(jìn)行定位。
固定定位.png
absolute, relative, fixed 偏移的參考點分別是什么
position:relative：相對于自己原來的位置進(jìn)行定位，元素不會脫離文檔流。
position:fixed：固定定位，相對于瀏覽器窗口進(jìn)行定位。
position:absolute：絕對定位，相對于父容器上擁有定位的元素位置定位，如果父級沒有定位則逐級向上查找，元素脫離文檔流。
z-index 有什么作用? 如何使用?
z-index設(shè)置元素的堆疊屬性，擁有更高堆疊順序的元素總是會處在上面，該屬性設(shè)置一個定位元素沿 z 軸的位置，z 軸定義為垂直延伸到顯示區(qū)的軸。如果為正數(shù)，則離用戶更近，為負(fù)數(shù)則表示離用戶更遠(yuǎn)。只有在對元素進(jìn)行了定位之后才可以設(shè)置元素的z-index屬性。
position:relative和負(fù)margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別
負(fù)margin就是把邊距屬性設(shè)置為負(fù)數(shù)，設(shè)置margin-bottom margin-right時元素本身不會發(fā)生位置偏移，設(shè)置margin-left margin-top時才會讓元素發(fā)生位置偏移，但不管兩種設(shè)置都會影響后面的元素。
position:relative會讓元素發(fā)生位置偏移，但是因為本身并沒有脫離文檔流，所以不會對后面的元素有影響。
如何讓一個固定寬高的元素在頁面上垂直水平居中?
利用position:absolute，要設(shè)定居中的容器設(shè)置為絕對定位，然后調(diào)整top和left為50%，再設(shè)置margin為本身寬高的負(fù)一半。
浮動元素有什么特征？對其他浮動元素、普通元素、文字分別有什么影響?
浮動框不在普通文檔流中，所以文檔中的塊框就表現(xiàn)得像浮動框不存在一樣。浮動框可以左右移動，直到碰到邊緣或者下一個浮動框。
1.框一像右浮動碰到邊緣：
2.框一左浮動，框一因為脫離文檔流，所以框二向上移動，框一蓋住框二：
3.依次浮動：
4.在沒有足夠的水平空間時，元素會像下移動至空間足夠：
浮動會讓文字環(huán)繞浮動元素布局：
清除浮動指什么? 如何清除浮動?
浮動帶來各種遍歷，而其脫離文檔流的特性也會帶來各種問題，例如元素環(huán)繞等，清除浮動就是來解決這些問題，清除浮動是針對元素本身，只對自己有效，不能影響別的元素。
浮動引起的問題：
清楚浮動之后：
清楚浮動的值：
clear:none：默認(rèn)值，允許兩邊都有浮動clear:left：不允許左邊有浮動clear:right：不允許右邊有浮動clear:both：兩邊都不允許有浮動
代碼
一.寫出如下兩欄布局, 其中中間區(qū)塊寬度900px, 居中,左側(cè)邊欄寬度200px, 右側(cè)邊欄寬度700px
ps: 圖片左浮動，導(dǎo)航欄整體右浮動，導(dǎo)航欄里面的li元素左浮動。
ps: aside左浮動，main左浮動
凡是有浮動的地方，其直接父元素必須清除浮動
github
在線預(yù)覽
二.不適用背景圖片實現(xiàn)如下效果
github
在線預(yù)覽
本文版權(quán)歸本人和饑人谷所有，轉(zhuǎn)載請注明來源。
