边框、外边距和内边距
有3种属性可以控制例子的外观
分别是外边距maring，边框border，内边距padding
它们的值的大小会影响外观，在浏览器上显示的位置。
当内边距增大时，盒子的外观会变大。
设置内边距的示例：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>盒子的宽和高</title> <style> div{ 200px; height:200px; padding:16px; margin:32px; border:12px; } </style></head><body><h1>利永贞网</h1><div>学编程，上利永贞网</div><p>study hard, improve every day</p></body></html> |
显示效果
在浏览器里看外边距maring，边框border，内边距padding效果
边框颜色
CSS 的 border-color可以设置边框颜色。
颜色值可以是RGB，也可以是十六进制，或是颜色名称。
边框颜色需要配置边框宽度才能显示出来。
边框有4个，边框颜色也有4个，它们是：
- border-top-color
- border-right-color
- border-bottom-color
- border-left-color
border-color可以写一个值，也可以写4个值，写4个值时，各个值之间用空格隔开，它们分别表示边框的顶部、右边、底部、左边的颜色。
边框宽度
border-width 属性可以设置边框的宽度。
宽度通常使用像素为单位，好控制。
边框宽度需要颜色和边框线条才能显示出来。
边框有4个，边框宽度也有4个，它们是：
- border-top-width
- border-right-width
- border-bottom-width
- border-left-width
border-width可以写一个值，也可以写4个值，写4个值时，各个值之间用空格隔开，它们分别表示边框的顶部、右边、底部、左边的边框宽度。
边框样式
border-style 显示边框的样式。
它的样式有：
- none 和关键字 hidden 类似，不显示边框。
- hidden 和关键字 none 类似，不显示边框。
- dotted 显示为一系列圆点。
- dashed 显示为一系列短的方形虚线。
- solid 显示为一条实线。
- double 显示为一条双实线。
- groove 显示为有雕刻效果的边框，样式与 ridge 相反。
- ridge 显示为有浮雕效果的边框，样式与 groove 相反。
- inset 显示为有陷入效果的边框，样式与 outset 相反。
- outset 显示为有突出效果的边框，样式与 inset 相反。
示例：
|
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>盒子边框和颜色</title> <style> div{ 50px; height:50px; margin:16px; } div.none{ border-style:none; } div.hidden{ border-style:hidden; } div.dotted{ border-style:dotted; } div.dashed{ border-style:dashed; } div.solid{ border-style:solid; } div.double{ border-style:double; } div.groove{ border-style:groove; } div.ridge{ border-style:ridge; } div.inset{ border-style:inset; } div.outset{ border-style:outset; } </style></head><body><h1>利永贞网</h1><h2>学编程，上利永贞网</h2><p>study hard, improve every day</p><div class="none"></div><div class="hidden"></div><div class="dotted"></div><div class="dashed"></div><div class="solid"></div><div class="double"></div><div class="groove"></div><div class="ridge"></div><div class="inset"></div><div class="outset"></div></body></html> |
边框有4个，边框样式也有4个，它们是：
- border-top-style
- border-right-style
- border-bottom-style
- border-left-style
border-style可以写一个值，也可以写4个值，写4个值时，各个值之间用空格隔开，它们分别表示边框的顶部、右边、底部、左边的边框样式。
边框的快捷方式
边框具有宽度、样式、颜色等3个属性，一个一个地设置工作量有点大。
CSS也提供了减负的方式，那就是边框的快捷方式写法：
border: 宽度 样式 颜色;
示例：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>盒子边框和颜色</title> <style> div{ 50px; height:50px; border: 1px solid red; } </style></head><body><h1>利永贞网</h1><h2>学编程，上利永贞网</h2><p>study hard, improve every day</p><div></div></body></html> |