問答

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

• 浮動元素可以依據 float 屬性值左右移動，直到其外邊緣碰到其父容器的框邊緣或者另一個浮動元素的框邊緣；浮動元素不在文檔的普通流中。

• 對父容器：浮動元素不會影響父容器的高度，根據自身 float 屬性在父容器規定的寬度下進行排列；如果父容器寬度不足以容納下所有浮動元素的寬度，則浮動元素自動被擠到下方。

• 對普通元素：普通元素會自動忽略浮動元素的存在，仿佛在這個位置沒有任何元素一樣，該位置的普通元素在視覺上將會被浮動元素所覆蓋，但是普通元素內的文本元素等不會被覆蓋，會自動繞過浮動元素所在的區域進行顯示。

• 對文字：文本元素不會忽略浮動元素的存在，會自動繞過浮動元素所覆蓋的位置進行顯示。

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

• 清除浮動為了解決父元素高度坍塌問題：如果父元素下有浮動子元素，浮動子元素脫離文檔流，父元素無法感知其容量，無法被這些浮動子元素撐開（這些浮動子元素對父元素高度不會產生影響，父容器的高度也不會完全覆蓋這些浮動子元素），從而可能導致視覺上的的混亂狀況，無法區分父子元素，因而要通過清除浮動的方式來解決這些出現的問題。

• 清除浮動的方法：

1. 利用 clear 屬性，清除浮動

在父容器的子元素最后添加一個 <div style="clear:both;"></div> 空標簽；
也可以在父容器的子元素最后添加一個<br style="clear: both;"> 標簽來清理浮動；

2. 使父容器形成 BFC

/*方法1*/
.clearfix{
    *zoom:1;
    /*觸發 IE67 Layout 屬性達到類似 BFC 的效果，經常也不用寫*/
}
.clearfix:after{
    content:"";
    display:block;
    clear:left;
}
/*方法2*/
.clearfix{
  *zoom:1;
}
.clearfix:after{
  content:"";
    display:table;
    clear:both;
} 

問題3. 有幾種定位方式，分別是如何實現定位的，參考點是什么，使用場景是什么？

• 主要定位元素：relative/absolute/fixed（只有這三個屬性下才可以設置 top/right/bottom/left）

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

使用定位元素的時候，文檔流和文本會徹底忽視其內容的存在，此時會導致一些內容相互覆蓋問題，利用 z-index 來決定絕對定位元素是否位于最上方。

對定位元素進行設定 z-index: 1; 設定堆疊順序最高者位于最前面。

問題5. position:relative和負margin都可以使元素位置發生偏移?二者有什么區別

position:relative; 會使得元素相對于自身原有的位置偏移，但是依然占據原有的位置空間，不會影響到周圍元素，不會改變原有的文檔流。

負 margin：會使得元素相對于自身原有位置便宜，但是不再占有原有的位置空間，此時周圍元素很多都會跟隨該元素做出位置變化，會改變原有的文檔流。

position: relative;:

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<style>
    .box1 {
        width: 50px;
        height: 50px;
        border:1px solid black;
    }
    .box2 {
        width: 50px;
        height: 50px;
        border:1px solid red;
    }
    .box3 {
        width: 50px;
        height: 50px;
        border:1px solid blue;
    }
    .box2 {
        position: relative;
        top: 40px;
    }
</style>

負 margin:

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<style>
    .box1 {
        width: 50px;
        height: 50px;
        border:1px solid black;
    }
    .box2 {
        width: 50px;
        height: 50px;
        border:1px solid red;
    }
    .box3 {
        width: 50px;
        height: 50px;
        border:1px solid blue;
    }
    .box2 {

        position:relative;
        /*元素自身會移動，但文檔流不會發生改變*/
         margin-top: 40px;
        /*負 margin 文檔流位置會發生移動*/
    }
</style>

問題6. BFC 是什么？如何生成 BFC？BFC 有什么作用？舉例說明

BFC 是什么？

• BFC 全稱是 Block Format Context （塊級格式化上下文）

• BFC 是 W3C CSS 2.1 規范中的一個概念，它決定了元素如何對其內容進行定位，以及與其他元素的關系和相互作用。當涉及到可視化布局的時候，Block Formatting Context提供了一個環境，HTML元素在這個環境中按照一定規則進行布局。一個環境中的元素不會影響到其它環境中的布局。比如浮動元素會形成BFC，浮動元素內部子元素的主要受該浮動元素影響，兩個浮動元素之間是互不影響的。這里有點類似一個BFC就是一個獨立的行政單位的意思。也可以說BFC就是一個作用范圍?？梢园阉斫獬墒且粋€獨立的容器，并且這個容器的里box的布局，與這個容器外的毫不相干。

如何生成 BFC ？

設置如下

• float為 left | right
• overflow為 hidden | auto | scroll
• display為 table-cell | table-caption | inline-block
• position為 absolute | fixed

BFC 有什么作用？

• BFC 會阻止垂直外邊距（margin-top、margin-bottom）折疊

• • 按照 BFC 的定義，只有同屬于一個 BFC 時，兩個元素才有可能發生垂直 Margin 的重疊，這個包括相鄰元素，嵌套元素，只要他們之間沒有阻擋(例如邊框，非空內容，padding 等)就會發生 margin 重疊。
• • 因此要解決 margin 重疊問題，只要讓它們不在同一個 BFC 就行了，但是對于兩個相鄰元素來說，意義不大，沒有必要給它們加個外殼，但是對于嵌套元素來說就很有必要了，只要把父元素設為 BFC 就可以了。這樣子元素的 margin 就不會和父元素的 margin 發生重疊

• BFC 不會重疊浮動元素

• BFC 可以包含浮動

我們可以利用 BFC 的第三條特性來“清浮動”，這里其實說清浮動已經不再合適，應該說包含浮動。也就是說只要父容器形成 BFC 就可以，簡單看看如何形成 BFC

問題7. 在什么場景下會出現外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個父子外邊距合并的范例

外邊距合并指的是，兩個垂直外邊距相遇時，它們將構成一個外邊距，合并后的外邊距高度等于兩個發生合并的外邊距中的高度較大者。

1. 兩個相鄰元素在垂直方向上合并外邊距，取較大值進行合并：

<div class="ct">
    <div class="box1"></div>
    <div class="box2"></div>
</div>

<style>
    .box1{
        width: 100px;
        height: 100px;
        margin-bottom: 50px;
        border: 1px solid blue;
    }

    .box2 {
        width: 100px;
        height: 100px;
        margin-top: 20px;
        border: 1px solid blue;
    }
</style>

此時下邊框 box2 的margin-top: 20px;會合并到上邊框 box1 的margin-bottom:50px;的50px 中。

2. 父子元素間沒有阻擋（邊框、padding、非空內容）時會發生上邊距或下邊距合并：

<div class="ct">
    <div class="box"></div>
</div>

<style>
    .ct {
        width: 200px;
        background: pink;
        /*padding: 1px;*/
        /*border: 1px solid;*/
        
    }

    .box {
        width: 100px;
        height: 100px;
        margin-top: 30px;
        background: yellow;
    }
</style>

3. 外邊距自己和自己合并，如果一個元素沒有邊框和填充，有上下邊距，此時它的上下外邊距會合并：

<div class="ct1"></div>

<style>
    .ct1 {
        margin-top:50px;
        margin-bottom:100px;
    }
</style>

代碼

代碼題1

代碼題2

代碼題3

代碼題4