inline-block、BFC、邊距合并

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

外邊距合并的場景大致有以下幾種。

  • 1.相鄰的同級元素會發(fā)生外邊距合并。
    舉例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>同級元素外邊距合并</title>
    <style>
        .container {
            width: 700px;
            height: 300px;
            border: 1px solid;
        }
        .box1 {
            width: 100px;
            height: 100px;
            border: 1px solid red;
            margin: 20px;
        }
        .box2 {
            width: 100px;
            height: 100px;
            border: 1px solid red;
            margin: 40px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
</body>
</html>

效果：



從圖中看出雖然兩個邊框的外邊距一個是20px，一個是40px，但它們相鄰的邊距并不是兩者之和60px，而是兩者中的最大值40px。
這種情況可以給它們分別再加一個父元素，設(shè)置父元素overflow屬性。
效果：



或者其中最后一個子元素加上float。
  • 2.相鄰的父子元素，當(dāng)父元素沒有設(shè)置邊框或者padding時，會發(fā)生外邊距合并。
    舉例：
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>父子元素外邊距合并</title>
  <style>
    .header{
      background: red;
     }
    h1{
      margin-top: 130px;
    }
  </style>
</head>
<body>
<div class="header">
  <h1>我是段落</h1>
</div> 
</body>
</html>

效果：



阻止外邊距合并可以給父元素加上border或者padding或者加上內(nèi)容。


加上邊框
加上內(nèi)邊距

加上內(nèi)容
  • 3.一個元素沒有內(nèi)容、邊框、padding，它本身的上下邊距會合并。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自身合并</title>
    <style>
        div {
            margin:50px;
        }
    </style>
</head>
<body>
    <div></div>
    <span>饑人谷</span>
</body>
</html>

效果：



這種也可以加上border或者padding或者加內(nèi)容。


加上邊框

加上內(nèi)邊距

加上內(nèi)容

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

inline-block元素之間會有縫隙。
舉例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>inline-block縫隙</title>
    <style>
    ul,li {
        margin: 0;
        padding: 0;
    }
    .content {
        width: 200px;
        border: 1px solid red;
    }
    .content>li {
        display: inline-block;
        background: blue;
        color: #fff;
    }
</style>
</head>
<body>
    <ul class="content">
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
    </ul>
</body>
</html>

此時，可以看到列表之間有空隙。
效果：



有以下幾種方法可以消除間隙：

  1. 把<li>標(biāo)簽之間的空白去掉，可以寫成：
<ul class="content">
<li>列表1</li><li>列表2</li><li>列表3</li>
</ul>

或者

<ul class="content">
<li>列表1</li
><li>列表2</li
><li>列表3</li>
</ul>

效果：


2.可以用負(fù)margin把<li>標(biāo)簽之間的外邊距變小，使兩個inline-block元素之間沒有空隙。
改動部分的代碼：

.content>li {
        display: inline-block;
        background: blue;
        color: #fff;
        margin-left: -10px;
    }
    li:first-child {
        margin-left: 0px;
    }

效果：



3.利用float屬性，浮動元素是水平方向上緊挨著的。設(shè)置了浮動，一定要清除浮動。
改動部分的代碼：

.content {
        width: 200px;
        border: 1px solid red;
        overflow: auto;
    }
    .content>li {
        display: inline-block;
        background: blue;
        color: #fff;
        float: left;
    }

效果：



4.還可以設(shè)置父元素的字體大小為0。這種方法，元素則身的字體大小要設(shè)置。
改動部分的代碼:

.content {
        width: 200px;
        border: 1px solid red;
        font-size: 0;
    }
    .content>li {
        display: inline-block;
        background: blue;
        color: #fff;
        font-size: 16px;
    }

效果：


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

是根據(jù)BFC的特性，父元素使用overflow: auto|hidden撐開高度。
overflow屬性作用在塊級元素上。它規(guī)定了當(dāng)內(nèi)容元素溢出元素框時發(fā)生的事：裁剪內(nèi)容，使用滾動條來顯示或者直接顯示超出部分。
其中：
overflow: auto; 由瀏覽器定奪，如果內(nèi)容被修剪，就會顯示滾動條
overflow: hidden; 內(nèi)容會被修剪，并且其余內(nèi)容不可見。
overflow值不為“visiable”的塊級盒子，會為他們的內(nèi)容創(chuàng)建新的BFC（塊級格式上下文）。BFC是一個名詞，是一個獨立的布局環(huán)境，我們可以理解為一個箱子（實際上是看不見摸不著的），箱子里面物品的擺放是不受外界的影響的，同時也不影響外界的元素。
這個特性，可以用于清除浮動，撐開塊元素的空間，在浮動的元素上加一個父元素，父元素上設(shè)置overflow: auto|hidden，可以撐開高度。
舉例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>overflow</title>
    <style>
        .box {
            width: 300px;
            border: 1px solid;
        }
        .box1 {
            width: 100px;
            height: 100px;
            background: #f00;
        }
        .box2 {
            width: 100px;
            height: 100px;
            background: #0f0;
            float: left;
        }
        /*.container {
            overflow: hidden;
        }*/
        .box3 {
            width: 100px;
            height: 100px;
            background: #00f;
            
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1"></div>
        <div class="container">
        <div class="box2"></div>
        </div>
        <div class="box3"></div>
    </div>
</body>
</html>

此時效果：



加上

.container {
            overflow: hidden;
        }

效果為：



撐開了高度。

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

BFC是Block Formatting Contexts的縮寫，譯為塊級格式上下文。
浮動元素和絕對定位元素，非塊級盒子的塊級容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不為“visiable”的塊級盒子，都會為他們的內(nèi)容創(chuàng)建新的BFC（塊級格式上下文）?？梢杂糜谇宄雍秃喜⑼膺吘?。

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

指父容器高度并浮動元素脫離文檔流，是常規(guī)元素忽略了它的存在，從而父元素高度塌陷。
解決方法可以使子元素形成BFC，或者用clear使元素左邊或右邊或兩邊不浮動。

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

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

作用：

.clearfix:after{  /*在class屬性名是clearfix的元素的子元素的最后再添加一個子元素*/
content: '';     /*內(nèi)容是空*/
display: block;  /*設(shè)置為塊級元素*/
 clear: both;    /*這個元素左右兩邊不允許有浮動元素*/
}
.clearfix{ /*設(shè)置class屬性是clearfix的元素*/
 *zoom: 1; /*設(shè)置縮放比例為1。這是IE專有屬性。火狐和老版本的webkit核心的瀏覽器都不支持這個屬性。*/
}

這段代碼可以撐開由于浮動導(dǎo)致的塌陷的父元素。第一段是兼容普通瀏覽器，第二段兼容IE瀏覽器。
第一段代碼利用偽類元素，相當(dāng)于在父元素末尾加上一個元素，并使這個元素左右不浮動，這樣這個元素就會下移，撐開父元素。*zoom:1縮放頁面，重新排版，父元素會計算浮動元素的高度，被撐開。
舉例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>clear</title>
    <style>
        .clearfix {
            width: 500px;
            border: 1px solid;
        }
        .box1 {
            width: 100px;
            height: 100px;
            background: #f00;
        }
        .box2 {
            width: 100px;
            height: 100px;
            background: #0f0;   
        }
        .box3 {
            width:100px;
            height: 100px;
            background: #00f;
            float: right;
        }
        .clearfix:after{ 
            content: ''; 
            display: block;
            clear: both;
          }
        .clearfix {
              *zoom: 1;
         }
    </style>
</head>
<body>
    <div class="clearfix">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>
</html>

效果：



如果不加這兩段代碼，則是下面的效果：



父元素沒有完全包圍子元素。
如果父元素最后一個元素不浮動，添加上述代碼，可以清除浮動嗎？

舉例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>clear</title>
    <style>
        .clearfix {
            width: 500px;
            border: 1px solid;
        }
        .box1 {
            width: 100px;
            height: 100px;
            background: #f00;
        }
        .box2 {
            width: 100px;
            height: 100px;
            background: #0f0;
            float: left;
        }
        .box3 {
            width:100px;
            height: 100px;
            background: #00f;
            /*float: left;*/
        }
        .clearfix:after{ 
            content: ''; 
            display: block;
            clear: both;
          }
          .clearfix{
            *zoom: 1;
            }
    </style>
</head>
<body>
    <div class="clearfix">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>
</html>

在IE11中，效果：


發(fā)現(xiàn)在IE11中:after被禁用了，而且.box3元素被.box2遮住，浮動帶來的影響沒有被清除。
在chrome瀏覽器中，效果：

看出*zoom:1并沒有出現(xiàn)，因為 * 對非IE瀏覽器不起作用。同樣的，.box3被.box2遮住，浮動的影響沒有被清除。
本來父元素應(yīng)該是下圖所示的樣式：

所以這幾行代碼用于最后一個子元素浮動時，清除這個子元素浮動對父元素的影響。

本文版權(quán)歸作者和饑人谷所有，轉(zhuǎn)載請注明出處

最后編輯于 ：
?著作權(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)容