十二．控制BOX的样式 ( a3 m4 M3 n5 M5 ^: k4 q
样式表规定了一个容器BOX，它将要储存一个对象的所有可操作的样式。包括了对象本身、边框空白、对象边框、对象间隙四个方面。
- l7 J/ u0 m6 k' S! S2 D6 C
; I) w! E- J8 e6 l4 Q1 ?
. r, w1 u# F8 A4 [. E
为了大家更好地理解这些属性的意义，以及互相之间的关系，请看下面这个图示：
# e4 M# t9 q0 ?' L2 M; f
1．边框空白（MARGIN）
: A, P% V* I% u/ P/ `
如图所示，位于BOX模型的最外层，包括四项属性。
H; @! \, w/ q, V; _
格式分别如下：
6 Q: `+ L# l0 q$ t# G: W
·margin-top：顶部空白距离
6 d8 n: x6 k+ T1 Q( Z
·margin-right：右边空白距离
+ s5 f) _- _7 y. o J6 ]·margin-bottom：底部空白距离
/ J* z5 t5 t: H% U# ~
·margin-left：左边空白距离
* J& [1 n; V; P空白的距离可以用带长度单位的数字表示。
0 H& ?$ b+ n. X& g6 T( l如果使用上述属性的简化方式margin，可以在其后连续加上四个带长度单位的数字，来分别表示margin-top、margin-right、margin-bottom、margin-left，每个数字中间要用空格分隔。
! _# ~( l9 ^. j# \7 d2．对象边框（BORDER）
' v7 t1 t# a7 ~- h% d' \! O
如图所示，位于边框空白和对象空隙之间，包括了七项属性。
, C% u1 i7 ]* x2 `2 d' o格式分别如下：
; ?1 T9 v/ Z5 ]8 P·border-top：顶边框宽度
. j; F+ w: i6 M2 {( K* E8 \
·border-right：右边框宽度
/ s c7 x9 }: k5 l2 [3 U
·border-bottom：底边框宽度
( x* S& \; _0 }! c% r5 ?& _- Q
·border-left：左边框宽度
9 G$ k2 V) n- Y
·border-width：所有边框宽度
: R9 G& a' u( a
·border-color：边框颜色
' l, r5 {: l0 ], ^ u6 Q
·border-style：边框样式参数
* ]& @% W; I. y% x- @
其中border-width可以一次性设置所有的边框宽度，border-color同时设置四面边框的颜色时，可以连续写上四种颜色，并用空格分隔。上述连续设置的边框都是按border-top、border-right、border-bottom、border-left的顺序。
8 n5 R1 |5 h- y7 LBorder-style相对别的属性而言稍稍复杂些，因为它还包括了多个边框样式的参数：
# S* ^+ w" b! J! T
·none：无边框。
+ |7 j5 W% \; U$ }0 b4 G) |·dotted：边框为点线。
o, _4 r! ]% C- }5 O i. C
·dashed：边框为长短线。
" \4 O- s7 R" M) Q
·solid：边框为实线。
( I4 j) v: K% `
·double：边框为双线。
+ w5 A1 d3 [6 I7 @3 \
·groove：根据color属性显示不同效果的3D边框
- r0 G; f% K7 @- S2 S3 s# o
·ridge：根据color属性显示不同效果的3D边框
1 f8 ~/ }" m$ I- i
·inset：根据color属性显示不同效果的3D边框
s+ C# \ [) C; j
·outset：根据color属性显示不同效果的3D边框
# m# c2 \6 n" R5 a! y) }' c& C
3．对象间隙（PADDING）
( E: b# y7 o* O: E
如图所示，位于对象边框和对象之间，包括了四项属性。
/ m. @: K* P4 o k, }基本格式如下：
) u9 C2 M/ T6 V: w3 O·padding-top：顶部间隙
' W! {: h9 N: y7 Y·padding-right：右边间隙
" C# E7 H f# @/ Y) c·padding-bottom：底部间隙
1 I% n e I6 S·padding-left：左边间隙
) q7 E; o3 F: x8 R+ H% r- |
和MARGIN类似，PADDING也可以用padding一次性设置所有的对象间隙，格式也和MARGIN相似，不再一一列举了。
