进击的前端之盒子模型

盒子模型

内容区域(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