一：介绍
1
2
3
| 盒模型也叫盒子模型，框模型，英文名是box modle,css将页面中所有
的元素都设置成了一个矩形的盒子，将元素设置为矩形的盒子后，对
页面的布局就是将不同的盒子摆放在不同的位置。
|
二：盒子的组成
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
| - 内容区域（content）
元素中的所有的子元素和文本内容都在内容区排列，
内容区的大小由width和height来设置。
- 内边距（padding）
- 边框（border）
边框属于盒子边缘，边框内的属于盒子内，边框外的的属于盒子外，
边框的大小会影响整个盒子的大小。
要设置边框需要同时设置如下三个样式：
- 边框的宽度 border-width （有默认值，一般是3px）
border-width:10px;
- 表示上右下左都是10px;
border-width:10px 20px 30px 40px;
- 表示上右下左顺时针的大小分别是10px 20px 30px 40px
border-width:10px 20px;
- 表示上下是10px，左右是20px
还有：border-top-width
border-right-width
border-bottom-width
border-left-width
- 边框的颜色 border-color（有默认值，是color的值，默认是黑色）
其中border-color:可以设置一个值，两个值，三个值，四个值,
也有top,right,bottom,left等单个值，如：border-top-color
- 边框的样式 border-style（默认值是none，表示没有）
其中border-style:可以设置一个值，两个值，三个值，四个值,
也有top,right,bottom,left等单个值,如：border-top-style
- solid 实线
- dotted 点状虚线
- dashed 虚线
- double 双线
- none 无
简写方法：
border:1px solid red;并且没有顺序要求，也可以写成border:1px red solid;
也有border-top:1px solid red;bottom,left,top等。
- 外边距（margin）
|
三：padding（内边距）
3.1 介绍
1
2
3
4
5
| 边框和内容区之间的距离就是padding，分成了padding-top,padding-left,
padding-bottom,padding-right等，内边距的设置会影响整个盒子的大小，
背景颜色会延伸到内边距上。
所以一个盒子可见框的大小是由内容区，内边距和内边框一起决定的，是
三个加总的结果。
|
3.2 语法
1
2
3
4
5
| padding的写法和border-width相同，也分了上下左右，也可以直接用padding来简写，
如：
padding:10px 20px 30px 40px
padding:10px 20px; 上下内边距10px，左右20px
padding-left:10px;
|
四：margin（外边距）
4.1 介绍
1
2
3
4
5
| 外边距不会影响可见框的大小，会影响盒子所在的位置。也是一共四个方向的margin，
margin-top,margin-left,margin-bottom,margin-right等。可为正值和负值。
元素在页面中是按照自左向右排列的，所以默认情况下我们设置了上和左外边距会
影响自身位置，右和下会影响其他盒子的位置。
|
4.2 语法
1
2
3
4
5
6
| margin-top:10px;
margin-bottom:-100px;
margin:10px 20px 30px 40px;
margin:10px 20px;
margin:10px;
都是按着上右下左来设置的，也就是顺时针。
|
*************感谢您的阅读*************
