1. 浮動(dòng)元素有什么特征？對父容器、其他浮動(dòng)元素、普通元素、文字分別有什么影響?
特征：
- 浮動(dòng)元素脫離了正常的文檔流，使普通文檔流的元素?zé)o法識別浮動(dòng)元素，文檔的普通流中的元素表現(xiàn)的就像浮動(dòng)元素不存在一樣。
- 普通文檔流中的行內(nèi)框（如文本）能夠感知到浮動(dòng)元素的存在，能夠?qū)崿F(xiàn)簡單的文字環(huán)繞效果，這也是浮動(dòng)出現(xiàn)的本質(zhì)。
- 浮動(dòng)元素直到碰到它的包含框或另一個(gè)浮動(dòng)框的邊緣。
- 浮動(dòng)元素具有BFC特性，如浮動(dòng)元素間不會(huì)發(fā)生外邊距重疊。
- 清理浮動(dòng)后，該元素的邊框與浮動(dòng)元素的外邊距相鄰，即外邊距可能在浮動(dòng)框內(nèi)。
- 浮動(dòng)元素具有包裹性，在沒有設(shè)置widh的情況下，寬度由內(nèi)容撐開。
- 即使是inline元素，浮動(dòng)后也能顯示的設(shè)置寬高。
影響：
- 因?yàn)槠洳辉倨胀ㄎ臋n流中， 能造成父元素“高度塌陷”。
- 其他浮動(dòng)元素會(huì)"察覺"到浮動(dòng)元素的存在按照從左到右的"正常文檔流"排列。
- 普通元素會(huì)表現(xiàn)的像浮動(dòng)元素不存在一樣，不過行內(nèi)框（如文本）能感知到。
- 行內(nèi)框（如文本）會(huì)環(huán)繞浮動(dòng)元素，實(shí)現(xiàn)文字環(huán)繞效果。
2. 清除浮動(dòng)指什么? 如何清除浮動(dòng)? 兩種以上方法
清除浮動(dòng)指元素的側(cè)邊不允許出現(xiàn)浮動(dòng)元素，從而使得浮動(dòng)元素的不占據(jù)普通文檔流空間的使得父元素的高度塌陷問題得到解決，主要通過clear屬性實(shí)現(xiàn)。
方法：
1.使浮動(dòng)元素的父元素具有BFC特性。
.clearfix {
*zoom:1; // 其中*為CSS hack，為了兼容IE6、7，使其haslayout
}
.clearfix:after {
content: "";
display: "block";
clear: both;
}
3. 有幾種定位方式，分別是如何實(shí)現(xiàn)定位的，參考點(diǎn)是什么，使用場景是什么？
| 值 | 含義 |
|---|---|
| inherit | 從父元素繼承position屬性的值，一般不用。 |
| static | 默認(rèn)值,沒有定位，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明） |
| relative | 生成相對定位的元素，相對于元素本身正常位置進(jìn)行定位，應(yīng)用于對其自身進(jìn)行細(xì)微調(diào)整。 |
| absolute | 生成絕對定位的元素，相對于非定位元素的第一個(gè)祖先元素進(jìn)行定位，沒有則相對于根元素，使用廣泛。 |
| fixed | 生成固定定位的元素，相對于瀏覽器窗口進(jìn)行定位。需要一直停留在窗口的元素，例如某些導(dǎo)航，一些廣告彈窗。 |
| sticky | 新的css3屬性，兼容性較差，一般用JS實(shí)現(xiàn)。它的表現(xiàn)類似position:relative和position:fixed的合體，目標(biāo)區(qū)域在屏幕中可見時(shí)，它的行為就像position:relative; 而當(dāng)頁面滾動(dòng)超出目標(biāo)區(qū)域時(shí)，它的表現(xiàn)就像position:fixed，它會(huì)固定在目標(biāo)位置。 |
4. z-index 有什么作用? 如何使用?
參考深入理解CSS中的層疊上下文和層疊順序，注意理解七階層疊水平，層疊上下文，層疊順序。
z-index與元素在Z軸方向上的顯示有關(guān)。
當(dāng)元素發(fā)生層疊的時(shí)候：
- 誰大誰上：當(dāng)具有明顯的層疊水平標(biāo)示的時(shí)候，如識別的z-indx值，在同一個(gè)層疊上下文領(lǐng)域，層疊水平值大的那一個(gè)覆蓋小的那一個(gè)。
- 后來居上：當(dāng)元素的層疊水平一致、層疊順序相同的時(shí)候，在DOM流中處于后面的元素會(huì)覆蓋前面的元素。
z-index與層疊上下文：
- z-index不為auto的定位元素會(huì)創(chuàng)建層疊上下文。
- 定位元素默認(rèn)的
z-index: auto可以看成z-index: 0。只不過z-index: 0會(huì)創(chuàng)建層疊上下文。 - z-index層疊順序的比較止步于父級層疊上下文。
5. position:relative和負(fù)margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別
position:relative相對自己原本的位置偏移，不影響其它普通流中元素的位置。
margin：除了讓元素自身發(fā)生偏移還影響其它普通流中的元素。
6. BFC 是什么？如何生成 BFC？BFC 有什么作用？舉例說明
BFC：塊級格式化上下文（block formatting context），它是一個(gè)獨(dú)立的渲染區(qū)域，只有Block-level box參與，它規(guī)定了內(nèi)部的Block-level box如何布局，并且與這個(gè)區(qū)域外部毫不相干。
形成條件：
- 根元素
- float不為none
- position為absolute或fixed
- display為inline-block、table-cell、table-caption、flex、inline-flex
- overflow不為visible
特性及作用：
- BFC的區(qū)域不會(huì)與float box重疊。 （外部）
- BFC就是頁面上的一個(gè)獨(dú)立的容器，容器里面的子元素不會(huì)影響到外面的元素。
- BFC元素不會(huì)發(fā)生margin重疊。
- 能感知到浮動(dòng)元素存在，計(jì)算BFC高度時(shí)，浮動(dòng)元素也參與。可以利用其清理浮動(dòng)。
可以利用BFC特性及display: table-cell的包裹性，天生無溢出特性，絕對寬度也能自適應(yīng)，來實(shí)現(xiàn)兩欄自適應(yīng)布局：
.cell {
display: table-cell;
width: 2000px;
*display: inline-block; // 兼容IE6,7
*width: auto;
}
7. 在什么場景下會(huì)出現(xiàn)外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個(gè)父子外邊距合并的范例
只有普通文檔流中的塊元素的垂直外邊距才會(huì)發(fā)生外邊距合并，行內(nèi)框、浮動(dòng)框、絕對定位框之間的外邊距不會(huì)疊加。
如何合并：
- 兩個(gè)margin都是正值的時(shí)候，取兩者的最大值
- 兩個(gè)margin都是負(fù)值的時(shí)候，取的是其中絕對值較大的，
- 有正有負(fù)時(shí)，先取出負(fù) margin 中絕對值中最大的，然后，和正 margin 值中最大的 margin 相加。
不讓相鄰元素外邊距合并方法：
- 利用 BFC會(huì)阻止垂直外邊距折疊的特性，將對應(yīng)元素轉(zhuǎn)換為BFC來解決邊距重疊。
- 在父元素中添加padding或border來將兩個(gè)外邊距分開，阻止父元素與子元素的外邊距合并。
父子外邊距合并的范例：
<div class="layout">
<div class="ct">
<div class="box"></div>
</div>
</div>
.layout {
border: 2px solid #000;
background-color: #f00;
}
.ct {
width: 100px;
height: 100px;
margin-top: 20px;
background-color: #0f0;
}
.box {
width: 50px;
height: 50px;
margin-top: 50px;
background-color: #00f;
}
效果圖
由圖知：.ct的
margin-top: 20px;與.box的margin-top: 50px;上外邊距合并后，表現(xiàn)出的上外邊距為50px。
