盒子模型是CSS中的一个重要概念。虽然CSS中没有盒子模型的属性，但它在CSS中无处不在。盒子模型是由margin制成的、border、几个属性组合的padding和content
盒子模型中最重要的是内容，它是必要的，其他项目都是可选的。 如上图所示，盒形模型有内外顺序：
- content(内容，可以是文字、图片等。)
- padding(内距，又称空白、内补丁等。)
- border（边框。）
- margin(外边距，也叫边界。)
padding将内容与边框之间的距离设置为缓冲带。
border边框线粗线和样式设置内容等。
margin设置一个内容和另一个内容之间的距离。
当使用css定义盒子模型时，我们设置的宽度和高度只设置了内容（content）块的高度和宽度，而不是内容、内边距、边框和外边距的总和。
如果将背景定义为盒子模型，则定义后的背景将是内容（content）区域与内边距（padding）区域显示是图中的蓝色区域，外框无法设置背景。
从盒子模型的四个组成属性来看，盒子模型的尺寸应该结合这四个方面来计算：
盒型宽度=左margin宽度 左border宽度 左paddin宽度 content宽度 右paddin宽度 右border宽度 右margin宽度
只要将左右改为上下，高度计算方法与宽度计算方法相同。
