問答

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

• 外邊距合并指的是垂直方向上的外邊距合并，產(chǎn)生的條件如下：
  • 必須是處于文檔流中的塊級(jí)盒子并處于同一個(gè)BFC中。
  • 外邊距必須是緊鄰著的，即兩個(gè)外邊距之間不能有如Line box、clearance、padding、border等存在。
• 如何合并
  合并的效果為兩個(gè)margin合并成只存在一個(gè)margin，且取margin值更大者。
• 如何不讓相鄰?fù)膺吘嗪喜?br> 只要破壞外邊距合并產(chǎn)生的條件即可。常用的有：
  • overflow設(shè)置成非visiable生成BFC，并且讓兩個(gè)元素處于不同的BFC中。
  • 根據(jù)需要設(shè)置定位或者浮動(dòng)使其中之一脫離文檔流。
  • 設(shè)置border使外邊距不緊鄰。

2. 去除inline-block內(nèi)縫隙有哪幾種常見方法?

去除inline-block內(nèi)縫隙的常見方法：

• 讓行內(nèi)塊元素的標(biāo)簽緊挨著，中間不要有空格、換行。
• 使用浮動(dòng)。
• 使用負(fù)邊距。

3. 父容器使用overflow: auto| hidden撐開高度的原理是什么？

原理是父容器觸發(fā)了BFC，在其內(nèi)開辟了一個(gè)獨(dú)立空間，不再受子元素的浮動(dòng)影響，自然有高度了。

4. BFC是什么？如何形成BFC，有什么作用?

• BFC(Block Formatting Context)——塊級(jí)格式化上下文，指的是在其內(nèi)開辟了一個(gè)獨(dú)立空間，使內(nèi)部的元素不受外部影響。
• 觸發(fā)形成BFC的方法如下：
  • 浮動(dòng)或者絕對(duì)、固定定位觸發(fā)BFC。
  • overflow屬性值非visiable。
  • display成非塊級(jí)盒子。
• 作用
  • 清除浮動(dòng)
  • 消除外邊距合并

5. 浮動(dòng)導(dǎo)致的父容器高度塌陷指什么？為什么會(huì)產(chǎn)生？有幾種解決方法

• 浮動(dòng)導(dǎo)致的父容器高度塌陷指浮動(dòng)元素脫離文檔流，自然沒有了高度。
• 解決方法有兩種：
  • 用clear:both(left或right)清除浮動(dòng)造成的影響（使用調(diào)用一個(gè)偽元素的方法最佳），涉及的方法有task10中有提到，這里不做贅述。
  • 通過觸發(fā)BFC來消除浮動(dòng)帶來的影響。父容器使用overflow:hidden最佳，其它方法請(qǐng)看task10。

6. 以下代碼每一行的作用是什么？ 為什么會(huì)產(chǎn)生作用？ 和BFC撐開空間有什么區(qū)別？

.clearfix:after{
    content: '';
    display: block;
    clear: both;
}
.clearfix{
    *zoom: 1;
}

• 作用
  用于清除浮動(dòng)元素對(duì)父元素的影響。
• 原理
  .clearfix:after聲明在父元素內(nèi)最后面創(chuàng)建一個(gè)子元素的偽元素，內(nèi)容為空、塊級(jí)元素、清除所有子元素的浮動(dòng)；
  .clearfix聲明兼容IE6。
• 與BFC區(qū)別
  之前已經(jīng)多次提及清除浮動(dòng)的方法主要有兩種性質(zhì):一種是用clear清除浮動(dòng)，一種是觸發(fā)BFC清除浮動(dòng)。本題代碼為前者，BFC撐開空間為后者。

代碼

task11-1
task11-1 preview

task11-2
task11-2 preview

參考

理解 bfc 和邊距合并

本文章著作權(quán)歸饑人谷_九霄和饑人谷所有，轉(zhuǎn)載須說明來源