1. 浮動元素有什么特征？對父容器、其他浮動元素、普通元素、文字分別有什么影響?
浮動元素脫離了普通文檔流。如果父元素沒有高度會使父元素高度塌陷，和其他浮動元素依次排列，如果和普通元素在一個位置會覆蓋普通元素，文字會受浮動元素的影響
2. 清除浮動指什么? 如何清除浮動? 兩種以上方法
讓元素左邊或右邊沒有向左或向右浮動的元素，保持周圍的普通文檔流不受浮動元素影響。
清除浮動方法：
- 添加一個清除浮動的元素，
.clearfloat {
clear: both;
}
- 利用偽元素
.clearfloat {
content: '';
display: block;
clear: both;
}
- 父元素定義overflow:auto
.over-flow{
overflow: auto;
zoom: 1; //zoom: 1; 是在處理兼容性問題
}
3. 有幾種定位方式，分別是如何實現(xiàn)定位的，參考點(diǎn)是什么，使用場景是什么？
| 定位方式 | 參考點(diǎn) | 使用場景 |
|---|---|---|
| inherit | 從父元素繼承position屬性的值 | 一般不用 |
| static | 默認(rèn)值，沒有定位 | 默認(rèn)值 |
| relative | 相對元素自身定位 | 不影響原文檔流的情況下，做細(xì)微調(diào)整。子元素需要以自身為參考來做絕對定位 |
| absolute | 絕對定位，相對于static定位以外的第一個祖先元素 | 不需要占用原文檔流的位置 |
| fixed | 絕對定位，相對于瀏覽器窗口 | 需要在視口中一直保留這個元素 |
| sticky | 混合了relative和fixed定位 | 在有滾動條的頁面中，可見時是relative定位，當(dāng)滾動到不可見時，變?yōu)閒ixed定位 |
4. z-index 有什么作用? 如何使用?
讓元素按規(guī)定的層級來顯示，當(dāng)元素重疊的時候，用z-index來決定哪一個元素在上方顯示。只作用在有定位屬性為relative/absolute/fixed中的一個的元素上。
語法：
/* Keyword value */
z-index: auto;
/* <integer> values */
z-index: 0;
z-index: 3;
z-index: 289;
z-index: -1;/* 使用負(fù)值降低優(yōu)先級 */
/* Global values */
z-index: inherit;
z-index: initial;
z-index: unset;
示例
HTML
<div class="dashed-box">Dashed box
<span class="gold-box">Gold box</span>
<span class="green-box">Green box</span>
</div>
CSS
.dashed-box {
position: relative;
z-index: 1;
border: dashed;
height: 8em;
margin-bottom: 1em;
margin-top: 2em;
}
.gold-box {
position: absolute;
z-index: 3; /* put .gold-box above .green-box and .dashed-box */
background: gold;
width: 80%;
left: 60px;
top: 3em;
}
.green-box {
position: absolute;
z-index: 2; /* put .green-box above .dashed-box */
background: lightgreen;
width: 20%;
left: 65%;
top: -25px;
height: 7em;
opacity: 0.9;
}
結(jié)果
5. position:relative和負(fù)margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別
position:relative 不會影響原文檔流，還占用原來的位置。
負(fù)margin會影響到其他元素的位置。
6. BFC 是什么？如何生成 BFC？BFC 有什么作用？舉例說明
塊格式化上下文（block formatting context）是Web頁面的可視化CSS渲染的一部分。它是塊盒子的布局發(fā)生，浮動互相交互的區(qū)域。
生成條件：
- 根元素或其它包含它的元素
- 浮動 (元素的 float 不是 none)
- 絕對定位的元素 (元素具有 position 為 absolute 或 fixed)
- 內(nèi)聯(lián)塊 inline-blocks (元素具有 display: inline-block)
- 表格單元格 (元素具有 display: table-cell，HTML表格單元格默認(rèn)屬性)
- 表格標(biāo)題 (元素具有 display: table-caption, HTML表格標(biāo)題默認(rèn)屬性)
- 塊元素具有overflow ，且值不是 visible
- display: flow-root
作用：
BFC不會重疊浮動元素。
清除浮動：
<style>
.bfc{
border: 1px solid;
overflow: hidden;
}
.box1 {
width: 50px;
height: 50px;
border: 3px solid #ddd;
float: left;
}
.box2 {
width: 50px;
height: 50px;
border: 3px solid #ddd;
float: left;
}
</style>
<div class="bfc">
<div class="box1"></div>
<div class="box2"></div>
</div>
結(jié)果
消除外邊距重疊：
<style>
.box1 {
width: 50px;
height: 50px;
border: 3px solid #ddd;
margin-top:100px;
margin-bottom: 20px;
}
.box2 {
width: 50px;
height: 50px;
border: 3px solid #ddd;
margin-top: 10px;
}
</style>
<div class="box1"></div>
<div class="box2"></div>
結(jié)果
下面我們將box2包起來,有包含box2的元素就生成了BFC
<style>
.bfc{
border: 1px solid;
}
.box1 {
width: 50px;
height: 50px;
border: 3px solid #ddd;
margin-top:100px;
margin-bottom: 20px;
}
.box2 {
width: 50px;
height: 50px;
border: 3px solid #ddd;
margin-top: 10px;
}
</style>
<div class="box1"></div>
<div class="bfc">
<div class="box2"></div>
</div>
結(jié)果
7. 在什么場景下會出現(xiàn)外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個父子外邊距合并的范例
相鄰的兄弟元素之間、塊級父元素與其第一個/最后一個子元素、空塊元素。
合并方式：
- 當(dāng)兩個外邊距都是正數(shù)時，取兩者中較大者
- 當(dāng)兩個外邊距一個為正數(shù)，一個為負(fù)數(shù)時，取兩者之和
- 當(dāng)兩個外邊距都是負(fù)數(shù)時，取兩者絕對值較大者
創(chuàng)建BFC來不讓相鄰元素外邊距合并。
父子外邊距合并示例：
<style>
.parent {
width: 300px;
height: 300px;
background: red;
border: 1px solid;
}
.child {
width: 300px;
height: 200px;
background: blue;
margin-top: 20px;
}
.grandson {
width: 200px;
height: 100px;
background: green;
margin-top: 50px;
}
</style>
<body>
<div class="parent">
<div class="child">
<div class="grandson">grandson</div>
child
</div>
parent
</div>
</body>
結(jié)果
child和grandson的外邊距合并起來為50px。
小例子
http://output.jsbin.com/lesipikuno
