1. 文檔流的概念指什么？有哪種方式可以讓元素脫離文檔流?
文檔流（normal flow）元素由上到下、由左到右依次排版布局。
浮動(dòng)和絕對定位機(jī)制都可使元素脫離文檔流。
2. 有幾種定位方式，分別是如何實(shí)現(xiàn)定位的，使用場景如何？
- 文檔流：元素由上到下、由左到右依次排版布局
- 浮動(dòng)：浮動(dòng)本來是為實(shí)現(xiàn)文字環(huán)繞而誕生的，但是后來開發(fā)者常將它用于頁面的布局
- 定位（position )
分為static、absolute、relative和fixed- absolute是絕對定位，參考點(diǎn)是以已經(jīng)定位的父元素的左上頂點(diǎn)
- relative是相對定位，參考點(diǎn)是以元素所在的原來位置的左上頂點(diǎn)
- fixed，參考點(diǎn)是瀏覽器的頁面視窗的左上頂點(diǎn)
3. absolute, relative, fixed 偏移的參考點(diǎn)分別是什么?
- absolute 是絕對定位，參考點(diǎn)是以已經(jīng)定位的父元素的左上頂點(diǎn)
- relative是相對定位，參考點(diǎn)是以元素所在的原來位置的左上頂點(diǎn)
- fixed，參考點(diǎn)是瀏覽器的頁面視窗的左上頂點(diǎn)
4. z-index 有什么作用? 如何使用?
z-index是設(shè)置元素的堆疊順序，擁有高堆疊順序的元素總是會(huì)處于堆疊順序較低的元素的前面。
- 普通規(guī)則：不對元素設(shè)position(或者設(shè)置為static)時(shí)，文檔流后面的元素覆蓋前面的元素；
- 定位規(guī)則：將元素設(shè)置的position設(shè)置為relative ，absolute 或者 fixed，元素會(huì)覆蓋沒有設(shè)置 position 屬性或者屬性值為 static 的元素;
- 參與規(guī)則： z-index 屬性僅在節(jié)點(diǎn)的 position 屬性為 relative, absolute 或者 fixed 時(shí)生效.
- 從夫規(guī)則：如果所有節(jié)點(diǎn)都定義了 position:relative, A 節(jié)點(diǎn)的 z-index 和 B 節(jié)點(diǎn)一樣大, 但因?yàn)轫樞蛞?guī)則, B 節(jié)點(diǎn)覆蓋在 A 節(jié)點(diǎn)前面. 就算 A 的子節(jié)點(diǎn) z-index 值比 B 的子節(jié)點(diǎn)大, B 的子節(jié)點(diǎn)還是會(huì)覆蓋在 A 的子節(jié)點(diǎn)前面.
Paste_Image.png
很多人將 z-index 設(shè)得很大, 9999 什么的都出來了, 如果不考慮父節(jié)點(diǎn)的影響, 設(shè)得再大也沒用, 那是無法逾越的層級.
5. position:relative和負(fù)margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別？
position:relative和負(fù)margin都可以使元素位置發(fā)生偏移，二者的區(qū)別表現(xiàn)在：
-
負(fù)margin會(huì)使元素在文檔流中的位置發(fā)生偏移，它會(huì)放棄偏移之前占據(jù)的空間，緊挨其后的元素會(huì)填充這部分空間；
Paste_Image.png - 相對定位后元素位置發(fā)生偏移，它仍會(huì)堅(jiān)守原來占據(jù)的空間，不會(huì)讓文檔流的其他元素流入
Paste_Image.png
6. 如何讓一個(gè)固定寬高的元素在頁面上垂直水平居中?
.box {
background:lightgreen;
width:100px;
height:100px;
position:absolute;
top:50%;
left:50%;
margin-left:-50px;
margin-top:-50px;
}
/* 左外邊距和上外邊距分別設(shè)置成寬高的一半 */
7. 浮動(dòng)元素有什么特征？對其他浮動(dòng)元素、普通元素、文字分別有什么影響?
- 浮動(dòng)元素將脫離文檔流，內(nèi)聯(lián)元素支持寬高;
- 無論是塊元素還是內(nèi)聯(lián)元素，沒有寬度時(shí)默認(rèn)內(nèi)容撐開寬度;
- 浮動(dòng)元素對其他元素的影響：
- 對其他浮動(dòng)元素的影響
- 對普通元素的影響，普通元素會(huì)占據(jù)浮動(dòng)元素原來所在的文檔位置
- 對文字而言，除了自身的文字外，其他元素中的文字一律環(huán)繞浮動(dòng)元素周圍；
<body>
<div>這是一段長長的句子這是一段長長的句子這是一段長長的句子這是一段長長的句子這是一段長長的句子這是一段長長的句子這是一段長</div>
<div>some-content.......</div>
</body>
Paste_Image.png
8. 清除浮動(dòng)指什么? 如何清除浮動(dòng)?
- 同級元素的清除浮動(dòng);
浮動(dòng)元素使得同級的非浮動(dòng)元素緊隨其后
解決辦法：可以在非浮動(dòng)元素中添加clear：left|right|both達(dá)到清除浮動(dòng),即不允許浮動(dòng)元素的左側(cè)、右側(cè)或兩側(cè)出現(xiàn)其他非浮動(dòng)元素 -
父級元素的清楚浮動(dòng)；
如果子元素是包裹在自適應(yīng)寬高的父元素中，那么一旦該子元素浮動(dòng)，父元素的高度會(huì)“塌陷”，因?yàn)楦冈氐母叨染褪亲釉氐母叨?，浮?dòng)使得子元素脫離文檔流，讓父元素認(rèn)為子元素“不存在”了
Paste_Image.png
Paste_Image.png
解決辦法：
設(shè)計(jì)思想就是在父元素前或后加入一個(gè)內(nèi)容為空的盒子，并設(shè)置這個(gè)盒子具有clear屬性，從而使得前面的浮動(dòng)元素“無處可逃”
具體代碼如下：
.clearfix {
overflow:hidden; /* 或者clear: both; */
*zoom:1; /* for ie 6*/
}
.clearfix:before, .clearfix:after {
display: table;
content: "";
height: 0;
font-size: 0;
}
