1.浮動元素有什么特征？對父容器纬傲、其他浮動元素、普通元素肤频、文字分別有什么影響?

浮動元素

浮動元素是設(shè)置float為非none值的元素叹括，這時該元素會自動被設(shè)置成塊元素，可以設(shè)置寬度宵荒、高度以及邊距汁雷。浮動元素，顧名思義报咳，使該元素浮動在其他元素之上侠讯，離開了原來的文檔流，直到浮動到父元素的左右邊距（上下邊距不受限制）或者左暑刃、右方遇到其他設(shè)置了float的元素厢漩。而其附近設(shè)置的浮動元素會跟其邊距相鄰，表面上跟內(nèi)聯(lián)元素似的岩臣。而非浮動元素則相對復(fù)雜一些溜嗜，分一下兩種情況：浮動元素后邊的元素若是非浮動行內(nèi)元素且因為定位產(chǎn)生重疊時柴底，行內(nèi)元素邊框、背景和內(nèi)容都在該浮動元素“之上”顯示粱胜，若是非浮動塊級元素跟在浮動元素后邊且在定位后產(chǎn)生重疊時，該塊級元素邊框和背景在該浮動元素“之下”顯示狐树，只有內(nèi)容在浮動元素不在非浮動元素的部分顯示焙压。

• 浮動元素會脫離正常的文檔流，按照其外邊距指定的位置相對于它的上一個塊級元素（或父元素）顯示抑钟；

image.png

• 浮動元素后面的塊級元素的內(nèi)容會向此浮動元素的外邊距靠齊涯曲，但是邊框和背景卻忽略浮動元素而向上一個（實例中為父元素）任意非浮動元素靠齊；

image.png

• 浮動元素后面的內(nèi)聯(lián)元素會向此浮動元素的外邊距靠齊在塔。

image.png

浮動元素的影響

• 對其父元素的影響：
  • 對于其父元素來說幻件，元素浮動之后，它脫離當(dāng)前正常的文檔流蛔溃，所以它也無法撐開其父元素绰沥，造成父元素的塌陷
• 對其兄弟元素（非浮動）的影響
  • 如果兄弟元素為塊級元素，該元素會忽視浮動元素的而占據(jù)它的位置贺待，并且元素會處在浮動元素的下層（并且無法通過z-index屬性改變他們的層疊位置），但它的內(nèi)部文字和其他行內(nèi)元素都會環(huán)繞浮動元素麸塞。
  • 如果如果兄弟元素為內(nèi)聯(lián)元素秃臣，則元素會環(huán)繞浮動元素排列。
• 對其兄弟元素（浮動）的影響
  • 同一個方向的浮動元素：當(dāng)一個浮動元素在浮動過程中碰到同一個方向的浮動元素時哪工，它會緊跟在它們后面奥此。
  • 反方向的浮動元素：互不影響，位于同一條水平線上雁比，當(dāng)空間不夠時會被擠下稚虎。
• 對子元素的影響
  • 當(dāng)一個元素浮動時，在沒有清除浮動的情況下偎捎，它無法撐開其父元素祥绞，但它可以讓自己的浮動子元素?fù)伍_它自身，并且在沒有定義具體寬度情況下鸭限，使自身的寬度從100%變?yōu)樽赃m應(yīng)（浮動元素display:block）蜕径。其高度和寬度均為浮動元素高度、寬度和非浮動元素高度败京、寬度之間的最大值兜喻。

2.清除浮動指什么? 如何清除浮動? 兩種以上方法

浮動

浮動：一般是一個盒子里使用了CSS float浮動屬性，導(dǎo)致父級對象盒子不能被撐開

清除浮動的方法

• 1.給浮動的元素的祖先元素加上高度
  • 只要浮動在一個有高度的盒子中,那么這個浮動就不會影響后面的浮動元素.所以就是清除浮動帶來的影響了赡麦。
• 2.添加新的元素 朴皆、應(yīng)用 clear：both

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}

（糾正： padding不會受影響）

• 3.父級div定義 overflow非 visible

 HTML：
<div class="outer over-flow"> //這里添加了一個class
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
    <!--<div class="clear"></div>-->
</div>

CSS：
.over-flow{
    overflow: auto; zoom: 1; //zoom: 1; 是在處理兼容性問題
}

• 4.:after 方法

.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==*/

3.有幾種定位方式帕识，分別是如何實現(xiàn)定位的，參考點是什么遂铡，使用場景是什么肮疗？

static(默認(rèn))

• 當(dāng)你沒有為一個元素(例如div)指定定位方式時，默認(rèn)為static扒接，也就是按照文檔的流式(flow)定位伪货，將元素放到一個合適的地方。所以在不同的分辨率下钾怔，采用流式定位能很好的自適合碱呼，取得相對較好的布局效果。
• 一般來說宗侦，我們不需要指明當(dāng)前元素的定位方式是static——因為這是默認(rèn)的定位方式愚臀。除非你想覆蓋從父元素繼承來的定位系統(tǒng)。

relative(相對定位)

• 在static的基礎(chǔ)上矾利，如果我想讓一個元素在他本來的位置做一些調(diào)整(位移)姑裂，我們可以將該元素定位設(shè)置為relative，同時指定相對位移(利用top,bottom,left,right)男旗。
• 有一點需要注意的是炭分，相對定位的元素仍然在文檔流中，仍然占據(jù)著他本來占據(jù)的位置空間——雖然他現(xiàn)在已經(jīng)不在本來的位置了剑肯。

absolute(絕對定位)

• 如果你想在一個文檔(Document)中將一個元素放至指定位置捧毛，你可以使用absolute來定位，將該元素的position設(shè)置為absolute让网，同時使用top,bottom,left,right來定位呀忧。
• 絕對定位會使元素從文檔流中被刪除，結(jié)果就是該元素原本占據(jù)的空間被其它元素所填充溃睹。

fixed(固定定位)

• 我們知道absolute定位的參照物是“上一個定位過的父元素(static不算)”而账，那么如果我想讓一個元素定位的參照物總是整個文檔(viewport)，怎么辦呢因篇？答案是使用fixed定位泞辐，fixed定位的參照物總是當(dāng)前的文檔。利用fixed定位竞滓，我們很容易讓一個div定位在瀏覽器文檔的左上商佑，右上等方位。比如你想添加一個信息提示的div晚碾，并將該div固定在右上方喂急，你可以使用以下css
  .element { position:fixed; top:2%; right:2%; }

float(浮動)

mix relative and absolute(混合相對定位和絕對定位)

• 如果對一個父元素設(shè)置relative糕簿，而對它的一個子元素設(shè)置absolute,則子元素的絕對定位的參照物為父元素。

reference

4.z-index 有什么作用? 如何使用?

z-index

• z-index 屬性設(shè)置元素的堆疊順序步氏。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面荚醒。

z-index

• 層級關(guān)系的比較
  • 對于同級元素界阁，默認(rèn)(或position:static)情況下文檔流后面的元素會覆蓋前面的泡躯。
  • 對于同級元素丽焊，position不為static且z-index存在的情況下z-index大的元素會覆蓋z-index小的元素，即z-index越大優(yōu)先級越高写穴。
  • IE6/7下position不為static啊送，且z-index不存在時z-index為0馋没，除此之外的瀏覽器z-index為auto披泪。
  • z-index為auto的元素不參與層級關(guān)系的比較款票，由向上遍歷至此且z-index不為auto的元素來參與比較艾少。
• 順序規(guī)則
  • 如果不對節(jié)點設(shè)定 position 屬性幔妨，位于文檔流后面的節(jié)點會遮蓋前面的節(jié)點误堡。
• 定位規(guī)則
  • 如果將 position 設(shè)為 static雏吭，位于文檔流后面的節(jié)點依然會遮蓋前面的節(jié)點浮動，所以 position:static 不會影響節(jié)點的遮蓋關(guān)系杖们。
  • 如果將 position 設(shè)為 relative (相對定位)，absolute (絕對定位) 或者 fixed (固定定位)摘完，這樣的節(jié)點會覆蓋沒有設(shè)置 position 屬性或者屬性值為 static 的節(jié)點，說明前者比后者的默認(rèn)層級高孝治。
  • 在沒有 z-index 屬性干擾的情況下, 根據(jù)這順序規(guī)則和定位規(guī)則, 我們可以做出更加復(fù)雜的結(jié)構(gòu). 這里我們對 A 和 B 都不設(shè)定 position, 但對 A 的子節(jié)點 A-1 設(shè)定 position:relative. 根據(jù)順序規(guī)則, B 會覆蓋 A, 又根據(jù)定位規(guī)則 A' 會覆蓋 B.

html
<div id="a">
       <div id="a-1" style="position:relative;">A-1</div>
</div>
<div id="b">B</div>

image.png

• 參與規(guī)則
  • 不用 position 屬性, 但為節(jié)點加上 z-index 屬性. 發(fā)現(xiàn) z-index 對節(jié)點沒起作用. z-index 屬性僅在節(jié)點的 position 屬性為 relative, absolute 或者 fixed 時生效.
• 默認(rèn)值規(guī)則
  • 如果所有節(jié)點都定義了 position:relative. z-index 為 0 的節(jié)點與沒有定義 z-index 在同一層級內(nèi)沒有高低之分; 但 z-index 大于等于 1 的節(jié)點會遮蓋沒有定義 z-index 的節(jié)點; z-index 的值為負(fù)數(shù)的節(jié)點將被沒有定義 z-index 的節(jié)點覆蓋.
• 從父規(guī)則
  （1）如果 A, B 節(jié)點都定義了 position:relative, A 節(jié)點的 z-index 比 B 節(jié)點大, 那么 A 的子節(jié)點必定覆蓋在 B 的子節(jié)點前面.

<div id="a" style="position:relative;z-index:1;">
        <div id="a-1">A-1</div>
</div>
<div id="b" style="position:relative;z-index:0;">
        <div id="b-1">B-1</div>
</div>

image.png

（2）如果所有節(jié)點都定義了 position:relative, A 節(jié)點的 z-index 和 B 節(jié)點一樣大, 但因為順序規(guī)則, B 節(jié)點覆蓋在 A 節(jié)點前面. 就算 A 的子節(jié)點 z-index 值比 B 的子節(jié)點大, B 的子節(jié)點還是會覆蓋在 A 的子節(jié)點前面.

image.png

5.position:relative和負(fù)margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別

position:relative

• 在static的基礎(chǔ)上，如果我想讓一個元素在他本來的位置做一些調(diào)整(位移)谈飒，我們可以將該元素定位設(shè)置為relative篱竭，同時指定相對位移(利用top,bottom,left,right)步绸。
• 相對定位的元素仍然在文檔流中瓤介，仍然占據(jù)著他本來占據(jù)的位置空間——雖然他現(xiàn)在已經(jīng)不在本來的位置了刑桑。

負(fù)margin

• 使元素位置偏移祠斧，使元素在文檔流中的位置發(fā)生了改變，其后的元素受其影響呢灶。

6.BFC 是什么？如何生成 BFC钉嘹？BFC 有什么作用鸯乃？舉例說明

BFC--塊級格式化上下文

BFC--塊級格式化上下文

7.在什么場景下會出現(xiàn)外邊距合并？如何合并跋涣？如何不讓相鄰元素外邊距合并缨睡？給個父子外邊距合并的范例

BFC--塊級格式化上下文

BFC--塊級格式化上下文

margin重疊 ：

• margin參數(shù)：上右下左（4個值），其他：四個邊距兩兩對稱陈辱，比如3個值時奖年，分別對應(yīng)上右下， 左邊邊距和右邊值一樣沛贪。

• margin折疊結(jié)果：

  • 兩個相鄰的外邊距都是正數(shù)時陋守，折疊結(jié)果是它們兩者之間較大的值。
  • 兩個相鄰的外邊距都是負(fù)數(shù)時鹏浅，折疊結(jié)果是兩者絕對值的較大值嗅义。
  • 兩個外邊距一正一負(fù)時屏歹，折疊結(jié)果是兩者的相加的和隐砸。