面試官:談談你對 CSS 盒模型的認識?(你肯定會?)

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

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

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

CSS盒模型

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

clipboard.png

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

clipboard.png
從上圖能夠看到 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. 實例題(根據盒模型解釋邊距重疊)

clipboard.png

如上圖:有兩個元素其中子元素高度爲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

clipboard.png

上圖證實 100px 是對的。orm

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

clipboard.png

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

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

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

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

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

BFC 的基本概念

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

BFC 的原理

  1. BFC 這個元素的垂直的邊距會發生重疊
  2. BFC 的區域不會與浮動元素的 float 重疊
  3. 獨立的容器,內外元素互不影響
  4. 計算 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>

clipboard.png]

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

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

clipboard.png

運行效果如圖:

clipboard.png

場景二
<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>

運行效果:

clipboard.png

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

clipboard.png

運行效果:

clipboard.png

場景三(清除浮動的原理)
<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>

運行效果:

clipboard.png

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

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

clipboard.png

運行效果:

clipboard.png

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

願你成爲終身學習者
相關文章
相關標籤/搜索