面試官：談談你對 CSS 盒模型的認識?（你肯定會？）

時間 2019-12-05

標籤面試談談 css 模型認識肯定欄目快樂工作简体版

原文原文鏈接

題目：談談你對 CSS 盒模型的認識

涉及知識點(層層遞進):html

基本概念：標準模型+ IE模型(區別)
CSS如何設置這兩種模型
JS如何設置獲取盒子模型對應的寬和高
實例題(根據盒模型解釋邊距重疊)
BFC(邊距重疊解決方案)

CSS盒模型

1. 基本概念：標準模型+ IE模型

從上圖能夠看到標準 W3C 盒子模型的範圍包括 margin、border、padding、content，而且 content 部分不包含其餘部分。dom

從上圖能夠看到 IE 盒子模型的範圍也包括 margin、border、padding、content，和標準 W3C 盒子模型不一樣的是：IE 盒子模型的 content 部分包含了 border 和 pading。佈局

2. CSS如何設置這兩種模型

box-sizing:conent-box;
box-sizing:border-box;

3.JS如何設置獲取盒子模型對應的寬和高

dom.style.width/height
dom.currentStyle.width/height  (ie支持)
window.getComputedStyle(dom).width/height;
dom.getBoundingClientRect().width/height;

4. 實例題(根據盒模型解釋邊距重疊)

如上圖:有兩個元素其中子元素高度爲100px,子元素與父元素的上邊距爲 10px,求父元素的實際高度？學習

答案:說100px 對，說110 也對，爲何捏？這個要看父元素的盒模型要怎麼設置的，上代碼演示咯，注意看噢：spa

<style>
    html,*{
      padding: 0;margin: 0;
    }
    #sec{
      background: #f00;
    }
    .child{
      height: 100px;
      margin-top: 10px;
      background: yellow;
    }
  </style>
</head>
<body>
  <section id="sec">
    <article class="child">
    </article>
  </section>
</body>

運行效果：code

上圖證實 100px 是對的。orm

接着咱們給元素加個 overflow:hidden,而後在看效果：htm

你會發現這時高度爲 110px, 這時你們可能會疑問,爲何給父級元素設置一個 overflow:hidden之後，它的高度就成 110 呢，這塊的基本原理是啥呢，咋就這樣呢？說這個以前，先引用一個知識點：ip

上面代碼是父子元素邊距重疊，那麼還有兩種狀況邊距重疊就是，一種是兄弟元素，就是兩個 div 挨着，每一個都上邊距或者下邊距，那麼重疊的原則就是取最大值。get

來回答上面問題：給父級加了 overflow:hidden,其實就是給父級元素建立一個BFC(塊級格式化上下文)，那什麼是BFC，請看下一個話。

5. BFC(邊距重疊解決方案)

BFC 的基本概念
BFC 的原理
如何建立 BFC
BFC使用場景

BFC 的基本概念

Block Formatting Context, 塊級格式化上下文，一個獨立的塊級渲染區域，該區域擁有一套渲染規格來約束塊級盒子的佈局，且與區域外部無關。

BFC 的原理

BFC 這個元素的垂直的邊距會發生重疊
BFC 的區域不會與浮動元素的 float 重疊
獨立的容器，內外元素互不影響
計算 BFC 高度，浮動元素也參與計算

如何建立 BFC

float 不爲none的時候
position 不爲 static 或者 relative 的時候
display 與 table 相關的時候
overflow 爲auto, hidden 的時候

BFC使用場景

場景一

<style>
    html,*{
      padding: 0;margin: 0;
    }
    #margin{
      background: pink;
      overflow: hidden;
    }
    #margin>p{
      margin: 5px auto 25px;
      background: red;
    }
  </style>
</head>
<body>
  <section id="margin">
    <p>1</p>
    <p>2</p>
    <p>3</p>
  </section>
</body>

]

如上圖，咱們給每一個p 設置上邊距5，下25 結果從第二個起來它的上邊距，下邊距都是25 而不是 30，這個就是邊距重疊問題，那如何消除這個問題呢？

解:就是給子元素加個一個父級元素，讓你能元素建立一個 BFC，以下：

運行效果如圖:

場景二

<style>
    html,*{
      padding: 0;margin: 0;
    }
    #layout{
      background: red;
    }
    .left {
      width: 100px;
      height: 100px;
      background: pink;
      float:left;
    }
    .right{
      height: 110px;
      background: #ccc;
    }
  </style>
</head>
<body>
  <section id="layout">
    <div class="left"></div>
    <div class="right"></div>
  </section>
</body>

運行效果：

從運行效果能夠發現，當右側增高的時候會侵入左側的佔位，這個是float的特性，顯示這個不符合咱們左右佈局的目的，那怎麼辦呢？其實很簡單，就是給右側的元素建立一個 BFC,以下：

運行效果：

場景三（清除浮動的原理）

<style>
    html,*{
      padding: 0;margin: 0;
    }
    #float{
      background: red;
    }
    .float{
      float: left;
      font-size: 30px;
    }
  </style>
</head>
<body>
  <section id="float">
    <div class="float">個人浮動的小智</div>
  </section>
</body>

運行效果：

能夠看出父級元素的高度爲0，這是爲何呀？

這是由於 float 致使了元素的坍塌，因此父級元素的高度爲0，這時咱們給父級元素建立一個 BFC，就能解決問題。

運行效果：

以上就是 BFC的清除浮動原理。