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

• CSS普通流/文檔流（normal flow）是元素按照其在 HTML 中的位置順序決定排布的過程，或者說在排布過程中將窗體自上而下分成一行行, 并在每行中按從左至右的順序排放元素。
• 元素脫離文檔流可以進行如下設置：display:none,position:absolute、position：fixed，float:left、float:right可以脫離文檔流。

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

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

• absolute相對于自己的父元素，若他的父級沒有設置position的話，就再往父元素的父元素找一直找到有定位屬性的一個元素，然后相對于該元素做一個偏移，若一直沒找到，就相對于根節點去做偏移。
• relative相對于自身原始的位置做一個偏移。
• fixed是相對于瀏覽器的窗口做偏移，不會管頁面是否滾動，不管頁面其它元素在哪里，只是相對于窗口。

4 . z-index 的作用， 如何使用

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

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

• position:relative和margin的負值發生的偏移都是針對自己位置的移動。
  不同的是 position：relative的偏移 不會影響其他的元素，原來的元素還保持相同的文檔流位置。margin的負值偏移會影響與它相鄰的元素，改變別的元素的位置

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

先水平居中的話，margin:0 auto;可以滿足；垂直居中，可以利用絕對定位，讓其發生偏移，再通過margin上和左調動元素的位置。
代碼展示
1. 使用絕對定位設置top：50%，left：50%，負margin-top和負margin-left各為元素寬和高的一半

position:absolute

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

margin

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

• 特征：浮動元素會脫離標準文檔流，不占據文檔流中的空間，其后面的普通元素會占據原本元素的空間，所以后面的元素會被遮擋 。
• 浮動元素會讓其他浮動元素緊跟其后排列；
• 文字遇到浮動元素邊框會避開另起一行有環繞效果。
• 如果有其他元素有清除浮動，同一層的浮動元素則會另起一行放置。

8 . 清除浮動指什么， 如何清除浮動

• 在非IE瀏覽器（如Firefox）下，當容器的高度為auto，且容器的內容中有浮動（float為left或right）的元素，在這種情況下，容器的高度不能自動伸長以適應內容的高度，使得內容溢出到容器外面而影響（甚至破壞）布局的現象。這個現象叫浮動溢出，為了防止這個現象的出現而進行的CSS處理，就叫CSS清除浮動。
  清除浮動就是清除掉元素的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>

代碼

1 . 寫出如下兩欄布局, 其中中間區塊寬度900px, 居中,左側邊欄寬度200px, 右側邊欄寬度自適應，縫隙10px

• 做完可參考范例
  范例代碼參考
• ps: 圖片左浮動，導航欄整體右浮動，導航欄里面的li元素左浮動。
• ps: aside左浮動，main 不浮動設置 margin-left
• 凡是有浮動的地方，其直接父元素必須清除浮動
• 自備創意，風格樣式不需要和范例保持一樣，技術上到位就行
• 代碼示例

2 . 不適用背景圖片實現如下效果

• 代碼示例