border-sizing屬性詳解和應用

godbmw發表於2018-07-27

box-sizing用於更改用於計算元素寬度和高度的預設的 CSS 盒子模型。它有content-box、border-box和inherit三種取值。inherit指的是從父元素繼承box-sizing表現形式，不再冗贅。

1. 屬性講解

content-box

預設值，也是css2.1中的盒子模型。在計算width和height時候，不計算border、padding和margin。高度、寬度都只是內容高度。

border-box

css3新增。 width和height屬性包括內容，內邊距和邊框，但不包括外邊距。

計算公式：

  1. width = width = border + padding + 內容寬度
  2. height = border + padding + 內容高度

2. 考慮盒子模型的margin

從上面可以知道，即時是border-box也是不計算margin，只是多餘計算了border和padding。因為border和padding都是盒子模型的一部分，但是margin標記的是盒子和盒子的間距。所以，border-box的解釋很符合常理。

問題來了，如果有時候一定要設定margin，怎麼做到自由控制來保證相容？例如，我們下面要設定一個撐滿頁面的盒子元素，而且有外邊距干擾，怎麼做？

實現如下效果圖：
border-sizing屬性詳解和應用

程式碼：原始碼下載

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>yuanxin.me</title>
  <style type="text/css">
    *{
      margin: 0;
      padding: 0;
    }
    #app {
      box-sizing: border-box; /* 指定計算方式 */
      margin: 10px; /* 外邊距干擾 */
      /* 利用 css3 的 calc */
      width: calc(100vw - 2*10px);
      height: calc(100vh - 2*10px);
    }
  </style>
</head>
<body>
  <div id="app">
  </div>
</body>
</html>

所以，當需要計算外邊距(margin)，可以配合css3中的四則運算（calc）來使用。

3. 使用建議

根據專案中的使用經驗和w3c的建議，推薦將box-sizing屬性設定為border-box。

* {
  margin: 0;
  padding: 0;
}
div {
  box-sizing: border-box;
}

4. 關於

歡迎技術交流，引用請註明出處。
個人網站：godbmw.com
原文連結：border-sizing屬性詳解和應用

相關文章