CSS盒模型

        CSS 处理网页时，它认为每个元素都包含在一个不可见的盒子里。这就是众所周知的盒模型，这里的盒子由内容区域、内容区域周围的空间（内边距(padding)）、内边距的外边缘（边框(border)）和边框外面将元素与相邻元素隔开的不可见区域（外边距(margin)）构成，参见下图。这类似于挂在墙上的带框架的画，其中图画是内容，衬边是内边距，框架是边框，而该画框与相邻画框之间的距离则是外边距。

每个元素的盒子都有一些决定该元素所占空间及其外观的要素。可以使用 CSS 分别控制各个要素。注意，在默认情况下，宽度（width）和高度（height）仅定义内容区域的尺寸。背景（background 蓝色区域）会延伸到边框的后面，因此，通常情况下，它仅在内边距所延伸到的区域可见，除非边框是透明的或半透明的。

---

对大多数代码编写人员来说，另一种方式则更为直观。使用这种方式的话，元素的显示宽度就等于 width 属性的值。内容宽度、内边距和边框都包含在里面（如下图所示）。要使用这种模式，仅需对元素设置 box-sizing: border-box;。height 属性与之类似。

如果设置了 box-sizing: border-box;，则宽度和高度就包含了除外边距以外的所有要素。