1.浮動元素有什么特征晾捏？對父容器法希、其他浮動元素瑰煎、普通元素、文字分別有什么影響?
- 特征：浮動元素可以向左或向右浮動疙渣，直到它的外邊緣碰到包含框或者另一個浮動元素的框的邊緣。
- 對父容器堆巧，如果所有子元素都浮動的話妄荔，父容器就會失去寬度泼菌，寬度為0.
- 對普通元素，因為浮動元素不在文檔的普通流中啦租，所以普通元素會表現(xiàn)的好像浮動元素不存在一樣哗伯。
- 對文字，文字會移動來給浮動元素讓出空間篷角，如果文字較多焊刹，會形成文字包裹住浮動元素的感覺。
2.清除浮動指什么? 如何清除浮動? 兩種以上方法
是指解決父容器塌陷問題恳蹲。
兩種方法虐块，一種是使用clear屬性，另一種是形成bfc
-
使用clear屬性的話嘉蕾，那么被設置clear：both的元素左右兩邊都不能有浮動元素非凌，所以它就會到浮動元素的下面一行，從而撐開父元素荆针。
例如：
bfc的話不會重疊浮動元素，且可以包含浮動颁糟。
所以只要設置父元素形成bfc航背，那么就可以包含浮動。設置以下屬性即可形成bfc
- float:不為none;
- overflow:不為visible;
- display:為 table-cell|table-caption|inline-block
- position:為 absolute|fixed
3.有幾種定位方式棱貌，分別是如何實現(xiàn)定位的玖媚，參考點是什么，使用場景是什么婚脱？
| 值 | 屬性 |
|---|---|
| inherit | 規(guī)定應該從父元素繼承 position 屬性的值 |
| static | 默認值,沒有定位今魔，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明） |
| relative | 生成相對定位的元素，相對于元素本身正常位置進行定位,因此障贸，left:20px 會向元素的 left 位置偏移20px |
| absolute | 生成絕對定位的元素错森，相對于static定位以外的第一個祖先元素（offset parent）進行定位,元素的位置通過 left, top, right以及 bottom屬性進行規(guī)定 |
| fixed | 生成絕對定位的元素，相對于瀏覽器窗口進行定位篮洁。元素的位置通過left,top,right以及 bottom屬性進行規(guī)定 |
| sticky | CSS3新屬性涩维，表現(xiàn)類似position:relative和position:fixed的合體，在目標區(qū)域在屏幕中可見時袁波，它的行為就像position:relative; 而當頁面滾動超出目標區(qū)域時瓦阐，它的表現(xiàn)就像position:fixed，它會固定在目標位置 |
----MND
常用的有relative篷牌，absolute睡蟋，fixed三種
relative 生成相對定位，參考點為元素本身的位置枷颊，使用場景：為絕對定位設定參照物或對元素自身位置進行局部調整
absolute 生成絕對定位戳杀，參考點為第一個不是static定位的祖先元素（最高追溯到html標簽）该面，使用場景：當想讓元素參照特定參照物進行定位時使用。
fixed 生成絕對定位豺瘤，參考點為瀏覽器窗口
4.z-index 有什么作用? 如何使用?
z-index 屬性指定了一個元素及其子元素的 z-order吆倦。 當元素之間重疊的時候，z-order 決定哪一個元素覆蓋在其余元素的上方顯示坐求。 通常來說 z-index 較大的元素會覆蓋較小的一個蚕泽。
對于一個已經定位的元素（即position屬性值是非static的元素），z-index 屬性指定：
元素在當前堆疊上下文中的堆疊層級桥嗤。元素是否創(chuàng)建一個新的本地堆疊上下文须妻。
----MND
5.position:relative和負margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別
position:relative的話只是視覺上發(fā)生了移動，但是其所占據(jù)的位置是不變的泛领，也就是不會影響周圍元素的排列荒吏。
但是margin的話是帶著位置一起移動的，會影響到周圍元素的排列渊鞋。
試驗如下：
http://js.jirengu.com/huzitumiha/1/edit?html,css,output
6.BFC 是什么绰更？如何生成 BFC？BFC 有什么作用锡宋？舉例說明
BFC的全稱是 Block Format Content
設置以下屬性即可形成BFC
float
為 left|right
overflow
為 hidden|auto|scroll
display
為 table-cell|table-caption|inline-block
position
為 absolute|fixed
BFC的作用
BFC會阻止垂直外邊距（margin-top儡湾、margin-bottom）折疊
BFC不會重疊浮動元素
BFC可以包含浮動
- 關于組織垂直外邊距
按照BFC的定義，只有同屬于一個BFC時执俩，兩個元素才有可能發(fā)生垂直Margin的重疊徐钠，這個包括相鄰元素，嵌套元素役首，只要他們之間沒有阻擋(例如邊框尝丐，非空內容，padding等)就會發(fā)生margin重疊衡奥。
因此要解決margin重疊問題爹袁，只要讓它們不在同一個BFC就行了，但是對于兩個相鄰元素來說杰赛，意義不大呢簸，沒有必要給它們加個外殼，但是對于嵌套元素來說就很有必要了乏屯，只要把父元素設為BFC就可以了根时。這樣子元素的margin就不會和父元素的margin發(fā)生重疊 - 關于包含浮動，只要設置父元素形成BFC,那么父元素就可以包含子元素的浮動辰晕，也就是達到了清除浮動的效果蛤迎。
- BFC的缺陷
使用BFC使用float的時候會使父容器長度縮短，overflow屬性會影響滾動條和絕對定位的元素含友；position會改變元素的定位方式等等
7.在什么場景下會出現(xiàn)外邊距合并替裆？如何合并校辩？如何不讓相鄰元素外邊距合并？給個父子外邊距合并的范例
定義：塊的頂部外邊距和底部外邊距有時被組合(折疊)為單個外邊距辆童，其大小是組合到其中的最大外邊距
合并規(guī)則：- 兩個margin都是正值的時候宜咒，取兩者的最大值；- 當 margin 都是負值的時候把鉴，取的是其中絕對值較大的故黑，然后，從0位置庭砍，負向位移场晶；- 當有正有負的時候，先取出負 margin 中絕對值中最大的怠缸，然后诗轻，和正 margin 值中最大的 margin 相加。- 所有毗鄰的margin要一起參與運算揭北，不能分步進行扳炬。
三種常見情況
1.相鄰的兄弟姐妹元素
<p style="margin-bottom: 30px;">這個段落的下外邊距被合并...</p>
<p style="margin-top: 20px;">...這個段落的上外邊距被合并。</p>
可以發(fā)現(xiàn)這兩個段落中間的距離搔体，不是 ”上面段落的下邊距“ 與 ”下面段落的上邊距“ 的 求和 鞠柄，而是兩者中的較大者（在此示例中為30px）。
2.塊級父元素與其第一個/最后一個子元素
如果塊級父元素中嫉柴，不存在上邊框、上內邊距奉呛、內聯(lián)元素计螺、清除浮動這四條屬性（也可以說，當上邊框寬度及上內邊距距離為0時）瞧壮，那么這個塊級元素和其第一個子元素的上邊距就可以說”挨到了一起“登馒。此時這個塊級父元素和其第一個子元素就會發(fā)生上外邊距合并現(xiàn)象，換句話說咆槽，此時這個父元素對外展現(xiàn)出來的外邊距將直接變成這個父元素和其第一個子元素的margin-top的較大者陈轿。
類似的，若塊級父元素的 margin-bottom 與它的最后一個子元素的margin-bottom 之間沒有父元素的 border秦忿、padding麦射、inline content、height灯谣、min-height潜秋、 max-height 分隔時，就會發(fā)生 下外邊距合并現(xiàn)象胎许。
父子外邊距合并示例
<div class=”parent”>
<div class=”child”>
</div>
</div>
.parent{
width: 200px;
height: 100px;
margin-top:10px;
background-color: red;
}
.child{
width: 100px;
height: 100px;
margin-top:30px;
background-color: yellow;
}
這個例子中峻呛，父子元素上邊距就都變成了30px
3.空塊元素
如果存在一個空的塊級元素罗售，其 border、padding钩述、inline content寨躁、height、min-height 都不存在牙勘。那么此時它的上下邊距中間將沒有任何阻隔职恳，此時它的上下外邊距將會合并。例如：
<p style="margin-bottom: 0px;">這個段落的和下面段落的距離將為20px</p>
<div style="margin-top: 20px; margin-bottom: 20px;"></div>
<p style="margin-top: 0px;">這個段落的和上面段落的距離將為20px</p>
BFC會組織外邊距合并,使用bfc就能解決這個問題谜悟。
