CSS盒模型总结

今天来总结一下关于CSS盒模型的一些相关知识，简单来说CSS盒子模型就只是一个形象的比喻，把每一个可见的HTML元素都可以说成是一个盒子，以下通过两个方面来简单总结一下。

1.盒子的组成

盒子一般是指块级元素，一个盒子由外边距（margin）、内边距（padding）、边框（border）以及内容区域（content）组成，我们可以发现margin、padding和border都是CSS属性，它们三是用来控制盒子的边距边框，而content就是描述HTML元素的内容，通过width/height属性设置content的宽度和高度。如同所示例：

 1.1盒子的属性

margin（外边距 ）：代表盒子四周的区域。相邻元素的边距会合并（margin collapsing）

border（边框）：设定介于padding的外边缘与margin的内边缘之间，默认值为0

padding（内边距）：内间距 在任何定义的边界内的元素内容周围生成空间

除此之外，还会给设置width & height（宽高），这里的宽高是设置内容区的宽高，该片区域用于显示内容。盒子高度默认为内容的高度。

需要注意的是：边框属性，外边距属性和内边距属性如果上下左右的值不相同的时候需要按照顺时针方向编写，即上右下左。<