css盒子模型

html文档中的每个元素都被描绘成矩形盒子，这些矩形盒子通过一个模型来描述其占用空间，这个模型称为盒模型。盒模型通过四个边界来描述：margin（外边距），border（边框），padding（内边距），content（内容区域），如图所示：

 

padding，border，margin都是可选的，默认值为0，但是浏览器会自行设置元素的margin和padding；

水平格式化：

水平格式化的七大属性：width ，padding-left ,padding-right , border-left , border-right , margin-lefft ,margin-right ;这七个属性加起来等于父级元素的width值；

其中margin-left，width，margin-right可以设置为auto。

垂直格式化：

垂直格式化的七大属性：height，padding-top ,paddin-bottom, border-top ,border -bottom ,margin-top, marin-bottom;这七个属性加起来等于父级元素的height值；

 

当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。而不是等于两个外边距的和；