盒子模型（box model），也可以叫框模型，是网页布局的基础，每个HTML元素都被表示为一个矩形盒子，盒子包含了它的内容（content）、内边距（padding）、边框（border）和外边距（margin），每部分都可以用一个或多个CSS属性来指定其大小、颜色等，可以参考下图：
1.内容盒子（content-box）由width和height来表示内容的宽度和高度，主要用来存放盒子的内容，包括文本以及其他嵌套子元素的盒子。除此之外，还有min-width、max-width、min-height和max-height可以用来设置盒子的最大/最小宽度和高度值。
2.padding，表示盒子的内边距，它表示从边界到content-box之间的空间，padding属性可以设置盒子四条边，同时还提供了padding-top、padding-right、padding-bottom和padding-left分别设置盒子各个方向的内边距。
3.border，表示盒子的边框，它分割了内边距和外边距，边框厚度默认为0（即不可见），但可以通过border简写属性来设置边框厚度、样式和颜色，例如border:1px solid blue;可以设置厚度为1像素的蓝色实体边框。
同样地，border有可以通过border-top、border-right、border-bottom和border-left来设置各条边的样式。
4.margin，表示盒子的外边距，就是盒子边框往外的区域，一般用外边距设置来与其他元素保持一定距离，类似padding，margin是简写属性，它还提供了padding-top、padding-right、padding-bottom和padding-left分别设置各方向的外边距。
特殊地，当两个盒子的接触在一起时，它们的间距合并为两者中最大的外边距的距离，而不是两者外边距的总和，这种特性叫外边距塌陷（margin-collapsing）。
除了上面这些属性外，还有其他的一些可以控制盒子显示内容的属性，例如：
overflow
这个属性用来控制当盒子装不住所有内容时的表现，分别可以设置以下三个值：
auto：当内容过多，溢流的内容被隐藏，然后出现滚动条来让我们滚动查看所有的内容。
hidden：当内容过多，溢流的内容被隐藏。
visible（默认值）：当内容过多，溢流的内容被显示在盒子的外边。
background-clip
这个属性用来裁剪盒子的背景内容，分别可以设置以下三个值：
border-box（默认）：背景内容显示到边框。
padding-box：背景内容显示到内边距。
content-box：背景显示到内容盒子内。
CSS盒子类型
CSS中盒子类型有很多种，常见有三种：块级盒子（block box）、行内盒子（inline box）和行内块级盒子（inline-block box），它可以使用display属性来设置。HTML中的块级元素默认display为block，行内元素默认display为inline。
下面分别说明几种盒子类型的特点：
block
-
独占一行（前后自动换行）
-
宽度是其父元素的100%
-
高度是其（最大）内容的高度
-
可设置宽高
-
可包含其他的块盒子或行内盒子
inline
-
与其他行内盒子并行在一行
-
宽高与其内容的宽高一致
-
不能设置宽高
-
不可包含其他盒子
inline-block
它是上面两者的结合体：
- 不会独占一行，会与其他行内盒子一起随文字流动
- 可以设置宽高
- 像块级盒子（block box）一样保持完整性，不会像行内盒子那样会被拆开两行，但若单独一行都没有足够的空间存放它会断开多层，失去一个盒子的形状