浅谈HTML盒模型

在HTML中 每一个元素都被当成一个盒子，拥有盒子的平面外形和空间

1.盒模型由:内容(content) 内边距(padding) 边框(border) 外边距(margin)组成
2.盒模型分为标准盒模型和怪异盒模型

标准盒模型所占用空间大小的计算方式为：

1. content(宽高) + margin + padding + border

怪异盒模型所占用空间大小的计算方式为：

1. content(宽高) + 外边距(margin) // 在怪异盒模型中 宽高已经包括了内边距和边框

怪异盒模型出现在IE6中 也可能出现在混杂模式中(没有写版本声明)
css3提供了一个box-sizing属性 控制元素的盒模型类型 值为border-box/content-box

组成盒模型的4个元素:

width:

1. width就是我们设置的内容区域

padding:

1. padding不能为负
2. 可以显示背景颜色和图片
3. 主要是用来撑开元素的内容和边框之间的距离
4. 常用在撑开父子之间的距离

border

1. border分开设置: border-width border-style border-color
2. 边框下也有背景颜色和背景图片 (背景图片默认显示位置从padding的左上角开始)

margin:

1. 不能显示背景颜色 也不能显示任何内容
2. 只用来撑开兄弟元素之间的距离
3. 如果某个父级元素的第一个子元素和最后一个子元素同时都拥有margin属性 那么可能会造成父级塌陷
4. 某个元素它上面元素的margin-bottom和它的margin-top会重合 然后取最大的值作为两个之间的距离
5. margin还可以做水平居中操作