1.浮動元素有什么特征掉弛？對父容器戒财、其他浮動元素热监、普通元素、文字分別有什么影響?
- 任何定義為float的元素饮寞，都可以設置寬高孝扛，并且不會自動換行，有點類似于inline-block（但是從開發(fā)者工具中查看幽崩，屬性變?yōu)榱藶?display: block;）
- 浮動元素會從普通文檔流中脫出苦始，從正常的排列順序被抽離
- 設置浮動方向后，元素往左或往右移動直到碰到另一個浮動元素或父元素內(nèi)容區(qū)的邊界
對其父元素的影響
對于其父元素來說慌申，元素浮動之后陌选，它脫離當前正常的文檔流，所以它也無法撐開其父元素，造成父元素的塌陷對其兄弟元素（非浮動）的影響
如果兄弟元素為 塊級元素
在現(xiàn)代瀏覽器和IE8+下柠贤，該元素會忽視浮動元素的而占據(jù)它的位置香浩，并且元素會處在浮動元素的下層（并且無法通過z-index屬性改變他們的層疊位置），但它的內(nèi)部文字和其他行內(nèi)元素都會環(huán)繞浮動元素臼勉。
需要注意的是邻吭，在IE 6、7下則分別都有不同的表現(xiàn)宴霸，IE 6囱晴、7中，該兄弟元素會緊跟在浮動元素的右側(cè)瓢谢，并且在IE6中兩者之間留有3px的空隙畸写。這就是著名的“IE 3px bug如果如果兄弟元素為 內(nèi)聯(lián)元素
則元素會環(huán)繞浮動元素排列對其兄弟元素（浮動）的影響
當一個浮動元素在浮動過程中碰到同一個方向的浮動元素時，它會緊跟在它們后面氓扛，這條浮動的隊列和正常的文檔流隊列也依舊在同一個父元素當中枯芬。對文字的影響
文字會環(huán)繞、包裹浮動元素采郎。
2. 清除浮動指什么? 如何清除浮動? 兩種以上方法
清除浮動指什么
浮動會讓元素脫離文檔流千所，不再影響不浮動的元素，一定程度上蒜埋，給布局帶來了一些副作用淫痰，清除浮動，就是為了解決這些副作用如何清除浮動
運用clear:both/left/right清除浮動
可以在浮動元素末尾添加一個空內(nèi)容帶clear樣式屬性的標簽整份，最常用待错、最有的方式是添加一個帶clear的偽元素觸發(fā)BFC清除浮動
清除子元素浮動，父元素也浮動或者絕對定位觸發(fā)BFC烈评。
overflow屬性值非visiable火俄。
display成非塊級盒子。通用的清理浮動方案
用CSS代碼生成一個具有clear屬性的元素
.clearfix{
*zoom:1;
}
.clearfix:after{
content:"";
display:block;
clear:left;
}
3. 有幾種定位方式础倍，分別是如何實現(xiàn)定位的烛占，參考點是什么，使用場景是什么沟启？
CSS有三種基本的定位機制：普通流忆家，相對定位和絕對定位
普通流
Static
普通流是默認定位方式，在普通流中元素框的位置由元素在html中的位置決定德迹，元素position屬性為static或繼承來的static時就會按照普通流定位芽卿，這也是我們最常見的方式相對定位
Relative
相對定位比較簡單，對應position屬性的relative值胳搞，如果對一個元素進行相對定位卸例，它將出現(xiàn)在他所在的位置上称杨，然后可以通過設置垂直或水平位置，讓這個元素相對于它自己移動筷转，在使用相對定位時姑原，無論元素是否移動，元素在文檔流中占據(jù)原來空間呜舒，只是表現(xiàn)出來的位置會改變絕對定位
Absolute
絕對定位方式锭汛，脫離文檔流，不會占用頁面空間袭蝗。以最近的不是static定位的父級元素作為參考進行定位唤殴，如果其所有的父級元素都是static定位，那么此元素最終則是以當前窗口作為參考進行定位到腥《涫牛可以使用top，bottom乡范，left配名，right進行位置移動，亦可使用z-index在z軸上面進行移動晋辆。當元素為此定位時段誊，如果該元素為內(nèi)聯(lián)元素，則會變?yōu)閴K級元素栈拖，即可以直接設置其寬和高的值；如果該元素為塊級元素没陡，則其寬度會由初始的100%變?yōu)閍uto涩哟。
Fixed
絕對定位方式，直接以瀏覽器窗口作為參考進行定位盼玄。其它特性同absolute定位贴彼。
4. z-index 有什么作用? 如何使用?
z-index屬性指定2個方面的內(nèi)容：
- 元素的堆疊級別。
- 元素的堆疊上下文埃儿。
z-index屬性只能夠應用在display屬性為relative器仗、absolute或fixed的元素上。
z-index屬性有3個可能的取值：
|取值| 描述|
|-||
|auto |設置堆疊的級別為0童番，并且不建立新的堆疊上下文|
|<integer> |設置一個整數(shù)堆疊級別精钮，并且建立一個新的堆疊上下文|
|inherit| 設置和父元素相同的堆疊級別，不建立新的堆疊上下文|
-
堆疊級別
堆疊級別是元素在Z軸上的取值剃斧。值越大轨香，堆疊級別越高，堆疊級別高的元素位于堆疊級別低的元素之上幼东，級別越高的元素越接近屏幕的顯示平面臂容。
理解CSS Z-INDEX屬性作用科雳、使用
如果一個元素沒有指定z-index屬性，那么它的堆疊級別根據(jù)它在文檔樹中的位置來決定脓杉。在文檔樹中糟秘，越后聲明的元素堆疊級別越高。
默認規(guī)則
z-index 為 0 的節(jié)點與沒有定義 z-index 在同一層級內(nèi)沒有高低之分; 但 z-index 大于等于 1 的節(jié)點會遮蓋沒有定義 z-index 的節(jié)點; z-index 的值為負數(shù)的節(jié)點將被沒有定義 z-index 的節(jié)點覆蓋.從父規(guī)則
如果 A, B 節(jié)點都定義了 position:relative, A 節(jié)點的 z-index 比 B 節(jié)點大, 那么 A 的子節(jié)點必定覆蓋在 B 的子節(jié)點前面.
5. position:relative和負margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別
- position：relative球散；只對元素本身有作用尿赚，不影響其它的元素的位置
- margin 會影響周圍元素的位置
6. BFC 是什么？如何生成 BFC沛婴？BFC 有什么作用吼畏？舉例說明
BFC(Box Fomatting Context)
Box:
Box 是 CSS 布局的對象和基本單位， 直觀點來說嘁灯，就是一個頁面是由很多個 Box 組成的泻蚊。元素的類型和 display 屬性，決定了這個 Box 的類型丑婿。 不同類型的 Box性雄， 會參與不同的 Formatting Context（一個決定如何渲染文檔的容器），因此Box內(nèi)的元素會以不同的方式渲染羹奉。
block-level box:display 屬性為 block, list-item, table 的元素秒旋，會生成 block-level box。并且參與 block fomatting context诀拭；
inline-level box:display 屬性為 inline, inline-block, inline-table 的元素迁筛，會生成 inline-level box。并且參與 inline formatting context耕挨；
Formatting context:
Formatting context 是 W3C CSS2.1 規(guī)范中的一個概念细卧。它是頁面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則筒占，它決定了其子元素將如何定位贪庙，以及和其他元素的關系和相互作用。最常見的 Formatting context 有 Block fomatting context (簡稱BFC)和 Inline formatting context (簡稱IFC)翰苫。
CSS2.1 中只有 BFC 和 IFC, CSS3中還增加了 GFC 和 FFC止邮。
BFC 定義:
BFC(Block formatting context)直譯為"塊級格式化上下文"。它是一個獨立的渲染區(qū)域奏窑，只有Block-level box參與导披， 它規(guī)定了內(nèi)部的Block-level Box如何布局，并且與這個區(qū)域外部毫不相干埃唯。
BFC布局規(guī)則:
內(nèi)部的Box會在垂直方向盛卡，一個接一個地放置。
Box垂直方向的距離由margin決定筑凫。屬于同一個BFC的兩個相鄰Box的margin會發(fā)生重疊
每個元素的margin box的左邊滑沧， 與包含塊border box的左邊相接觸(對于從左往右的格式化并村，否則相反)。即使存在浮動也是如此滓技。
BFC的區(qū)域不會與float box重疊哩牍。
BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素令漂。反之也如此膝昆。
計算BFC的高度時，浮動元素也參與計算
如何生成 BFC
一個新的BFC可以通過給容器添加任何一個觸發(fā)BFC的CSS樣式叠必，如overflow: scroll,overflow: hidden,display: flex,float: left,或者display: table來創(chuàng)建荚孵。display:table可能會產(chǎn)生一些問題overflow:scroll可能會顯示不必要的滾動條float:left將會把元素置于容器的左邊，其他元素環(huán)繞著它overflow:hidden將會剪切掉溢出的元素BFC 有什么作用
清除內(nèi)部浮動
我們在布局時經(jīng)常會遇到這個問題：對子元素設置浮動后纬朝，父元素會發(fā)生高度塌陷收叶，也就是父元素的高度變?yōu)?。解決這個問題共苛，只需要把把父元素變成一個BFC就行了判没。常用的辦法是給父元素設置overflow:hidden。-
垂直margin合并
在CSS當中隅茎，相鄰的兩個盒子的外邊距可以結合成一個單獨的外邊距澄峰。這種合并外邊距的方式被稱為折疊，并且因而所結合成的外邊距稱為折疊外邊距辟犀。
折疊的結果：- 兩個相鄰的外邊距都是正數(shù)時俏竞，折疊結果是它們兩者之間較大的值。
- 兩個相鄰的外邊距都是負數(shù)時堂竟，折疊結果是兩者絕對值的較大值胞此。
- 兩個外邊距一正一負時，折疊結果是兩者的相加的和跃捣。
創(chuàng)建自適應兩欄布局
當有一個元素浮動靠向一個普通流元素，浮動元素里的文本會自動環(huán)繞在普通流元素周圍夺蛇，這時候給普通流元素添加特定樣式觸發(fā)BFC后疚漆，文字就不會環(huán)繞了。
7. 在什么場景下會出現(xiàn)外邊距合并刁赦？如何合并娶聘？如何不讓相鄰元素外邊距合并？給個父子外邊距合并的范例
-
相鄰元素
相鄰元素
當兩個元素上下相鄰時甚脉，上面的下外邊距會與下面元素的上外邊距會合并丸升。
如果元素左右相鄰呢？一個典型的場景是幾個inline-block元素并排顯示牺氨。 但inline-block元素的外邊距是不合并的狡耻，它們會保持自己的間隔墩剖。 父子元素
父子元素如果都有上邊距，會合并為其中較大的那一個夷狰。
當然岭皂，只有兩個外邊距直接相鄰時才會合并。如果父元素有內(nèi)邊距（padding）或邊框（border）沼头，那么它們不會被合并爷绘。
-
單個元素
單個元素
如果一個元素沒有內(nèi)容，也沒有內(nèi)邊距和邊框进倍，那么它的上下外邊距也會合并土至。
連續(xù)相鄰的外邊距都是可以合并的。 空元素的上下邊距合并時猾昆，如果緊接著另一個元素的外邊距陶因，它們都會合并到一起。
注釋：只有普通文檔流中塊框的垂直外邊距才會發(fā)生外邊距合并毡庆。行內(nèi)框坑赡、浮動框或絕對定位之間的外邊距不會合并。
- CSS外邊距合并的問題及解決措施
- 設置了的overflow屬性的盒模型么抗，則其與子元素之間的垂直margin不會合并毅否，但其與父元素之間、與相鄰元素之間的margin會合并蝇刀。（overflow取值為visible除外）
- 設置了float屬性的盒模型螟加，則其與相鄰元素之間、其與父元素之間吞琐、其與子元素之間的垂直margin都不會被合并
- 設置了絕對定位position:absolute的盒模型捆探，則其與相鄰元素之間、其與父元素之間站粟、其與子元素之間的垂直margin都不會被合并黍图。（但應注意position:absolute對其后元素的position的影響）
- 設置了display:inline-block的盒模型，則其與相鄰元素之間奴烙、其與父元素之間助被、其與子元素之間的垂直margin都不會被合并。
- 水平margin不會被合并切诀，垂直margin會被合并
- 用內(nèi)層元素的margin通過外層元素的padding代替揩环；
內(nèi)層元素透明邊框 border:20px solid transparent
