inline-block、BFC、邊距合并

收拾心情，重新出發(fā)。
加油。

一、在什么場景下會出現(xiàn)外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個父子外邊距合并的范例。

  • 外邊距合并指的是，兩個在普通文檔流中的“相鄰”元素外邊距相遇的時候發(fā)生合并的情況。這個所謂的“相鄰”可以是父子關(guān)系相鄰，兄弟關(guān)系相鄰，甚至如果一個元素內(nèi)部沒有東西，自身的上下邊距相遇時都會發(fā)生外邊距合并。

  • 合并的結(jié)果為： 當(dāng)兩個外邊距都是正數(shù)時，取兩者之中的較大者；當(dāng)兩個外邊距都是負(fù)數(shù)時，取兩者之間絕對值較大者；當(dāng)兩個外邊距一正一負(fù)時，取的是兩者的和。

  • 下面對一些外邊距合并的具體情況做一下說明。

  • 父子關(guān)系的合并
    假如說，父元素和子元素在正常的文檔流當(dāng)中。而且父元素沒有邊框或者padding，那么父子之間就會發(fā)生外邊距合并?？聪旅娴睦?。


    父子關(guān)系的外邊距合并

    按道理來說邊框和字體上面都應(yīng)該會有背景色，但是實際的效果并沒有。這其實就是父子外邊距合并帶來的結(jié)果，因為它們的外邊距融合了。
    要解決有以下幾種方案：

    • 給父元素加邊框
      給父元素加了邊框之后，它們的margin就被邊界線隔離開來，就不會發(fā)生外邊距合并。它們就會各歸各位，父元素有父元素的外邊距，子元素有子元素的外邊距。


      父元素加邊框之后外邊距不合并

    • 或者設(shè)置父元素的padding
      給父元素設(shè)置了padding之后，也能夠阻止父子的外邊距相融合，所以也可以防止父子元素的外邊距合并。


      父元素設(shè)置上padding之后外邊距不合并

      上圖是設(shè)置了上padding，如果要其他方向不發(fā)生外邊距合并，對相應(yīng)的方向設(shè)置即可。

  • 兄弟關(guān)系的合并
    如果兩個兄弟元素在正常的文檔流當(dāng)中，會產(chǎn)生外邊距合并。

    兄弟元素外邊距合并

  • 自身的合并
    一個元素如果里面沒有東西，也沒有邊框和padding，那么它自身的外邊距就會融合，也會發(fā)生外邊距合并。這里的例子，其實child3元素，不僅自身的外邊距合并了，還和上面child2的下margin合并了。合并的結(jié)果就是取了最大值50px。


    自身外邊距的合并

    要防止自身合并，可以利用以下方法：

    • 給這個空的元素child3，加了邊框之后，自身的上下外邊距被隔離開，就不會發(fā)生外邊距合并。


      加邊框之后自身不合并

    • 給child3加上padding之后，自身也不會發(fā)生外邊距合并。


      加padding之后自身不合并
    • 給child3設(shè)置overflow:hidden之后，自身上下外邊距也不會發(fā)生合并。因為它內(nèi)部形成了一個空間，自身的margin被這個空間隔離開。
      設(shè)置overflow：hidden之后不合并

  • 不產(chǎn)生外邊距合并的情況

  • 浮動元素不與任何元素產(chǎn)生外邊距合并。


    浮動元素發(fā)生外邊距合并

  • 父子關(guān)系或者兄弟關(guān)系inline-block元素不合并。


    inline-block元素不合并

  • 創(chuàng)建BFC與子元素不合并
    設(shè)置overflow: hidden;也可以形成BFC，但是沒有達(dá)到效果，外邊距還是會合并?？赡苁莾烧叩耐膺吘鄾]有真正隔離開來，外邊距還是交融的。

    設(shè)置overflow屬性元素合并

    給子元素加了div包裹之后，利用overflow:hidden外邊距不合并，可見創(chuàng)建BFC與子元素不發(fā)生合并。在外層形成了BFC真正把兩者的外邊距隔離開來。
    加了div包裹之后不合并

  • 使用絕對定位的元素，不與任何元素發(fā)生外邊距合并。


    絕對定位不發(fā)生外邊距合并

  • 此外，還有根元素不合并、兄弟元素之間有間隙不合并等等。

總的來說，外邊距合并不一定是兩個相鄰元素，不相鄰的也可能會發(fā)生外邊距合并。只要它們的外邊距會融合到一起，沒有分界線（可以是邊框、padding，也可以是BFC形成的空間）隔開，就有可能發(fā)生外邊距合并。

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

未去除間隙之前

  • html內(nèi)標(biāo)簽不含空格


    標(biāo)簽沒有空格

  • 標(biāo)簽可以換行，但是要保證標(biāo)簽相接的地方?jīng)]有空格


    標(biāo)簽相接處沒有空格
  • 利用負(fù)margin（一般-4px左右）
    負(fù)margin

    這里順便對負(fù)margin做一個說明。margin-top和margin-left移動的是自己，margin-right和margin-bottom移動的是周圍的元素。因為margin的意思是要讓周圍的元素有多少距離，比如說10px。根據(jù)文檔流的順序，當(dāng)前的元素距離下一個元素要有10px的位置。因此，如果設(shè)置的是right和bottom，自然就是下一個元素移動。不然當(dāng)前的元素和它前面的元素margin就會受到影響。

  • 利用浮動


    浮動

  • 利用父元素font-size


    font-size:0px

    這里需要注意的一點是在父元素里面設(shè)置了font-size之后，在容器里面的元素需要把字體大小重置回來。

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

當(dāng)元素設(shè)置浮動時，父元素感知不到元素的存在，造成高度塌陷。在父容器使用overflow屬性是形成一個BFC，使其內(nèi)部元素不受外界的影響。關(guān)于BFC還可以參考深入理解BFC與合并
BFC有三個特性：

  • BFC會阻止垂直外邊距（margin-top、margin-bottom）折疊
  • BFC不會重疊浮動元素
  • BFC可以包含浮動

根據(jù)第三條特性就可以知道，父容器的高度可以被撐開。

四、BFC是什么？如何形成BFC，有什么作用?

  • 浮動元素、絕對定位元素、非塊級元素的塊級容器（例如 inline-blocks, table-cells, 和 table-captions）以及overflow值不為“visiable”的塊級盒子，都會為他們的內(nèi)容創(chuàng)建新的塊級格式化上下文。簡單的來說，BFC就是一個獨立的空間，內(nèi)部的元素不受外部元素影響。
  • 以下情況都可以形成BFC：
  • float為 left|right
  • overflow為 hidden|auto|scroll
  • display為 table-cell|table-caption|inline-block
  • position為 absolute|fixed
  • BFC主要有以下一些用處：
  • 清除浮動
  • 防止外邊距合并
  • 設(shè)計布局

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

  • 元素設(shè)置了浮動之后，父元素感知不到浮動元素的高度，使得元素會溢出父容器，造成父容器的高度沒有被撐開。所以也可以說，浮動的元素失去了高度，導(dǎo)致父容器高度塌陷。
  • 解決父容器塌陷的方法就是要清除浮動。清除浮動的方法之前在我的另外一篇博客關(guān)于清除浮動的方法上面做過總結(jié)，這里就不再贅述。

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

.clearfix:after{   /* 在clearfix后面添加一個偽元素 */
    content: ' ';    /* 偽元素的內(nèi)容為空白字符 */
    display: block;  /* 因為偽元素生成的默認(rèn)為行內(nèi)又元素，而clear對象一定是塊級元素，所以這里設(shè)置一下display屬性。 */
    clear: both;   /* 元素兩邊都不能有浮動對象 */
}
.clearfix{          
    *zoom: 1;  /* “*”號是IE6~8的一個bug，IE6~8看到以“*”開頭的代碼，會忽略星號，執(zhí)行后面的代碼。而zoom的原意是放大。它也會觸發(fā)BFC，在IE里面其實不叫BFC，叫hasLayout 。*/
}
  • zoom是IE的特有屬性，可以設(shè)置對象的縮放比例。后面可以接數(shù)字或者百分?jǐn)?shù)，也就是表示縮放的比例。經(jīng)常用zoom: 1;來觸發(fā)IE的hasLayout、清除浮動以及解決外邊距合并的問題。因為偽元素在IE8是部分支持，IE8以下不支持，所以上述的代碼在IE中也能達(dá)到清除浮動的效果。
  • BFC是形成一個內(nèi)部的獨立小空間，不受外部元素影響。而上述方法只是讓父元素感知到浮動元素的存在，把內(nèi)容撐開，不會形成獨立的空間。

七、代碼

1、實現(xiàn)如下效果的導(dǎo)航條。

導(dǎo)航條

效果預(yù)覽
2、利用BFC的原理實現(xiàn)下圖所示兩欄布局。

<div id="header">header</div> 
<div id="content"> 
      <div class="aside">aside</div> 
      <div class="main"> 
我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main... 
      </div>
 </div> 
<div id="footer"></div>

兩欄布局

效果預(yù)覽
代碼github地址

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容