HTML5盒模型

盒模型:在HTML中每一个标签都具有一个盒模型,盒模

型的组成部分:content(内容),padding(内边距),border(边框),margin(外边距)

content:由width和height来设置,用于控制元素承载内容的区域

padding:用于设置边框与内容之间的距离

border:用于设置元素的边框

margin:用于设置两个元素之间的距离

一、padding:复合了四个属性，1个值得时候是上下左右。2个值是上下，左右。3个值是上，左右，下。4个值是上右下左。

二、border：border-width是边框宽度，border-style是边框样式，border-corlor是边框颜色

四个边框是：left、right、top、bottom

在border样式中：solid是实线、dotted是点线、dashed是虚线、double是双实线

三、margin：外边距margin-left、margin-right、margin-top、margin-bottom

1个值得时候是上下左右。2个值是上下，左右。3个值是上，左右，下。4个值是上右下左。

四、margin的bug

1，上下两个兄弟标签：

上面元素的margin-bottom和下边元素的margin-top取两者最大值，不是相加关系。

2，父子嵌套的元素：

父元素没有设置边框，子元素的margin-top会传递给父元素，此时给父元素设置overflow：hidden。