CSS第三章：2.详解盒子模型 box-module（content内容区、border边框、内外间距）

总览

1.盒装型（box module），也称为盒子模型、框模型
2.CSS将页面中所有的元素都设置为了一个矩形的盒子
3.将元素设置为矩形的盒子之后，对页面的布局 就变成了 将不同的盒子摆放到不同的位置

一、盒装型

1.每个盒子都由以下部分组成：

· 内容区（content）
· 边框（border）
· 内边距（padding）
· 外边距（margin）

2.盒子模型图解：

二、盒装型 · content 内容区

1.内容区功能：
元素中所有的内容和子元素的文本内容都在此处排列，不会超出内容区的范围

2.设置内容区的大小：height 、width 属性
2.1 HTML代码：

2.2 CSS代码：

2.3 显示效果：

三、盒装型 · border 边框（1.简介）

1.边框的功能：
· 边框属于盒子的边缘，边框里面属于盒子内部，出了边框就是盒子的外部
· 边框的大小会影响到整个盒子的 大小

2.设置边框，需要三个元素：
· 边框的宽度（border-width）
· 边框的颜色（border-color）
· 边框的样式（border-style）

3.HTML代码：

4.CSS代码：

5.显示效果

四、盒装型 · border 边框（2.border-width）

1.边框宽度 border-width 详解
· 可以有4个参数，分别设置 上、右、下、左
· 参数之间使用 空格 隔开
· 如果只写3个参数，那么就分别设置了 上、右、下，左面的边框默认和右边的边框取一样的值
· 如果只写2个参数，那么就分别设置了 上、右，下面左面的边框默认和上面右面的边框取一样的值

2.HTML代码：

3.CSS代码：

4.显示效果：

五、盒装型 · border 边框（3.border-color）

1.边框颜色 border-color 详解
· 可以有4个参数，分别设置 上、右、下、左
· 参数之间使用 空格 隔开
· 如果只写3个参数，那么就分别设置了 上、右、下，左面的边框默认和右边的边框取一样的颜色
· 如果只写2个参数，那么就分别设置了 上、右，下面左面的边框默认和上面右面的边框取一样的颜色

2.HTML代码：

3.CSS代码：

4.显示效果：

六、盒装型 · border 边框（4.border-style）

1.边框样式 border-style 详解

· 参数值：
solid - 实线
dotted - 点状虚线
dashed - 虚线
double - 双线…

· 默认值为 null，没有边框
· 参数之间使用 空格 隔开

七、盒装型 · border 边框（5.简写属性1）

1.实际开发中，一般使用简写属性对边框进行定义

2.HTML代码：

3.CSS代码：

4.显示效果：

八、盒装型 · border 边框（6.简写属性·分别进行设置）

1.边框分别进行简写属性设置：
· border-top：上边框
· border-right：右边框
· border-bottom：下边框
· border-left：左边框

2.HTML代码：

3.CSS代码：（我只写一个上边框 border-top 的，其余的请自己尝试）

4.显示效果：

四、盒装型 · padding 内间距

1.文档太长了，换一个写，请移步：
详解盒装型 · padding 内间距

五、盒装型 · margin 外间距

1.文档太长了，换一个写，请移步：
详解盒装型 · margin 外间距