本教程版權歸小圓和饑人谷所有，轉載須說明來源

問答

1. 文檔流的概念指什么？有哪種方式可以讓元素脫離文檔流?

• 文檔流：將窗體自上而下分成一行行, 并在每行中按從左至右的順序排放元素
• 脫離文檔流的方法：浮動、定位（position: relative除外）、display: none

2. 有幾種定位方式，分別是如何實現定位的，使用場景如何？

3. absolute,relative, fixed偏移的參考點分別是什么

• absolute：相對于static定位以外的第一個父元素
• relative：相對于瀏覽器窗口
• fixed：相對于其正常位置

4. z-index 有什么作用? 如何使用?

• 作用：設置元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。
• 使用：該元素設置一個定位元素沿z軸的位置，z軸定義為垂直延伸到顯示區的軸。如果為正數，則離用戶更近，為復數則表示離用戶更遠。只有在使用了position并脫離了文檔流（absolute、fixed）的情況下可以使用，其他情況使用z-index不起作用。

5.position:relative和負margin都可以使元素位置發生偏移?二者有什么區別

position: relative會使元素脫離文檔流，并相對于其原來位置發生偏移，但不會影響其他元素（可能會覆蓋其他元素）；而負margin不僅會使元素本身發生偏移，還會影響其他元素的位置，因為元素仍存在于正常文檔流。

6. 如何讓一個固定寬高的元素在頁面上垂直水平居中?

1. 使用絕對定位
設置top：50%，left：50%，負margin-top和負margin-left各為元素寬和高的一半

position:absolute

2. 使用margin值
設置margin:50%,auto;

margin

7. 浮動元素有什么特征？對其他浮動元素、普通元素、文字分別有什么影響?

浮動元素脫離了文檔流，不占用文檔流位置，其他浮動元素會按照浮動規則在脫離文檔流中排隊依次顯示，對普通元素的位置不受影響，但是普通元素中的文字會被擠出原來的位置顯示，環繞浮動元素排列。

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>