1. 浮動(dòng)元素有什么特征？對(duì)父容器、其他浮動(dòng)元素、普通元素、文字分別有什么影響?

1.1 特征

1.1-1. 浮動(dòng)模型也是可視化格式模型的一種，浮動(dòng)的div可以左，右移動(dòng)（主要看float的屬性）一直浮動(dòng)到包含框的邊緣，非常重要的一點(diǎn)是，浮動(dòng)元素不再普通的文檔流中，所以也不會(huì)影響普通流中的元素，普通流中的元素看他像空氣一樣
1.1-2.如果包含塊兒太窄，無(wú)法包含全部子元素，那么多出來(lái)的元素會(huì)被“擠”下去。如果浮動(dòng)元素高度不同，那么被“擠下去”的時(shí)候會(huì)被卡住。

1.2.影響

1.2-1. 對(duì)于父容器而言，忽略浮動(dòng)元素的存在，會(huì)讓他導(dǎo)致高度塌陷。
1.2-2. 對(duì)子容器而言，如果多個(gè)子元素水平排列，同時(shí)寬度不夠時(shí)，浮動(dòng)的子元素會(huì)依次向下排列，如果高度不同，下移的時(shí)候可能會(huì)出現(xiàn)被卡住的情況。
1.2-3. 對(duì)于其他元素而言，浮動(dòng)元素之前的普通元素不受影響。浮動(dòng)元素之后的普通元素因感知不到浮動(dòng)元素的存在會(huì)被浮動(dòng)元素覆蓋。
1.2-4. 對(duì)于文字來(lái)說(shuō)，文字會(huì)圍繞浮動(dòng)元素排列（就像平時(shí)報(bào)紙里面的圖文排列的文章感覺(jué)差不多）。

2. 清除浮動(dòng)指什么? 如何清除浮動(dòng)? 兩種以上方法

1. 清除浮動(dòng)指的清除浮動(dòng)元素對(duì)當(dāng)前元素的影響；
2. 清除浮動(dòng)的方法

//利用偽類
.clearfix:before,.clearfix:after{
content: " ";
display: block;
overflow: hidden;
clear: both;
}
//或者讓父元素生成BFC
.father-wrap{
overflow: hidden;//生成bfc
}
```

3. 有幾種定位方式，分別是如何實(shí)現(xiàn)定位的，參考點(diǎn)是什么，使用場(chǎng)景是什么？

1.有幾種定位方式
共有5種他們是 postion: inherit|static|absolute|relative|fixed;
2.如何實(shí)現(xiàn)定位
2-1. inherit繼承父容器的定位方式，父容器怎么定位的他們也就怎么定位。
2-2. static 這個(gè)是postion的默認(rèn)值，基本不用
2-3. absolute 元素框從文檔流完全脫離，如果設(shè)定絕對(duì)定位的子框的父級(jí)框設(shè)定了relative，那么子框就以這個(gè)有相對(duì)定位的父框?yàn)榛鶞?zhǔn)進(jìn)行自身位置的偏移，如果父級(jí)沒(méi)設(shè)relative，那就再找上級(jí)，如果都沒(méi)有設(shè)定，那就以html（根節(jié)點(diǎn)）為基準(zhǔn)進(jìn)行自身位置的調(diào)整。
參考點(diǎn)：最近的非static定位的祖先容器
常見(jiàn)使用場(chǎng)景：元素垂直水平居中
2-4. relative 元素相對(duì)于自己原來(lái)所處位置進(jìn)行一定距離的偏移，原本這個(gè)元素所占的空間依然被保留
參考：元素自己所在文檔流中位置
常用場(chǎng)景：元素特殊位置的小位移，或者作為絕對(duì)定位的參考點(diǎn)
2-5. fixed 元素框的表現(xiàn)類似于 absolute，不過(guò)其包含塊是視窗本身
參考點(diǎn)：瀏覽器窗口
常用場(chǎng)景：位置固定的彈窗，或者，返回頂部的按鈕

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

z-index 的作用：
控制非文檔流元素的疊放順序，該屬性值越高，元素位置越靠上。
使用方法：當(dāng)元素設(shè)置為relative、absolute或fixed時(shí)，通過(guò)設(shè)置z-index：number； 決定疊放順序，屬性值越高，元素位置越靠上。
(注：當(dāng)一個(gè)元素被設(shè)置了opacity，transforms, filters, css-regions, paged media等屬性后就會(huì)有新的‘堆疊上下文’排序。)
講解堆疊上下文的文章

文章片段引用

下面是同一層里面的堆疊順序（從后到前）：
層的根元素
被定位了得元素并且z-index值為負(fù)，相同z-index的情況下，按照
HTML元素的書寫順序排列，下面相同。
沒(méi)有被定位的元素
被定位的元素，并且z-index值為auto
被定位了的元素并且z-index值為正。

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

兩者都可以發(fā)生偏移，區(qū)別分別為：
position:relative; 不會(huì)影響其他元素,顯示位置發(fā)生變化，文檔流位置不變
margin: 這里是負(fù)數(shù) ;為負(fù)值時(shí)，會(huì)影響其他元素，顯示位置和文檔流位置均發(fā)生變化。

6. BFC 是什么？如何生成 BFC？BFC 有什么作用？舉例說(shuō)明

是什么：
BFC直譯為“塊級(jí)格式化范圍”(Block Formatting Context)。是 W3C CSS 2.1 規(guī)范中的一個(gè)概念，它決定了元素如何對(duì)其內(nèi)容進(jìn)行定位，以及與其他元素的關(guān)系和相互作用。當(dāng)涉及到可視化布局的時(shí)候，Block Formatting Context提供了一個(gè)環(huán)境，HTML元素在這個(gè)環(huán)境中按照一定規(guī)則進(jìn)行布局。一個(gè)環(huán)境中的元素不會(huì)影響到其它環(huán)境中的布局。比如浮動(dòng)元素會(huì)形成BFC，浮動(dòng)元素內(nèi)部子元素的主要受該浮動(dòng)元素影響，兩個(gè)浮動(dòng)元素之間是互不影響的。這里有點(diǎn)類似一個(gè)BFC就是一個(gè)獨(dú)立的行政單位的意思。也可以說(shuō)BFC就是一個(gè)作用范圍?？梢园阉斫獬墒且粋€(gè)獨(dú)立的容器，并且這個(gè)容器的里box的布局，與這個(gè)容器外的毫不相干。

生成 BFC的方法：

1. float為 left|right
2. overflow為 hidden|auto|scroll
3. display為 table-cell|table-caption|inline-block
4. position為 absolute|fixed

它的作用：
設(shè)置父元素為BFC可以清除浮動(dòng)，克制高度塌陷，舉個(gè)列子

.father-box{
   width: 600px;
   border: 1px solid red;
   margin: 0 auto;
   overflow: hidden;  //生成bfc克制高度塌陷
}
.child-box{
  width: 200px;
  height: 200px;
  float: left;  //脫離文檔流 會(huì)讓父元素“無(wú)視”這個(gè)child-box的存在
  border: 5px solid yellow;
}

解決元素margin重疊問(wèn)題，技巧就是給父元素生成bfc就可以了。
解決margin重疊問(wèn)題

7. 在什么場(chǎng)景下會(huì)出現(xiàn)外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個(gè)父子外邊距合并的范例

什么場(chǎng)景下會(huì)出現(xiàn)外邊距合并:

1. 兄弟元素間的合并-場(chǎng)景：當(dāng)一個(gè)元素出現(xiàn)在另一個(gè)元素上面時(shí)，第一個(gè)元素的下外邊距與第二個(gè)元素的上外邊距會(huì)發(fā)生合并（就是上面元素的margin-botton與下面元素的margin-top的距離出現(xiàn)合并）

2. 父子元素間的合并-場(chǎng)景：當(dāng)一個(gè)元素包含在另一個(gè)元素中時(shí)（父框沒(méi)有如：邊框、非空內(nèi)容、padding等屬性時(shí)）它們的上和/或下外邊距也會(huì)發(fā)生合并。

如何合并

• 兩個(gè)相鄰的外邊距都是正數(shù)時(shí)，合并結(jié)果是它們兩者之間較大的值。
• 兩個(gè)相鄰的外邊距都是負(fù)數(shù)時(shí)，合并結(jié)果是兩者絕對(duì)值的較大值。
• 兩個(gè)外邊距一正一負(fù)時(shí)，合并結(jié)果是兩者的相加的和。

如何阻止合并

1. 垂直相鄰元素外邊距合并
   1.1 給元素設(shè)置浮動(dòng)；
   1.2 設(shè)置其中一個(gè)元素display:inline-block；
   1.3 或使其父元素形成BFC可防止邊距合并（如overflow:hidden）；

2. 父子元素外邊距合并
   2.1 為父元素設(shè)置padding或border
   2.2 設(shè)置父元素為BFC

父子元素margin合并范例

范例

8. 代碼題目展示

8.1 代碼題-1
8.2 代碼題-2
8.3 代碼題-3
8.4 代碼題-4