問答

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

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

• 對(duì)父容器：浮動(dòng)元素不會(huì)影響父容器的高度，根據(jù)自身 float 屬性在父容器規(guī)定的寬度下進(jìn)行排列；如果父容器寬度不足以容納下所有浮動(dòng)元素的寬度，則浮動(dòng)元素自動(dòng)被擠到下方。

• 對(duì)普通元素：普通元素會(huì)自動(dòng)忽略浮動(dòng)元素的存在，仿佛在這個(gè)位置沒有任何元素一樣，該位置的普通元素在視覺上將會(huì)被浮動(dòng)元素所覆蓋，但是普通元素內(nèi)的文本元素等不會(huì)被覆蓋，會(huì)自動(dòng)繞過浮動(dòng)元素所在的區(qū)域進(jìn)行顯示。

• 對(duì)文字：文本元素不會(huì)忽略浮動(dòng)元素的存在，會(huì)自動(dòng)繞過浮動(dòng)元素所覆蓋的位置進(jìn)行顯示。

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

• 清除浮動(dòng)為了解決父元素高度坍塌問題：如果父元素下有浮動(dòng)子元素，浮動(dòng)子元素脫離文檔流，父元素?zé)o法感知其容量，無法被這些浮動(dòng)子元素?fù)伍_（這些浮動(dòng)子元素對(duì)父元素高度不會(huì)產(chǎn)生影響，父容器的高度也不會(huì)完全覆蓋這些浮動(dòng)子元素），從而可能導(dǎo)致視覺上的的混亂狀況，無法區(qū)分父子元素，因而要通過清除浮動(dòng)的方式來解決這些出現(xiàn)的問題。

• 清除浮動(dòng)的方法：

1. 利用 clear 屬性，清除浮動(dòng)

在父容器的子元素最后添加一個(gè) <div style="clear:both;"></div> 空標(biāo)簽；
也可以在父容器的子元素最后添加一個(gè)<br style="clear: both;"> 標(biāo)簽來清理浮動(dòng)；

2. 使父容器形成 BFC

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

問題3. 有幾種定位方式，分別是如何實(shí)現(xiàn)定位的，參考點(diǎn)是什么，使用場景是什么？

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

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

使用定位元素的時(shí)候，文檔流和文本會(huì)徹底忽視其內(nèi)容的存在，此時(shí)會(huì)導(dǎo)致一些內(nèi)容相互覆蓋問題，利用 z-index 來決定絕對(duì)定位元素是否位于最上方。

對(duì)定位元素進(jìn)行設(shè)定 z-index: 1; 設(shè)定堆疊順序最高者位于最前面。

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

position:relative; 會(huì)使得元素相對(duì)于自身原有的位置偏移，但是依然占據(jù)原有的位置空間，不會(huì)影響到周圍元素，不會(huì)改變?cè)械奈臋n流。

負(fù) margin：會(huì)使得元素相對(duì)于自身原有位置便宜，但是不再占有原有的位置空間，此時(shí)周圍元素很多都會(huì)跟隨該元素做出位置變化，會(huì)改變?cè)械奈臋n流。

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>

負(fù) 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;
        /*元素自身會(huì)移動(dòng)，但文檔流不會(huì)發(fā)生改變*/
         margin-top: 40px;
        /*負(fù) margin 文檔流位置會(huì)發(fā)生移動(dòng)*/
    }
</style>

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

BFC 是什么？

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

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

如何生成 BFC ？

設(shè)置如下

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

BFC 有什么作用？

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

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

• BFC 不會(huì)重疊浮動(dòng)元素

• BFC 可以包含浮動(dòng)

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

問題7. 在什么場景下會(huì)出現(xiàn)外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個(gè)父子外邊距合并的范例

外邊距合并指的是，兩個(gè)垂直外邊距相遇時(shí)，它們將構(gòu)成一個(gè)外邊距，合并后的外邊距高度等于兩個(gè)發(fā)生合并的外邊距中的高度較大者。

1. 兩個(gè)相鄰元素在垂直方向上合并外邊距，取較大值進(jìn)行合并：

<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>

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

2. 父子元素間沒有阻擋（邊框、padding、非空內(nèi)容）時(shí)會(huì)發(fā)生上邊距或下邊距合并：

<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. 外邊距自己和自己合并，如果一個(gè)元素沒有邊框和填充，有上下邊距，此時(shí)它的上下外邊距會(huì)合并：

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

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

代碼

代碼題1

代碼題2

代碼題3

代碼題4