盒模型

一般来说，网页中的元素由内容（content）、边框（border）、内边距（padding）和外边距（margin）组成，构成的这个结构称之为盒模型。

下面浅谈一下盒模型的两种呈现方式。

元素可以通过box-sizing来设置是content-box还是border-box。从上图可以看出，在没有明确设置box-sizing的默认状态下，元素采用content-box。

在同样的设置下，content-box和border-box呈现出来的结果很不一样。

二者宽度的公式如下：

content-box width = 内容宽度

border-box width = 内容宽度+padding+border

在 CSS 盒子模型的默认定义里，你对一个元素所设置的 width 与 height 只会应用到这个元素的内容区。如果这个元素有任何的 border 或 padding ，绘制到屏幕上时的盒子宽度和高度会加上设置的边框和内边距值。这意味着当你调整一个元素的宽度和高度时需要时刻注意到这个元素的边框和内边距。当我们实现响应式布局时，这个特点尤其烦人。（源自 MDN）

从前人大神的经验中我们可以知道，border-box在实际运用中更好。