全文摘抄自 https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing

box-sizing 屬性用於更改用於計算元素寬度和高度的默認的 CSS 盒子模型。可以使用此屬性來模擬不正確支持CSS盒子模型規範的瀏覽器的行為。

/* 關鍵字 值 */
box-sizing: content-box;
box-sizing: border-box;

/* 全局 值 */
box-sizing: inherit;
box-sizing: initial;
box-sizing: unset;

在CSS中，你設置一個元素的 width

box-sizing 屬性可以被用來調整這些表現:

• content-box 是默認值。如果你設置一個元素的寬為100px，那麽這個元素的內容區會有100px寬，並且任何邊框和內邊距的寬度都會被增加到最後繪制出來的元素寬度中。
• border-box 告訴瀏覽器去理解你設置的邊框和內邊距的值是包含在width內的。也就是說，如果你將一個元素的width設為100px,那麽這100px會包含其它的border和padding，內容區的實際寬度會是width減去border + padding的計算值。大多數情況下這使得我們更容易的去設定一個元素的寬高。

一些專家甚至建議所有的Web開發者們將所有的元素的box-sizing都設為border-box。

值

content-box

默認值，標準盒子模型。 width 與 height 只包括內容的寬和高， 不包括邊框（border），內邊距（padding），外邊距（margin）。註意: 內邊距, 邊框 & 外邊距 都在這個盒子的外部。 比如. 如果 .box {width: 350px}; 而且 {border: 10px solid black;} 那麽在瀏覽器中的渲染的實際寬度將是370px;

尺寸計算公式：width = 內容的寬度，height = 內容的高度。寬度和高度都不包含內容的邊框（border）和內邊距（padding）。

border-box

width 和 height 屬性包括內容，內邊距和邊框，但不包括外邊距。這是當文檔處於 Quirks模式 時Internet Explorer使用的盒模型。註意，填充和邊框將在盒子內 , 例如, .box {width: 350px; border: 10px solid black;} 導致在瀏覽器中呈現的寬度為350px的盒子。內容框不能為負，並且被分配到0，使得不可能使用border-box使元素消失。

這裏的維度計算為：

width = border + padding + 內容的 width，

height = border + padding + 內容的 height。

例子

/* 支持 Firefox, Chrome, Safari, Opera, IE8+ 和老的Android瀏覽器 */

.example {
  -moz-box-sizing: border-box;
       box-sizing: border-box;
}

CSS box-sizing屬性