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

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

2 . 有幾種定位方式要销，分別是如何實(shí)現(xiàn)定位的，使用場(chǎng)景如何夏块？

3 . absolute, relative, fixed 偏移的參考點(diǎn)分別是什么

• absolute相對(duì)于自己的父元素政己，若他的父級(jí)沒有設(shè)置position的話酌壕，就再往父元素的父元素找一直找到有定位屬性的一個(gè)元素，然后相對(duì)于該元素做一個(gè)偏移歇由，若一直沒找到卵牍，就相對(duì)于根節(jié)點(diǎn)去做偏移。
• relative相對(duì)于自身原始的位置做一個(gè)偏移沦泌。
• fixed是相對(duì)于瀏覽器的窗口做偏移糊昙，不會(huì)管頁(yè)面是否滾動(dòng)，不管頁(yè)面其它元素在哪里谢谦，只是相對(duì)于窗口释牺。

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

• 作用：設(shè)置元素的堆疊順序他宛。擁有更高堆疊順序的元素總是會(huì)處于堆疊順序較低的元素的前面船侧。
• 使用：該元素設(shè)置一個(gè)定位元素沿z軸的位置，z軸定義為垂直延伸到顯示區(qū)的軸厅各。如果為正數(shù)镜撩，則離用戶更近，為復(fù)數(shù)則表示離用戶更遠(yuǎn)。只有在使用了position并脫離了文檔流（absolute袁梗、fixed）的情況下可以使用宜鸯，其他情況使用z-index不起作用。

5 . position:relative和負(fù)margin都可以使元素位置發(fā)生偏移?二者的區(qū)別

• position:relative和margin的負(fù)值發(fā)生的偏移都是針對(duì)自己位置的移動(dòng)遮怜。
  不同的是 position：relative的偏移 不會(huì)影響其他的元素淋袖，原來(lái)的元素還保持相同的文檔流位置。margin的負(fù)值偏移會(huì)影響與它相鄰的元素锯梁，改變別的元素的位置

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

先水平居中的話即碗，margin:0 auto;可以滿足；垂直居中陌凳，可以利用絕對(duì)定位剥懒，讓其發(fā)生偏移，再通過margin上和左調(diào)動(dòng)元素的位置合敦。
代碼展示
1. 使用絕對(duì)定位設(shè)置top：50%初橘，left：50%，負(fù)margin-top和負(fù)margin-left各為元素寬和高的一半

position:absolute

2. 使用margin值設(shè)置margin:50%,auto;

margin

7 . 浮動(dòng)元素有什么特征充岛？對(duì)其他浮動(dòng)元素保檐、普通元素、文字分別有什么影響?

• 特征：浮動(dòng)元素會(huì)脫離標(biāo)準(zhǔn)文檔流崔梗，不占據(jù)文檔流中的空間夜只，其后面的普通元素會(huì)占據(jù)原本元素的空間，所以后面的元素會(huì)被遮擋 炒俱。
• 浮動(dòng)元素會(huì)讓其他浮動(dòng)元素緊跟其后排列盐肃；
• 文字遇到浮動(dòng)元素邊框會(huì)避開另起一行有環(huán)繞效果爪膊。
• 如果有其他元素有清除浮動(dòng)权悟，同一層的浮動(dòng)元素則會(huì)另起一行放置。

8 . 清除浮動(dòng)指什么推盛， 如何清除浮動(dòng)

• 在非IE瀏覽器（如Firefox）下峦阁，當(dāng)容器的高度為auto，且容器的內(nèi)容中有浮動(dòng)（float為left或right）的元素耘成，在這種情況下榔昔，容器的高度不能自動(dòng)伸長(zhǎng)以適應(yīng)內(nèi)容的高度，使得內(nèi)容溢出到容器外面而影響（甚至破壞）布局的現(xiàn)象瘪菌。這個(gè)現(xiàn)象叫浮動(dòng)溢出撒会，為了防止這個(gè)現(xiàn)象的出現(xiàn)而進(jìn)行的CSS處理，就叫CSS清除浮動(dòng)师妙。
  清除浮動(dòng)就是清除掉元素的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>

• 將父容器也進(jìn)行浮動(dòng)

.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 . 寫出如下兩欄布局, 其中中間區(qū)塊寬度900px, 居中,左側(cè)邊欄寬度200px, 右側(cè)邊欄寬度自適應(yīng)，縫隙10px

• 做完可參考范例
  范例代碼參考
• ps: 圖片左浮動(dòng)默穴，導(dǎo)航欄整體右浮動(dòng)怔檩，導(dǎo)航欄里面的li元素左浮動(dòng)褪秀。
• ps: aside左浮動(dòng)，main 不浮動(dòng)設(shè)置 margin-left
• 凡是有浮動(dòng)的地方薛训，其直接父元素必須清除浮動(dòng)
• 自備創(chuàng)意媒吗，風(fēng)格樣式不需要和范例保持一樣，技術(shù)上到位就行
• 代碼示例

2 . 不適用背景圖片實(shí)現(xiàn)如下效果

• 代碼示例