文檔流的概念指什么？有哪種方式可以讓元素脫離文檔流?
將窗體自上而下分成一行行，并在每行中按從左至右的順序排放元素嗤瞎，即為文檔流墙歪。也就是文檔中可顯示對(duì)象在排列中所占用的位置，比如塊級(jí)元素默認(rèn)占據(jù)一行贝奇。
浮動(dòng)float以及定位中的絕對(duì)定位position:absolute和固定定位position:fixed都可以讓元素脫離文檔流虹菲。
有幾種定位方式，分別是如何實(shí)現(xiàn)定位的掉瞳，使用場(chǎng)景如何毕源？
-
position:static：默認(rèn)屬性，沒(méi)有設(shè)置定位的都是該定位陕习，元素不會(huì)有特殊偏移位置霎褐。 -
position:relative：相對(duì)定位，相對(duì)于自己原來(lái)的位置進(jìn)行定位该镣，元素不會(huì)脫離文檔流冻璃。
相對(duì)定位.png -
position:absolute：絕對(duì)定位，相對(duì)于父容器上擁有定位的元素位置定位损合，如果父級(jí)沒(méi)有定位則逐級(jí)向上查找省艳，元素脫離文檔流。
絕對(duì)定位.png -
position:fixed：固定定位塌忽，相對(duì)于瀏覽器窗口進(jìn)行定位拍埠。
固定定位.png
absolute, relative, fixed 偏移的參考點(diǎn)分別是什么
position:relative：相對(duì)于自己原來(lái)的位置進(jìn)行定位，元素不會(huì)脫離文檔流土居。
position:fixed：固定定位枣购，相對(duì)于瀏覽器窗口進(jìn)行定位。
position:absolute：絕對(duì)定位擦耀，相對(duì)于父容器上擁有定位的元素位置定位棉圈，如果父級(jí)沒(méi)有定位則逐級(jí)向上查找，元素脫離文檔流眷蜓。
z-index 有什么作用? 如何使用?
z-index設(shè)置元素的堆疊屬性分瘾，擁有更高堆疊順序的元素總是會(huì)處在上面，該屬性設(shè)置一個(gè)定位元素沿 z 軸的位置吁系，z 軸定義為垂直延伸到顯示區(qū)的軸德召。如果為正數(shù)，則離用戶更近汽纤，為負(fù)數(shù)則表示離用戶更遠(yuǎn)上岗。只有在對(duì)元素進(jìn)行了定位之后才可以設(shè)置元素的z-index屬性。
position:relative和負(fù)margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別
負(fù)margin就是把邊距屬性設(shè)置為負(fù)數(shù)蕴坪，設(shè)置margin-bottom margin-right時(shí)元素本身不會(huì)發(fā)生位置偏移肴掷，設(shè)置margin-left margin-top時(shí)才會(huì)讓元素發(fā)生位置偏移敬锐，但不管兩種設(shè)置都會(huì)影響后面的元素。
position:relative會(huì)讓元素發(fā)生位置偏移呆瞻，但是因?yàn)楸旧聿](méi)有脫離文檔流台夺，所以不會(huì)對(duì)后面的元素有影響。
如何讓一個(gè)固定寬高的元素在頁(yè)面上垂直水平居中?
利用position:absolute痴脾，要設(shè)定居中的容器設(shè)置為絕對(duì)定位颤介，然后調(diào)整top和left為50%，再設(shè)置margin為本身寬高的負(fù)一半明郭。
浮動(dòng)元素有什么特征买窟？對(duì)其他浮動(dòng)元素、普通元素薯定、文字分別有什么影響?
浮動(dòng)框不在普通文檔流中始绍，所以文檔中的塊框就表現(xiàn)得像浮動(dòng)框不存在一樣。浮動(dòng)框可以左右移動(dòng)话侄，直到碰到邊緣或者下一個(gè)浮動(dòng)框亏推。
1.框一像右浮動(dòng)碰到邊緣：
2.框一左浮動(dòng)，框一因?yàn)槊撾x文檔流年堆，所以框二向上移動(dòng)吞杭，框一蓋住框二：
3.依次浮動(dòng)：
4.在沒(méi)有足夠的水平空間時(shí)，元素會(huì)像下移動(dòng)至空間足夠：
浮動(dòng)會(huì)讓文字環(huán)繞浮動(dòng)元素布局：
清除浮動(dòng)指什么? 如何清除浮動(dòng)?
浮動(dòng)帶來(lái)各種遍歷变丧，而其脫離文檔流的特性也會(huì)帶來(lái)各種問(wèn)題芽狗，例如元素環(huán)繞等，清除浮動(dòng)就是來(lái)解決這些問(wèn)題痒蓬，清除浮動(dòng)是針對(duì)元素本身童擎，只對(duì)自己有效，不能影響別的元素攻晒。
浮動(dòng)引起的問(wèn)題：
清楚浮動(dòng)之后：
清楚浮動(dòng)的值：
clear:none：默認(rèn)值顾复，允許兩邊都有浮動(dòng)clear:left：不允許左邊有浮動(dòng)clear:right：不允許右邊有浮動(dòng)clear:both：兩邊都不允許有浮動(dòng)
代碼
一.寫出如下兩欄布局, 其中中間區(qū)塊寬度900px, 居中,左側(cè)邊欄寬度200px, 右側(cè)邊欄寬度700px
ps: 圖片左浮動(dòng)，導(dǎo)航欄整體右浮動(dòng)鲁捏，導(dǎo)航欄里面的li元素左浮動(dòng)芯砸。
ps: aside左浮動(dòng)，main左浮動(dòng)
凡是有浮動(dòng)的地方给梅，其直接父元素必須清除浮動(dòng)
github
在線預(yù)覽
二.不適用背景圖片實(shí)現(xiàn)如下效果
github
在線預(yù)覽
本文版權(quán)歸本人和饑人谷所有假丧，轉(zhuǎn)載請(qǐng)注明來(lái)源。
