盒模型

定义

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 之和。