02_簡單說一下盒模型，說下如何利用BFC解決外邊距重疊的問題

一、基本概念

盒子模型就是網頁布局中的一種手段，包括邊框（border）、外邊距（margin）、內邊距（padding）、網頁元素（content）、寬（width）、高（height）等元素。

要點：

  • Margin(外邊距) - 清除邊框外的區(qū)域，外邊距是透明的。
  • Border(邊框) - 圍繞在內邊距和內容外的邊框。
  • Padding(內邊距) - 清除內容周圍的區(qū)域，內邊距是透明的。
  • Content(內容) - 盒子的內容，顯示文本和圖像。
<div class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
</div>
  
.parent {
    width: 400px;
    height: 400px;
    background: #ccc;
}
.child1, .child2 {
    width: 100px;
    height: 100px;
    margin: 10px;
    padding: 10px;
    border: 10px solid #000;
    background: #f00;
}

二、盒模型的兩種標準

要點：

  • 標準模型中盒模型的寬高只是內容（content）的寬高
  • IE模型中盒模型的寬高是內容（content）+填充（padding）+邊框（border）的總寬高

三、CSS3 box-sizing 屬性

box-sizing 是用于告訴瀏覽器如何計算一個元素的總寬度和總高度

  • 標準盒模型 box-sizing: content-box

<p>???????width = content width</p>
<p>???????height = content height</p>

  • IE盒模型 box-sizing: border-box
    <p>???????width = border + padding + content width</p>
    <p>???????height = border + padding + content height</p>
  <div class="parent">
        <div class="child1 content-box"></div>
        <div class="child2 border-box"></div>
  </div>
  
  .content-box { 
    box-sizing: content-box; 
  }
  .border-box { 
    box-sizing: border-box;
  }

四、margin折疊問題

css2.1盒子模型中規(guī)定：

In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin.所有毗鄰的兩個或更多盒元素的margin將會合并為一個margin共享之。毗鄰的定義為：同級或者嵌套的盒元素，并且它們之間沒有非空內容、padding或border分隔。

在CSS當中，相鄰的兩個盒子（可能是兄弟關系也可能是祖先關系）的外邊距可以結合成一個單獨的外邊距。這種合并外邊距的方式被稱為折疊，所結合成的外邊距稱為折疊外邊距。折疊的結果按照如下規(guī)則計算：

  1. 兩個相鄰的外邊距都是正數(shù)時，折疊結果是它們兩者之間較大的值。
  2. 兩個相鄰的外邊距都是負數(shù)時，折疊結果是兩者絕對值的較大值。
  3. 兩個外邊距一正一負時，折疊結果是兩者的相加的和。

產生折疊的必備條件：margin必須是鄰接的!

解決嵌套元素產生折疊問題的方法：

  • 給父元素設置padding
  • 給父元素設置透明border
  .parent {
   /* padding-top:1px; */
    border: 1px solid rgba(0,0,0,0);
    width: 400px;
    height: 400px;
    background: #ccc;
  }

五、什么是BFC

1、BFC 定義

BFC（Block formatting context）直譯為"塊級格式化上下文"。它是一個獨立的渲染區(qū)域，只有Block-level Box參與， 它規(guī)定了內部的Block-level Box如何布局，并且與這個區(qū)域外部毫不相干。

Box：css布局的基本單位

Box 是 CSS 布局的對象和基本單位， 直觀點來說，就是一個頁面是由很多個 Box 組成的。元素的類型和 display 屬性，決定了這個 Box 的類型。 不同類型的 Box， 會參與不同的 Formatting Context（一個決定如何渲染文檔的容器），因此Box內的元素會以不同的方式渲染。

Box盒子的類型：

  • block-level box : display 屬性為 block, list-item, table 的元素，會生成 block-level box。并且參與 block fomatting context；
  • inline-level box : display 屬性為 inline, inline-block, inline-table 的元素，會生成 inline-level box。并且參與 inline formatting context；

Formatting Context

Formatting context 是 W3C CSS2.1 規(guī)范中的一個概念。它是頁面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則，它決定了其子元素將如何定位，以及和其他元素的關系和相互作用。最常見的 Formatting context 有 Block fomatting context (簡稱BFC)和 Inline formatting context (簡稱IFC)。

2、如何創(chuàng)建BFC

  • float的值不是none
  • position的值不是static或者relative
  • display的值是inline-block、table-cell、flex、table-caption或者inline-flex
  • overflow的值不是visible

3、BFC的布局規(guī)則

  • 內部的Box會在垂直方向，一個接一個地放置。
  • Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發(fā)生重疊。
  • 每個盒子（塊盒與行盒）的margin box的左邊，與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。
  • BFC的區(qū)域不會與float box重疊。
  • BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此。
  • 計算BFC的高度時，浮動元素也參與計算。

4、BFC的應用場景

（1）利用BFC避免margin重疊

  • 解決嵌套元素margin重疊，父元素可選擇添加以下樣式之一
    padding-top:1px;
    border: 1px solid rgba(0,0,0,0);
    display: inline-block;
    display: table;
    display: table-caption;
    display: flex;
    display: inline-flex;
    float: left;
    position: absolute;
    overflow:hidden;
  • 解決同級相鄰元素margin重疊，任意相鄰元素可選擇添加以下樣式之一
    display:inline-block;
    display:table-caption;
    display:inline-flex;

（2）自適應兩欄布局

  • 要點：BFC的區(qū)域不會與float box重疊
<body>
    <div class="left">LEFT</div>
    <div class="right">RIGHT</div>
</body>

.left {
     float: left;
     width: 200px;
     height: 150px;
     line-height: 150px;
     text-align: center;
     font-size: 40px;
     background: #00f;
}
.right {
     overflow: hidden;
     height: 300px;
     line-height: 300px;
     text-align: center;
     font-size: 40px;
     background: #f00;
}

（3）清除浮動

  • 當我們不給父節(jié)點設置高度，同時給子節(jié)點設置了浮動的時候，就會發(fā)生高度塌陷，這個時候我們就要清除浮動
  • 要點：計算BFC的高度時，浮動元素也參與計算
<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
</div>

.parent {
    overflow: hidden;
    width: 300px;
    border: 5px solid #f00;
}
.child {
    float: left;
    width:100px;
    height: 100px;
    border: 5px solid #00f;
}
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容