問答
1.浮動元素有什么特征勋陪？對父容器、其他浮動元素硫兰、普通元素诅愚、文字分別有什么影響?
- 浮動元素的特征：
- 文字環(huán)繞浮動元素。
- 脫離文檔流劫映、不占位置违孝。
- 任何定義為float的元素都會自動被設置為一個塊狀元素顯示，相當于被定義display：block泳赋；聲明雌桑。這樣就可以為浮動元素定義width和height屬性，即使是內聯(lián)顯示元素也可以祖今。
- 當我們沒有指定浮動元素寬度時校坑，浮動元素會自動收縮到能夠包含內容的寬度。
- 當兩個或兩個以上的相鄰元素都被定義為浮動顯示時千诬，如果存在足夠的空間容納它們耍目，浮動元素之間可以并列顯示，它們的上邊線是在同一水平線上徐绑。如果沒有足夠空間那么后面的浮動元素將會下移到能夠容納它的地方這個向下移動的元素有可能產生一個單獨的浮動邪驮。
- 浮動元素的影響：
- 普通元素：普通元素將會占據(jù)其原來的位置，后面的浮動元素會浮在普通元素之上傲茄。
- 文字：文字會環(huán)繞浮動元素顯示毅访。
- 對其它浮動元素：從左到右，從上到下排列盘榨。
- 當元素沒有設置寬度值喻粹，而設置了浮動屬性，元素的寬度隨內容的寬度的變化而變化草巡。
- 當一個包含框中的元素全設置了浮動時磷斧，該包含框會出現(xiàn)“高度塌陷”現(xiàn)象。
- 浮動的元素會脫離普通流捷犹，因此文檔流中的塊框會無視浮動的元素弛饭，但是文本不會。
- inline元素設置浮動萍歉，會改變inline的display使得它像個block-level侣颂。
2.清除浮動指什么? 如何清除浮動?
- 清除浮動：當一個容器里的內容浮動時，容器的高度不能自動伸長以適應內容的高度枪孩，會使得內容溢出到容器外面而影響布局憔晒。清除浮動就是指消除浮動所帶來的這種影響藻肄。
- 如何清楚浮動：
方法一：添加新的元素 、應用 clear：both拒担；
<pre>
HTML:
<div class="outer">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="clear"></div>
</div>
CSS:
.clear{clear:both; height: 0; line-height: 0; font-size: 0}
</pre>方法二：父級div定義 overflow: auto / hidden
<pre>
HTML:
<div class="outer over-flow"> //這里添加了一個class
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
</div>
CSS:
.over-flow{
overflow: auto;
zoom: 1; //zoom: 1; 是在處理兼容性問題
}
</pre>方法三：偽元素法嘹屯；
<pre>
HTML:
<div class="outer">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
</div>
CSS:
.outer{
zoom: 1;
} //兼容ie
.outer::after {
content:'';
display:block;
width: 0;
height: 0;
clear:both;
}
</pre>
3.有幾種定位方式，分別是如何實現(xiàn)定位的从撼，參考點是什么州弟，使用場景是什么？
- static: 默認值低零。沒有定位婆翔，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。
- inherit: 規(guī)定應該從父元素繼承 position 屬性的值掏婶。
- relative: 生成相對定位的元素啃奴，相對于其正常位置進行定位。
如果我想讓一個元素在他本來的位置做一些調整(位移)雄妥，我們可以將該元素定位設置為relative最蕾，同時指定相對位移(利用top,bottom,left,right)。
有一點需要注意的是老厌，相對定位的元素仍然在文檔流中瘟则，仍然占據(jù)著他本來占據(jù)的位置空間。 - absolute： 生成絕對定位的元素梅桩，相對于 static 定位以外的第一個父元素進行定位壹粟。
如果你想在一個文檔(Document)中將一個元素放至指定位置拜隧，你可以使用absolute來定位宿百。
如果沒有定位父元素，位置是相對于body來進行的洪添。
絕對定位會使元素脫離文檔流中垦页，結果就是該元素原本占據(jù)的空間被其它元素所填充。 - fixed: 生成絕對定位的元素干奢，相對于瀏覽器窗口進行定位痊焊。
利用fixed定位，我們很容易讓一個div定位在窗口任意方位忿峻。 - 注意:如果同時定義了left和right值薄啥，且width和height有值，那么left生效逛尚，right無效垄惧，同樣，同時定義了top和bottom绰寞，top生效到逊。
4.z-index 有什么作用? 如何使用?
- 概念：
1.在 CSS 2.1中, 所有的盒模型元素都處于三維坐標系中铣口。 除了我們常用的橫坐標和縱坐標， 盒模型元素還可以沿著“z軸”層疊擺放觉壶， 當他們相互覆蓋時脑题， z軸順序就變得十分重要。
2.這意味著其實CSS允許你在現(xiàn)有的渲染引擎上層疊的擺放盒模型元素铜靶。 所有的層都可以用一個整數(shù)(z軸順序)來表明當前層在z軸的位置叔遂。 數(shù)字越大， 元素越接近觀察者旷坦。Z軸順序用CSS的z-index屬性來指定掏熬。 - z-index 屬性設置元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面秒梅。
- Z-index 僅能在定位元素上奏效（position屬性值為 relative 或 absolute 或 fixed的對象）旗芬！
- 相同z-index誰上誰下
1.如果兩個元素都沒有定位發(fā)生位置重合現(xiàn)象或者兩個都已定位元素且z-index相同發(fā)生位置重合現(xiàn)象，那么按文檔流順序捆蜀，后面的覆蓋前面的疮丛。
2.如果兩個元素都沒有設置z-index，使用默認值辆它，一個定位一個沒有定位誊薄，那么定位元素覆蓋未定位元素 - 父子關系處理
1.如果父元素z-index有效，那么子元素無論是否設置z-index都和父元素一致锰茉，會在父元素上方
2.如果父元素z-index失效（未定位或者使用默認值）呢蔫，那么定位子元素的z-index設置生效 - Z-index默認值為auto,則不建立層疊上下文。設置為0則會建立層疊上下文飒筑。
- 使用：未使用Z-index的情況 , 使用后
5.position:relative和負margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別
- 使用position:relative將元素偏移后片吊，其他的元素的位置則不會受該元素的影響發(fā)生位置改變來彌補它偏離后剩下的空間。
- 使用負margin使位置偏離后协屡，其它元素將會彌補它偏離后的空間俏脊。
6. BFC 是什么？如何生成 BFC肤晓？BFC 有什么作用爷贫？
- 概念
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
1.根元素(整個頁面就是一個大的BFC)
2.float屬性不為none
3.position為absolute或fixed
4.display為inline-block, table-cell, table-caption, flex, inline-flex
5.overflow不為visible - BFC的作用
1威酒、防止margin重疊：根據(jù)BFC布局規(guī)則窑睁，同一個BFC中的相鄰塊級元素垂直方向的margin會重疊挺峡，故要解決margin重疊問題，只需要讓兩個塊級元素處于不同的BFC就ok了担钮。
實例
2橱赠、左右兩欄布局: BFC布局規(guī)則第4條規(guī)定：BFC的區(qū)域不會與float box重疊。
實例
3箫津、清理內部浮動：如果父元素不浮動狭姨，而子元素都浮動的話，那么父元素就無法自動撐開苏遥。解決這個問題可以讓父類元素形成BFC饼拍，因為根據(jù)BFC布局規(guī)則第6條得知，BFC計算高度時會把其內部浮動子元素的高度也計算在內田炭。
實例
4师抄、內層div的上下margin并不會撐開外層div，反而會使得外層div距離頂部和底部的距離增加教硫∵端保可以使外層div形成BFC來解決嵌套元素邊距疊加的問題。
實例
7.在什么場景下會出現(xiàn)外邊距合并瞬矩？如何合并茶鉴？如何不讓相鄰元素外邊距合并？
概念：
外邊距合并是CSS中一個特殊的概念景用。當兩個外邊距相鄰時涵叮，它們會合并為較大的那一個。 包括相鄰元素的上下邊距伞插，父子元素的上下邊距割粮，甚至是同一元素的上下邊距。
父子外邊距合并范例外邊距合并場景：
1.毗鄰的兩個兄弟元素之間的外邊距會塌陷蜂怎；
2.如果塊級父元素中穆刻，不存在上邊框置尔、上內邊距杠步、內聯(lián)元素、清除浮動這四條屬性（也可以說榜轿，當上邊框寬度及上內邊距距離為0時）幽歼，那么此時這個塊級父元素和其第一個子元素就會發(fā)生上外邊距合并現(xiàn)象，換句話說谬盐，此時這個父元素對外展現(xiàn)出來的外邊距將直接變成這個父元素和其第一個子元素的margin-top的較大者甸私。
3.類似的，若塊級父元素的margin-bottom與它的最后一個子元素的margin-bottom 之間沒有父元素的border飞傀、padding皇型、inline content诬烹、height、min-height弃鸦、max-height分隔時绞吁，就會發(fā)生 下外邊距合并 現(xiàn)象。
4.如果存在一個空的塊級元素唬格，其border家破、padding、inline content购岗、height汰聋、min-height、max-height都不存在喊积。那么此時它的上下邊距中間將沒有任何阻隔烹困，此時它的上下外邊距將會合并。合并規(guī)則：
1.兩個margin都是正值的時候乾吻，取兩者的最大值韭邓；
2.當 margin 都是負值的時候，取的是其中絕對值較大的溶弟，然后女淑，從0位置，負向位移辜御；
3.當有正有負的時候鸭你，先取出負 margin 中絕對值中最大的，然后擒权，和正 margin 值中最大的 margin 相加袱巨。
4.所有毗鄰的margin要一起參與運算，不能分步進行碳抄。解決方案：
1愉老、給父元素添加padding或border。
2剖效、讓其中一個元素生成BFC嫉入。
3、被非空內容璧尸、padding咒林、border 或 clear 分隔開。
4爷光、margin在垂直方向上不毗鄰垫竞。
