CSS学习总结系列7——CSS属性:边框、边界、补白

CSS属性

1. 边框(border)
2. 边界(margin)
3. 补白(padding)

边框(border)

每个边框(border)有 3 个方面：宽度(width、样式(style)和颜色(color)。边框宽度默认为 medium，这个值没有明确定义，不过通常是 2 个像素。边框的样式默认值为 none，这样一来，就不会有边框了。默认的边框颜色是元素本身的前景色。如果没有为边框声明颜色，它将与元素的文本颜色相同。另一方面，如果一个元素没有任何文本，那么该元素将继承其父元素的文本颜色。

对行内元素应用上下边框时，边框总是绘制，但对行高没有任何影响。应用侧边边框时，文本会在其旁边显示。

编号	属性	含义	默认值	应用于	继承性	IE	FF	W3C
1	border	边框综合属性	见单个属性	所有元素	无	4	1	1
2	border-bottom	下边框综合属性	简写属性未定义	所有元素	无	4	1	1
3	border-bottom-color	下边框颜色属性	元素的color值	所有元素	无	4	1	2
4	border-bottom-style	下边框样式属性	none	所有元素	无	4	1	2
5	border-bottom-width	下边框宽度属性	medium	所有元素	无	4	1	1
6	border-color	边框颜色属性	简写属性未定义	所有元素	无	4	1	1
7	border-left	左边框综合属性	简写属性未定义	所有元素	无	4	1	1
8	border-left-color	左边框颜色属性	元素的color值	所有元素	无	4	1	2
9	border-left-style	左边框样式属性	none	所有元素	无	4	1	2
10	border-left-width	左边框宽度属性	medium	所有元素	无	4	1	1
11	border-right	右边框综合属性	简写属性未定义	所有元素	无	4	1	1
12	border-right-color	右边框颜色属性	元素的color值	所有元素	无	4	1	2
13	border-right-style	右边框样式属性	none	所有元素	无	4	1	2
14	border-right-width	有边框宽度属性	medium	所有元素	无	4	1	1
15	border-style	边框样式属性	简写属性未定义	所有元素	无	4	1	1
16	border-top	上边框综合属性	简写属性未定义	所有元素	无	4	1	1
17	border-top-color	上边框颜色属性	元素的color值	所有元素	无	4	1	2
18	border-top-style	上边框样式属性	none	所有元素	无	4	1	2
19	border-top-width	上边框宽度属性	medium	所有元素	无	4	1	1
20	border-width	边框宽度属性	简写属性未定义	所有元素	无	4	1	1

border

取值：[ <border-width> || <border-style> || <border-color> ] | inherit

说明：简写属性。省略的边框属性值自动设置为默认值。

border-top、border-right、border-bottom、border-left

取值：[ <border-width> || <border-style> || <border-color> ] | inherit

border-style

取值：[ none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset ]{1,4} | inherit

border-top-style、border-right-style、border-bottom-style、border-left-style

取值： none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit

说明：

• none:没有边框。
• hidden:隐藏边框。
• dotted:点线边框。在大多数浏览器中呈现为实线。
• dashed:虚线边框。在大多数浏览器中呈现为实线。
• solid:实线边框。
• double:双线。双线的宽度等于 border-width 的值。
• groove:定义3D凹槽边框。其效果取决于 border-color 的值。
• ridge:定义3D菱形边框。其效果取决于 border-color 的值。
• inset:定义3D凹边。其效果取决于 border-color 的值。
• outset:定义3D凸边。其效果取决于 border-color 的值。

注意：

• 在 CSS1 中，HTML 用户代理只需支持 solid 和 none。
• 只有当这个值不是 none 时边框才可能出现。

border-width

取值：[ thin | medium | thick | <length> ]{1,4} | inherit

border-top-width、border-right-width、border-bottom-width、border-left-width

取值： thin | medium | thick | <length> | inherit

border-color

取值： [ <color> | TRansparent ]{1,4} | inherit

border-top-color、border-right-color、border-bottom-color、border-left-color

取值： <color> | transparent | inherit

边界(margin)

CSS 边界属性定义元素周围的空间。可以用用负值对内容进行叠加。通过使用单独的属性，可以对上、右、下、左的外边距进行设置。也可以使用简写的外边距属性同时改变所有的外边距。边界属性接受关键字auto，长度值或百分比值。

编号	属性	含义	默认值	应用于	继承性	IE	FF	W3C
1	margin	边界综合属性	未定义	所有元素	无	4	1	1
2	margin-bottom	下边界距离属性	0	所有元素	无	4	1	1
3	margin-left	左边界距离属性	0	所有元素	无	3	1	1
4	margin-right	右边界距离属性	0	所有元素	无	3	1	1
5	margin-top	上边界距离属性	0	所有元素	无	3	1	1

margin

取值： [ <length> | <percentage> | auto ]{1,4} | inherit

说明：按照顺时针方向声明：trbl。

margin-top 、margin-right 、margin-bottom 、margin-left

取值： <length> | <percentage> | auto | inherit

值复制：

• 如果缺少左边界的值，则使用右边界的值。
• 如果缺少下边界的值，则使用上边界的值。
• 如果缺少右边界的值，则使用上边界的值。

注意：

• 允许使用负值，只要father.width=child.width+child.padding+child.margin。
• 行内非替换元素的上下边界不会影响行高，左右边界会增加空白距离。
• 百分数相对于其父元素的width计算。

补白(padding)

CSS 补白属性定义元素边框与元素内容之间的空白。负值是不被允许的。通过使用单独的属性，可以分别设置上、右、下、左内边距。也可以通过简写内边距属性 padding 来同时控制元素的多个边。内边距属性接受长度值或百分比值。

编号	属性	含义	默认值	应用于	继承性	IE	FF	W3C
1	padding	补白综合属性	未定义	所有元素	无	4	1	1
2	padding-bottom	下补白距离属性	0	所有元素	无	4	1	1
3	padding-left	左补白距离属性	0	所有元素	无	4	1	1
4	padding-right	右补白距离属性	0	所有元素	无	4	1	1
5	padding-top	上补白距离属性	0	所有元素	无	4	1	1

padding

取值：[ <length> | <percentage> ]{1,4} | inherit

padding-top、padding-right、padding-bottom、padding-left

取值： <length> | <percentage> | inherit

注意：

• 百分数相对于其父元素的width计算。
• 同边框一样，非替换元素的上下补白不会影响行高。左右补白不会覆盖文本。