盒子模型
内容区域(content)+内边距区域(padding)+边框区域(border)+外边距区域(margin)=盒子模型
内容区域
利用weight和height属性设置盒子的内容区域大小
边框区域
- 边框粗细：border-width
- 边框样式: border-style
- 边框颜色: border-color
- 边框复合：border: width style color
- 边框方向：border-top、border-right、border-bottom、border-left
实际问题的解决： 盒子会被border给撑大，我们需要将多余的大小在内容区域减少。
内边距区域
内容和边框之间的距离
padding：上 右 下 左（padding-top、padding-right、padding-bottom、padding-left）
实际问题解决： 盒子会被border和padding给撑大，我们需要将多余的大小在内容区域减少。也可以设置box-sizing：border-box，实现自动内减。
外边距区域
盒子和盒子之间的距离
margin： 上 右 下 左（margin-top、margin-right、margin-bottom、margin-left）
问题1：如何清除内外边距？
* {
margin: 0;
padding: 0;
}
问题2：如何解决外边距折叠问题之合并现象？
只给其中一个盒子设置 margin。
问题3：如何解决外边距折叠问题之塌陷现象？
- 给父元素设置 overflow:hidden
- 转换成行内块元素
- 设置浮动
- 给父元素设置border-top或padding-top
