CSS盒子模型
2018-02-22 本文已影响0人
StrawberrySan
盒子模型的图形理解
CSS盒子模型
盒子模型的内容范围包括：
margin（外边距）， border（边框），padding（内边距），content（内容）组成。
CSS内边距（padding）
1.内边距：
内边距在content外，边框内。
2.内边距属性：
- padding（设置所有边距）
- padding-bottom（设置底边距）
- padding-left（设置左边距）
- padding-right（设置右边距）
- padding-top（设置上边距）
CSS边框（border）
1.边框的样式：
border-style：定义了10个不同的非继承样式，包括none。
2.边框的单边样式：
border-top-style（top可换位left，right，bottom）
3.边框的宽度：
border-width
4.边框的单边宽度：
border-top-width（top可换位left，right，bottom）
5.边框的颜色
border：颜色
6.边框的单边颜色：
border-top-color(top可换位left，right，bottom)
CSS3边框：
- border-radius（圆角边框）
- box-shadow（边框阴影）
- border-image（边框图片）
如以下示例：
border示例
外部样式表
boder示例效果
CSS外边距（margin）
1.外边距：
围绕在内容边框区域就是外边距，外边距默认为透明区域。外边距接受任何长度单位，百分数值。
2.外边距常用属性：
- margin（设置所有边距）
- margin-bottom（设置底边距）
- margin-left（设置左边距）
- margin-right（设置右边距）
- margin-top（设置上边距）
margin示例
外部样式表
margin示例效果
CSS外边距合并
外边距合并就是一个叠加的概念。图形理解如下：
外边距合并
如下练习示例：
外边距合并示例
外部样式表
外边距合并示例效果
变为50px时的变化效果示例
