本教程版權(quán)歸小圓和饑人谷所有，轉(zhuǎn)載須說明來源
問答
1. 文檔流的概念指什么胀溺？有哪種方式可以讓元素脫離文檔流?
- 文檔流：將窗體自上而下分成一行行, 并在每行中按從左至右的順序排放元素
-
脫離文檔流的方法：浮動幢痘、定位（
position: relative除外）唬格、display: none
2. 有幾種定位方式，分別是如何實現(xiàn)定位的颜说，使用場景如何购岗？
| 定位方式 | 實現(xiàn) | 使用場景 |
|---|---|---|
| absolute | 生成絕對定位的元素 相對于static定位以外的第一個父元素進行定位 |
適用于實現(xiàn)水平垂直居中 |
| relative | 生成絕對定位的元素 相對于瀏覽器窗口進行定位 |
一般與絕對定位配合使用 |
| fixed | 生成相對定位的元素 相對于其正常位置進行定位 |
適用于固定頂部導(dǎo)航條，廣告彈窗等 |
3. absolute,relative, fixed偏移的參考點分別是什么
- absolute：相對于static定位以外的第一個父元素
- relative：相對于瀏覽器窗口
- fixed：相對于其正常位置
4. z-index 有什么作用? 如何使用?
- 作用：設(shè)置元素的堆疊順序门粪。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面喊积。
- 使用：該元素設(shè)置一個定位元素沿z軸的位置，z軸定義為垂直延伸到顯示區(qū)的軸玄妈。如果為正數(shù)注服，則離用戶更近，為復(fù)數(shù)則表示離用戶更遠措近。只有在使用了position并脫離了文檔流（absolute溶弟、fixed）的情況下可以使用，其他情況使用z-index不起作用瞭郑。
5.position:relative和負margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別
position: relative會使元素脫離文檔流辜御，并相對于其原來位置發(fā)生偏移，但不會影響其他元素（可能會覆蓋其他元素）屈张；而負margin不僅會使元素本身發(fā)生偏移擒权，還會影響其他元素的位置，因為元素仍存在于正常文檔流阁谆。
6. 如何讓一個固定寬高的元素在頁面上垂直水平居中?
1. 使用絕對定位
設(shè)置top：50%碳抄，left：50%，負margin-top和負margin-left各為元素寬和高的一半
position:absolute
2. 使用margin值
設(shè)置margin:50%,auto;
margin
7. 浮動元素有什么特征场绿？對其他浮動元素剖效、普通元素、文字分別有什么影響?
浮動元素脫離了文檔流，不占用文檔流位置璧尸，其他浮動元素會按照浮動規(guī)則在脫離文檔流中排隊依次顯示贺拣，對普通元素的位置不受影響昵宇，但是普通元素中的文字會被擠出原來的位置顯示袁勺，環(huán)繞浮動元素排列席怪。
8. 清除浮動指什么? 如何清除浮動?
清除浮動指清除掉元素的float屬性
- 使用偽元素清除
.box::after{
content:"";
display:block;
clear:both;
}
.left,.right{
width:100px;
height:100px;
background:red;
float:left;
}
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
- 將父容器也進行浮動
.box{
float:left;
}
.left,.right{
width:100px;
height:100px;
background:red;
float:left;
}
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
- 使用overflow:hidden清除
.box{
overflow: hidden;
} //overflow:auto也是可以的
.left,.right{
width:100px;
height:100px;
background:red;
float:left;
}
<divclass="box">
<divclass="left"></div>
<divclass="right"></div>
</div>
- 使用空div清除
.clear{
clear:both;
}
<divclass=”clear”></div>
