CSS学习篇（五） 盒子模型（框模型）

盒子模型（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（