問答
1.浮動(dòng)元素有什么特征？對(duì)父容器、其他浮動(dòng)元素、普通元素、文字分別有什么影響?
- 浮動(dòng)元素的特征：
- 文字環(huán)繞浮動(dòng)元素。
- 脫離文檔流、不占位置。
- 任何定義為float的元素都會(huì)自動(dòng)被設(shè)置為一個(gè)塊狀元素顯示，相當(dāng)于被定義display：block；聲明。這樣就可以為浮動(dòng)元素定義width和height屬性，即使是內(nèi)聯(lián)顯示元素也可以。
- 當(dāng)我們沒有指定浮動(dòng)元素寬度時(shí)，浮動(dòng)元素會(huì)自動(dòng)收縮到能夠包含內(nèi)容的寬度。
- 當(dāng)兩個(gè)或兩個(gè)以上的相鄰元素都被定義為浮動(dòng)顯示時(shí)，如果存在足夠的空間容納它們，浮動(dòng)元素之間可以并列顯示，它們的上邊線是在同一水平線上。如果沒有足夠空間那么后面的浮動(dòng)元素將會(huì)下移到能夠容納它的地方這個(gè)向下移動(dòng)的元素有可能產(chǎn)生一個(gè)單獨(dú)的浮動(dòng)。
- 浮動(dòng)元素的影響：
- 普通元素：普通元素將會(huì)占據(jù)其原來的位置，后面的浮動(dòng)元素會(huì)浮在普通元素之上。
- 文字：文字會(huì)環(huán)繞浮動(dòng)元素顯示。
- 對(duì)其它浮動(dòng)元素：從左到右，從上到下排列。
- 當(dāng)元素沒有設(shè)置寬度值，而設(shè)置了浮動(dòng)屬性，元素的寬度隨內(nèi)容的寬度的變化而變化。
- 當(dāng)一個(gè)包含框中的元素全設(shè)置了浮動(dòng)時(shí)，該包含框會(huì)出現(xiàn)“高度塌陷”現(xiàn)象。
- 浮動(dòng)的元素會(huì)脫離普通流，因此文檔流中的塊框會(huì)無視浮動(dòng)的元素，但是文本不會(huì)。
- inline元素設(shè)置浮動(dòng)，會(huì)改變inline的display使得它像個(gè)block-level。
2.清除浮動(dòng)指什么? 如何清除浮動(dòng)?
- 清除浮動(dòng)：當(dāng)一個(gè)容器里的內(nèi)容浮動(dòng)時(shí)，容器的高度不能自動(dòng)伸長(zhǎng)以適應(yīng)內(nèi)容的高度，會(huì)使得內(nèi)容溢出到容器外面而影響布局。清除浮動(dòng)就是指消除浮動(dòng)所帶來的這種影響。
- 如何清楚浮動(dòng)：
方法一：添加新的元素 、應(yīng)用 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>方法二：父級(jí)div定義 overflow: auto / hidden
<pre>
HTML:
<div class="outer over-flow"> //這里添加了一個(gè)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.有幾種定位方式，分別是如何實(shí)現(xiàn)定位的，參考點(diǎn)是什么，使用場(chǎng)景是什么？
- static: 默認(rèn)值。沒有定位，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。
- inherit: 規(guī)定應(yīng)該從父元素繼承 position 屬性的值。
- relative: 生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位。
如果我想讓一個(gè)元素在他本來的位置做一些調(diào)整(位移)，我們可以將該元素定位設(shè)置為relative，同時(shí)指定相對(duì)位移(利用top,bottom,left,right)。
有一點(diǎn)需要注意的是，相對(duì)定位的元素仍然在文檔流中，仍然占據(jù)著他本來占據(jù)的位置空間。 - absolute： 生成絕對(duì)定位的元素，相對(duì)于 static 定位以外的第一個(gè)父元素進(jìn)行定位。
如果你想在一個(gè)文檔(Document)中將一個(gè)元素放至指定位置，你可以使用absolute來定位。
如果沒有定位父元素，位置是相對(duì)于body來進(jìn)行的。
絕對(duì)定位會(huì)使元素脫離文檔流中，結(jié)果就是該元素原本占據(jù)的空間被其它元素所填充。 - fixed: 生成絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位。
利用fixed定位，我們很容易讓一個(gè)div定位在窗口任意方位。 - 注意:如果同時(shí)定義了left和right值，且width和height有值，那么left生效，right無效，同樣，同時(shí)定義了top和bottom，top生效。
4.z-index 有什么作用? 如何使用?
- 概念：
1.在 CSS 2.1中, 所有的盒模型元素都處于三維坐標(biāo)系中。 除了我們常用的橫坐標(biāo)和縱坐標(biāo)， 盒模型元素還可以沿著“z軸”層疊擺放， 當(dāng)他們相互覆蓋時(shí)， z軸順序就變得十分重要。
2.這意味著其實(shí)CSS允許你在現(xiàn)有的渲染引擎上層疊的擺放盒模型元素。 所有的層都可以用一個(gè)整數(shù)(z軸順序)來表明當(dāng)前層在z軸的位置。 數(shù)字越大， 元素越接近觀察者。Z軸順序用CSS的z-index屬性來指定。 - z-index 屬性設(shè)置元素的堆疊順序。擁有更高堆疊順序的元素總是會(huì)處于堆疊順序較低的元素的前面。
- Z-index 僅能在定位元素上奏效（position屬性值為 relative 或 absolute 或 fixed的對(duì)象）！
- 相同z-index誰上誰下
1.如果兩個(gè)元素都沒有定位發(fā)生位置重合現(xiàn)象或者兩個(gè)都已定位元素且z-index相同發(fā)生位置重合現(xiàn)象，那么按文檔流順序，后面的覆蓋前面的。
2.如果兩個(gè)元素都沒有設(shè)置z-index，使用默認(rèn)值，一個(gè)定位一個(gè)沒有定位，那么定位元素覆蓋未定位元素 - 父子關(guān)系處理
1.如果父元素z-index有效，那么子元素?zé)o論是否設(shè)置z-index都和父元素一致，會(huì)在父元素上方
2.如果父元素z-index失效（未定位或者使用默認(rèn)值），那么定位子元素的z-index設(shè)置生效 - Z-index默認(rèn)值為auto,則不建立層疊上下文。設(shè)置為0則會(huì)建立層疊上下文。
- 使用：未使用Z-index的情況 , 使用后
5.position:relative和負(fù)margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別
- 使用position:relative將元素偏移后，其他的元素的位置則不會(huì)受該元素的影響發(fā)生位置改變來彌補(bǔ)它偏離后剩下的空間。
- 使用負(fù)margin使位置偏離后，其它元素將會(huì)彌補(bǔ)它偏離后的空間。
6. BFC 是什么？如何生成 BFC？BFC 有什么作用？
- 概念
Formatting context（格式化上下文） 是 W3C CSS2.1 規(guī)范中的一個(gè)概念。它是頁面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則，它決定了其子元素將如何定位，以及和其他元素的關(guān)系和相互作用。最常見的 Formatting context 有 Block fomatting context (簡(jiǎn)稱BFC)和 Inline formatting context (簡(jiǎn)稱IFC)。
CSS2.1 中只有 BFC 和 IFC, CSS3 中還增加了 GFC 和 FFC。 - 如何生成BFC
1.根元素(整個(gè)頁面就是一個(gè)大的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ī)則，同一個(gè)BFC中的相鄰塊級(jí)元素垂直方向的margin會(huì)重疊，故要解決margin重疊問題，只需要讓兩個(gè)塊級(jí)元素處于不同的BFC就ok了。
實(shí)例
2、左右兩欄布局: BFC布局規(guī)則第4條規(guī)定：BFC的區(qū)域不會(huì)與float box重疊。
實(shí)例
3、清理內(nèi)部浮動(dòng)：如果父元素不浮動(dòng)，而子元素都浮動(dòng)的話，那么父元素就無法自動(dòng)撐開。解決這個(gè)問題可以讓父類元素形成BFC，因?yàn)楦鶕?jù)BFC布局規(guī)則第6條得知，BFC計(jì)算高度時(shí)會(huì)把其內(nèi)部浮動(dòng)子元素的高度也計(jì)算在內(nèi)。
實(shí)例
4、內(nèi)層div的上下margin并不會(huì)撐開外層div，反而會(huì)使得外層div距離頂部和底部的距離增加?？梢允雇鈱觗iv形成BFC來解決嵌套元素邊距疊加的問題。
實(shí)例
7.在什么場(chǎng)景下會(huì)出現(xiàn)外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？
概念：
外邊距合并是CSS中一個(gè)特殊的概念。當(dāng)兩個(gè)外邊距相鄰時(shí)，它們會(huì)合并為較大的那一個(gè)。 包括相鄰元素的上下邊距，父子元素的上下邊距，甚至是同一元素的上下邊距。
父子外邊距合并范例外邊距合并場(chǎng)景：
1.毗鄰的兩個(gè)兄弟元素之間的外邊距會(huì)塌陷；
2.如果塊級(jí)父元素中，不存在上邊框、上內(nèi)邊距、內(nèi)聯(lián)元素、清除浮動(dòng)這四條屬性（也可以說，當(dāng)上邊框?qū)挾燃吧蟽?nèi)邊距距離為0時(shí)），那么此時(shí)這個(gè)塊級(jí)父元素和其第一個(gè)子元素就會(huì)發(fā)生上外邊距合并現(xiàn)象，換句話說，此時(shí)這個(gè)父元素對(duì)外展現(xiàn)出來的外邊距將直接變成這個(gè)父元素和其第一個(gè)子元素的margin-top的較大者。
3.類似的，若塊級(jí)父元素的margin-bottom與它的最后一個(gè)子元素的margin-bottom 之間沒有父元素的border、padding、inline content、height、min-height、max-height分隔時(shí)，就會(huì)發(fā)生 下外邊距合并 現(xiàn)象。
4.如果存在一個(gè)空的塊級(jí)元素，其border、padding、inline content、height、min-height、max-height都不存在。那么此時(shí)它的上下邊距中間將沒有任何阻隔，此時(shí)它的上下外邊距將會(huì)合并。合并規(guī)則：
1.兩個(gè)margin都是正值的時(shí)候，取兩者的最大值；
2.當(dāng) margin 都是負(fù)值的時(shí)候，取的是其中絕對(duì)值較大的，然后，從0位置，負(fù)向位移；
3.當(dāng)有正有負(fù)的時(shí)候，先取出負(fù) margin 中絕對(duì)值中最大的，然后，和正 margin 值中最大的 margin 相加。
4.所有毗鄰的margin要一起參與運(yùn)算，不能分步進(jìn)行。解決方案：
1、給父元素添加padding或border。
2、讓其中一個(gè)元素生成BFC。
3、被非空內(nèi)容、padding、border 或 clear 分隔開。
4、margin在垂直方向上不毗鄰。
