文檔流的概念指什么？有哪種方式可以讓元素脫離文檔流?
- 文檔流指窗體自上而下分成一行一行的形式，并且這一行行是從左到右的方式排放元素。
- 絕對(duì)定位和浮動(dòng)可以讓元素脫離文檔流。
清除浮動(dòng)指什么? 如何清除浮動(dòng)? 兩種以上方法
- 清除浮動(dòng)指清除掉元素float屬性
- 三種清除方式
- 添加新的元素并且clear：both（padding不會(huì)受到影響）
HTML:
<div class="outer">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="clear"></div>//添加一個(gè)div
</div>
CSS:
.clear{clear:both; height: 0; line-height: 0; font-size: 0}
- 父級(jí)div定義 overflow: auto（img{display: none}）
HTML:
<div class="outer overflow"> //添加class=overflow
<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; 是在處理兼容性問(wèn)題
注意：overflow有三個(gè)值，auto;hidden;visible。visible無(wú)法清除浮動(dòng)，hidden雖然可以清除浮動(dòng)，但是對(duì)SEO不友好。
- :after 方法：（作用于浮動(dòng)元素的父元素）
.outer {zoom:1;} /*==for IE6/7 Maxthon2==*/
.outer :after {clear:both;content:'.';display:block;width: 0;height: 0;visibility:hidden;} /*==for FF/chrome/opera/IE8==*/
注意：
- clear:both;指清除所有浮動(dòng)，content: '.'; display:block;對(duì)于FF/chrome/opera/IE8不能缺少；visibility:hidden;的作用是允許瀏覽器渲染它，但是不顯示出來(lái)，這樣才能實(shí)現(xiàn)清楚浮動(dòng)。
- 下一標(biāo)簽直接清浮動(dòng)兄弟標(biāo)簽浮動(dòng)時(shí)，在下一標(biāo)簽的屬性中直接寫入清除clear:both;這樣就可以清除以上標(biāo)簽的浮動(dòng)而不用加入空標(biāo)簽來(lái)清除浮動(dòng)。
有幾種定位方式，分別是如何實(shí)現(xiàn)定位的，參考點(diǎn)是什么，使用場(chǎng)景是什么？
- static（默認(rèn)）
當(dāng)你沒(méi)有為一個(gè)元素(例如div)指定定位方式時(shí)，默認(rèn)為static，也就是按照文檔的流式(flow)定位，將元素放到一個(gè)合適的地方。所以在不同的分辨率下，采用流式定位能很好的自適合，取得相對(duì)較好的布局效果。 - relative（相對(duì)定位）
元素框偏移某個(gè)距離（利用top,bottom,left,right）。元素仍保持其未定位前的形狀，它原本所占的空間仍保留。（仍然在文檔流中）。偏移的參考點(diǎn)是相對(duì)于自己本身原來(lái)的位置 - absolute（絕對(duì)定位）
如果你想在一個(gè)文檔(Document)中將一個(gè)元素放至指定位置，可以使用absolute來(lái)定位，將該元素的position設(shè)置為absolute，同時(shí)使用top,bottom,left,right定位。絕對(duì)定位會(huì)脫離文檔流，該元素原來(lái)的空間會(huì)被占據(jù)。absolute定位的參照物是“上一個(gè)定位過(guò)的父元素(static不算)”。 - fixed
元素框的表現(xiàn)類似于將 position 設(shè)置為 absolute，不過(guò)其包含塊是視窗本身。元素定位的參照物總是整個(gè)文檔(viewport) - sticky
CSS3新屬性，表現(xiàn)類似position:relative和position:fixed的合體，在目標(biāo)區(qū)域在屏幕中可見時(shí)，它的行為就像position:relative; 而當(dāng)頁(yè)面滾動(dòng)超出目標(biāo)區(qū)域時(shí)，它的表現(xiàn)就像position:fixed，它會(huì)固定在目標(biāo)位置。（兼容性不好）
普通流與相對(duì)定位
CSS有三種基本的定位機(jī)制：普通流，相對(duì)定位和絕對(duì)定位
普通流是默認(rèn)定位方式，在普通流中元素框的位置由元素在html中的位置決定，元素position屬性為static或繼承來(lái)的static時(shí)就會(huì)按照普通流定位，這也是我們最常見的方式
相對(duì)定位比較簡(jiǎn)單，對(duì)應(yīng)position屬性的relative值，如果對(duì)一個(gè)元素進(jìn)行相對(duì)定位，它將出現(xiàn)在他所在的位置上，然后可以通過(guò)設(shè)置垂直或水平位置，讓這個(gè)元素相對(duì)于它自己移動(dòng)，在使用相對(duì)定位時(shí)，無(wú)論元素是否移動(dòng)，元素在文檔流中占據(jù)原來(lái)空間，只是表現(xiàn)出來(lái)的位置會(huì)改變
普通流
<div style="border: solid 1px #0e0; width:200px;"> <div style="height: 100px; width: 100px; background-color: Red;"> </div> <div style="height: 100px; width: 100px; background-color: Green;"> </div> <div style="height: 100px; width: 100px; background-color: Red;"> </div> </div>
絕對(duì)定位與固定定位
相對(duì)定位可以看作特殊的普通流定位，元素位置是相對(duì)于它在普通流中位置發(fā)生變化，而絕對(duì)定位使元素的位置與文檔流無(wú)關(guān)，也不占據(jù)文檔流空間，普通流中的元素布局就像絕對(duì)定位元素不存在一樣
絕對(duì)定位的元素的位置是相對(duì)于距離最近的非static祖先元素
位置決定的。如果元素沒(méi)有已定位的祖先元素，那么他的位置就相對(duì)于初始包含塊html來(lái)定位demo。
因?yàn)榻^對(duì)定位與文檔流無(wú)關(guān)，所以絕對(duì)定位的元素可以覆蓋頁(yè)面上的其他元素，可以通過(guò)z-index
屬性控制疊放順序，z-index越高，元素位置越靠上。
z-index 有什么作用? 如何使用?
- z-index 屬性設(shè)置元素的堆疊順序。
- 擁有更高堆疊順序的元素總是會(huì)處于堆疊順序較低的元素的前面。
注意：Z-index 僅能在定位元素上奏效（例如 position:absolute;）
position:relative和負(fù)margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別
- position:relative和負(fù)margin都是不脫離文檔流，使得元素發(fā)生偏移，
- position:relative排列后不會(huì)對(duì)周圍元素的排列發(fā)生影響，而負(fù)margin排列后會(huì)對(duì)文檔流中的頁(yè)面布局產(chǎn)生影響。前者無(wú)論如何定位，元素所占區(qū)域大小不變，而后者隨著margin的值的變化，元素所占頁(yè)面的區(qū)域也在變化。
- position:relative可以調(diào)整定位元素的z-index層級(jí)，而負(fù)margin不能；
- position：relative主要配合絕對(duì)定位對(duì)頁(yè)面進(jìn)行版塊布局方面的定位，而負(fù)margin主要用于小的細(xì)節(jié)方面的位置調(diào)整。
BFC 是什么？如何生成 BFC？BFC 有什么作用？舉例說(shuō)明
BFC的全稱是 Block Format Content是Web頁(yè)面中盒模型布局的CSS渲染模式。它的定位體系屬于常規(guī)文檔流。
當(dāng)涉及到可視化布局的時(shí)候，Block Formatting Context提供了一個(gè)環(huán)境，HTML元素在這個(gè)環(huán)境中按照一定規(guī)則進(jìn)行布局。一個(gè)環(huán)境中的元素不會(huì)影響到其它環(huán)境中的布局。
例子：觸發(fā)main生成BFC后，這個(gè)新的BFC不會(huì)與浮動(dòng)的aside重疊。因此會(huì)根據(jù)包含塊的寬度，和aside的寬度，自動(dòng)變窄.
在什么場(chǎng)景下會(huì)出現(xiàn)外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個(gè)父子外邊距合并的范例
- 外邊距合并：外邊距合并指的是，當(dāng)兩個(gè)垂直外邊距相遇時(shí)，它們將形成一個(gè)外邊距。合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。
![Uploading P[K785TQ9DZ2%3Y1X@68L]I_454154.png . . .]
外邊距合并產(chǎn)生條件：
（1）.相鄰的外邊距之間沒(méi)有非空內(nèi)容、padding或者border。
（2）.元素都處于文檔流中，即非浮動(dòng)和position屬性值不為absolute和fixed的元素。
同時(shí)如果是元素是父子關(guān)系，子元素的padding和border并不能夠消除合并現(xiàn)象。合并可以存在于兄弟對(duì)象之間，也可以存在于父子對(duì)象之間，-
如何合并：具體查看w3c
1.情況一：普通外邊距合并 （注意：兩個(gè) div 之間的外邊距是 20px，而不是 30px（20px + 10px）。）
Paste_Image.png
2.當(dāng)一個(gè)元素包含在另一個(gè)元素中時(shí)（假設(shè)沒(méi)有內(nèi)邊距或邊框把外邊距分隔開），它們的上和/或下外邊距也會(huì)發(fā)生合并
注意：如果不設(shè)置 div 的內(nèi)邊距和邊框，那么內(nèi)部 div 的上外邊距將與外部 div 的上外邊距合并（疊加）。
盡管看上去有些奇怪，但是外邊距甚至可以與自身發(fā)生合并。
假設(shè)有一個(gè)空元素，它有外邊距，但是沒(méi)有邊框或填充。在這種情況下，上外邊距與下外邊距就碰到了一起，它們會(huì)發(fā)生合并：
如果這個(gè)外邊距遇到另一個(gè)元素的外邊距，它還會(huì)發(fā)生合并：
這就是一系列的段落元素占用空間非常小的原因，因?yàn)樗鼈兊乃型膺吘喽己喜⒌揭黄穑纬闪艘粋€(gè)小的外邊距。
外邊距合并初看上去可能有點(diǎn)奇怪，但是實(shí)際上，它是有意義的。以由幾個(gè)段落組成的典型文本頁(yè)面為例。第一個(gè)段落上面的空間等于段落的上外邊距。如果沒(méi)有外邊距合并，后續(xù)所有段落之間的外邊距都將是相鄰上外邊距和下外邊距的和。這意味著段落之間的空間是頁(yè)面頂部的兩倍。如果發(fā)生外邊距合并，段落之間的上外邊距和下外邊距就合并在一起，這樣各處的距離就一致了。
- 如何不讓相鄰元素外邊距合并？給個(gè)父子外邊距合并的范例
- 父子元素之間的外邊據(jù)合并
方式一：給父元素加邊框
- 父子元素之間的外邊據(jù)合并
方式二：給父元素加padding
