問答
1. 文檔流的概念指什么糕伐？有哪種方式可以讓元素脫離文檔流?
答：
- 文檔流就是元素本身在HTML頁(yè)面渲染中的位置，自上而下的結(jié)構(gòu)
-
float:value,position:absolute,display:none可以使元素脫離文檔流
2. 有幾種定位方式，分別是如何實(shí)現(xiàn)定位的祭务，使用場(chǎng)景如何？
答：
-
position:absolute絕對(duì)定位，相對(duì)于最近的非static定位的祖先元素而定位文兢，用于某些需要改變位置的元素 -
position:relative相對(duì)定位，相對(duì)于自身的位置而定位焕檬，用于一些排版 -
position:fixed固定定位姆坚，相對(duì)于瀏覽器窗口定位，用于導(dǎo)航实愚、廣告兼呵、側(cè)邊欄等
3. absolute, relative, fixed 偏移的參考點(diǎn)分別是什么
答：
-
position:absolute相對(duì)于最近的非static定位的祖先元素而定位 -
position:relative相對(duì)于自身的位置進(jìn)行偏移 -
position: fixed相對(duì)于瀏覽器窗口進(jìn)行偏移 - demo
4. z-index 有什么作用? 如何使用?
答：
- 因?yàn)榻^對(duì)定位與文檔流無關(guān)，所以相同層級(jí)的盒模型會(huì)造成覆蓋現(xiàn)象從而沒有實(shí)現(xiàn)想要的效果腊敲，這時(shí)候可以在有定位的元素上使用z-index屬性控制元素的Z軸來調(diào)整元素的層級(jí)击喂，達(dá)到想要的效果。
- demo
5. position:relative和負(fù)margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別
答：
-
position:relative根據(jù)自身做定位處理碰辅，并且沒有脫離文檔流懂昂，所以設(shè)置偏移后文檔流的位置并沒有變 - 設(shè)置負(fù)margin的方法會(huì)讓其他元素的位置進(jìn)行改變
- demo
6. 如何讓一個(gè)固定寬高的元素在頁(yè)面上垂直水平居中?
答：
- 設(shè)置
position:absolute，top:50%没宾，left:50%凌彬，margin-left: - 1/2的盒子寬度，margin-top: - 1/2的盒子高度進(jìn)行定位榕吼，形成頁(yè)面上垂直水平居中饿序。 - demo
7. 浮動(dòng)元素有什么特征？對(duì)其他浮動(dòng)元素羹蚣、普通元素原探、文字分別有什么影響?
答：
- 浮動(dòng)元素依據(jù)
float:right or left屬性設(shè)置，依據(jù)父元素的邊緣限制，形成左右浮動(dòng)咽弦，并且脫離文檔流徒蟆。 - 對(duì)于其他浮動(dòng)的元素，會(huì)根據(jù)
float:right or left依照方向依次排列 - 對(duì)于沒有設(shè)置浮動(dòng)的元素型型，由于設(shè)置浮動(dòng)的元素會(huì)脫離文檔流段审，所以在下方的元素會(huì)占據(jù)原來浮動(dòng)元素的位置
- 對(duì)于文字，會(huì)形成文本環(huán)繞的效果
- demo
8. 清除浮動(dòng)指什么? 如何清除浮動(dòng)?
答：
- 清除浮動(dòng)是指解決浮動(dòng)所帶來的頁(yè)面布局的影響闹蒜，比如：
- 父元素的高度無法被撐開寺枉，影響與父元素同級(jí)的元素
- 與浮動(dòng)元素同級(jí)的非浮動(dòng)元素會(huì)跟隨其后
- 若非第一個(gè)元素浮動(dòng)，則該元素之前的元素也需要浮動(dòng)绷落，否則會(huì)影響頁(yè)面顯示的結(jié)構(gòu)
- 父元素添加
overflow:auto屬性解決父元素高度塌陷的問題 - 通過給不要浮動(dòng)的元素添加
clear:both可以解決2,3的問題 - 最好看的寫法是給父元素添加一個(gè)"::after"偽元素標(biāo)簽姥闪，相當(dāng)于在父元素里添了了最后一個(gè)子元素，它的目的是為了解決1,2,3的問題
.父元素:after{
content:'';
display:block;
clear:both;
height:0;
visibility:hidden;
}
