我理解的css盒模型

時間 2019-11-21

標籤理解 css 模型欄目 CSS 简体版

原文原文鏈接

什麼是盒模型

網頁渲染的時候，全部的元素都會被瀏覽器引擎根據CSS-Box模型描述爲一個盒子,CSS會決定這些盒子的大小, 位置, 屬性(顏色, 邊框...)。盒子模型由內容(content)、內邊距(padding)、邊框(border)、外邊距(margin)組成。但盒子的大小由content+padding+border這幾部分決定，把margin算進去的那是盒子佔據的位置，而不是盒子的大小。瀏覽器

盒模型的分類

盒模型分爲兩類: IE盒模型(或怪異模型)和標準盒模型。
二者的區別在於:bash

IE盒模型：width/height = content + border + padding
W3C標準盒模型：width/height = content

1. 標準盒模型

從圖中能夠看出我設置的寬高爲150，內邊距爲10,邊框爲5，下邊距10，而元素真正呈現的是180。即width(150) + padding(2 * 10) + border(5 * 2) = 180

2. IE盒模型

從圖中能夠看出我設置的寬高爲150，內邊距爲10,邊框爲5，下邊距10，而元素真正呈現的依然是150，內容的寬度（content）變爲了120，可是盒子的大小並未發生改變。

兩種盒模型的優缺點

舉個栗子 ui

<style>
  .content-box {
    width: 150px;
    height: 150px;
    background: #fff;
    margin-bottom: 200px;
  }

  .child1 {
    float: left;
    width: 50%;
    height: 100px;
    padding: 10px;
    border: 5px solid red;
    background: #ccc;
  }

  .border-box {
    width: 150px;
    height: 150px;
    background: #fff;
  }

  .child2 {
    float: left;
    width: 50%;
    height: 100px;
    padding: 10px;
    box-sizing: border-box;
    border: 5px solid red;
    background: #ccc;
  }
</style>

<body>
  <div class="content-box">
    <div class="child1">子元素1</div>
    <div class="child1">子元素1</div>
  </div>
  <div class="border-box">
    <div class="child2">子元素1</div>
    <div class="child2">子元素1</div>
  </div>
</body>
複製代碼

我同時設置了兩個子元素寬度都是父元素的50%；當想在子元素內加padding或者border時，標準模型盒子的實際寬度就會超過50%，致使換行。若是強行想讓子元素在同一行內，就不能設置寬度爲50%，而應該經過計算width:cacl(50% - 2 * padding - 2 * border);而對於IE盒模型，內容的寬度會根據padding和border進行調整，元素的真實寬度始終是50%，因此不會致使換行。spa