定義

html文檔中的每個元素都被描繪成矩形盒子，這些矩形盒子通過一個模型來描述其占用空間，這個模型稱為盒模型。盒模型通過四個邊界來描述：margin（外邊距），border（邊框），padding（內邊距），content（內容區域），如圖所示：

CSS3中新增了一種盒模型計算方式：box-sizing。常用的值有兩個：content-box（默認）和border-box。

content-box

布局所占寬度Width：

Width = width + padding-left + padding-right + border-left + border-right

布局所占高度Height:

Height = height + padding-top + padding-bottom + border-top + border-bottom

看個例子

div{
  width:200px;
  height:200px;
  padding:10px;
  border:1px solid black;
}

content-box 設置的 width 是內容區域的寬度，height 是內容區域的高度。

border-box

布局所占寬度Width：

Width = width(包含padding-left + padding-right + border-left + border-right)

布局所占高度Height:

Height = height(包含padding-top + padding-bottom + border-top + border-bottom)

看個例子

div{
  box-sizing:border-box;
  width:200px;
  height:200px;
  padding:10px;
  border:1px solid black; 
}

border-box 設置的 width 是布局所占的寬度，也就是內容區域的寬 + padding-left + padding-right + border-left + border-right 之和。height 是布局所占的高度，也就是內容區域的高 + padding-top + padding-bottom + border-top + border-bottom 之和。