CSS2.1 盒模型
8 Box model盒模型
8.1 Box dimensions 盒子的大小
Each box has a content area (e.g., text, an image, etc.) and optional surrounding padding, border, and margin areas; the size of each area is specified by properties defined below. The following diagram shows how these areas relate and the terminology used to refer to pieces of margin, border, and padding:
每一个盒子都包含一个内容区域（例如文本，图片等等）和围绕在内容周围的可选padding, border, 和 margin区域；每个区域的大小由下面定义的属性来指定。下图说明了这些区域之间的关系和用于表示margin, border, 和 padding每一部分的术语：
The margin, border, and padding can be broken down into top, right, bottom, and left segments (e.g., in the diagram, "LM" for left margin, "RP" for right padding, "TB" for top border, etc.).
margin, border, 和 padding都可以分为top, right, bottom, 和 left四部分（例如，在上图中，"LM"表示左边的margin，"RP" 表示右边的padding, "TB" 表示顶部的border,等等）。
The perimeter of each of the four areas (content, padding, border, and margin) is called an "edge", so each box has four edges:
四个区域(content, padding, border, 和 margin)每部分的周长被称作边缘，所以每个盒子有四个边缘：
content edge or inner edge 内容区域的边缘
The content edge surrounds the rectangle given by the width and height of the box, which often depend on the element's rendered content. The four content edges define the box's content box.
内容区域的边缘围绕在由盒子的高度和宽度组成的矩形周围，它常常依赖于元素所渲染的内容。四个内容区域的边缘定义了内容盒子。
padding edge 内部填充区域的边缘
The padding edge surrounds the box padding. If the padding has 0 width, the padding edge is the same as the content edge. The four padding edges define the box's padding box.
内部填充区域的边缘围绕在盒子的内部填充区域周围。如果内部填充宽度为0，那么内部填充区域的边缘就是内容区域的边缘。四个填充区域的边缘定义了内部填充盒子。
border edge 边框的边缘
The border edge surrounds the box's border. If the border has 0 width, the border edge is the same as the padding edge. The four border edges define the box's border box.
边框的边缘围绕在盒子的边框周围。如果边框的宽度为0，那么边框的边缘就是内部填充区域的边缘。四个边框的边缘定义了边框盒子。
margin edge or outer edge 外部填充区域的边缘
The margin edge surrounds the box margin. If the margin has 0 width, the margin edge is the same as the border edge. The four margin edges define the box's margin box.
外部填充区域的边缘围绕在盒子的外部填充周围。如果外部填充区域的宽度为0，那么外部填充区域的边缘就是边框的边缘。四个外部填充区域的边缘定义了外部填充盒子。
Each edge may be broken down into a top, right, bottom, and left edge.
每一个边缘都可以分为上，右，下，左四个部分。
The dimensions of the content area of a box — the content width and content height — depend on several factors: whether the element generating the box has the 'width' or 'height' property set, whether the box contains text or other boxes, whether the box is a table, etc. Box widths and heights are discussed in the chapter on visual formatting model details.
一个盒子的内容区域的大小——内容的宽度和内容的高度——取决于几个因素：生成盒子的元素是否设置了宽度和高度，盒子是否包含文本或其他盒子，盒子是否是一个table，等等。盒子的宽度和高度将在visual formatting model details中讨论。
The background style of the content, padding, and border areas of a box is specified by the 'background' property of the generating element. Margin backgrounds are always transparent.
一个盒子的内容区域，内部填充区域和宽度区域的background样式将在所生成元素的'background'属性中描述。
8.2 Example of margins, padding, and borders 举例说明边框区域，内部和外部填充区域
This example illustrates how margins, padding, and borders interact. The example HTML document:
下面的例子介绍了margins, padding, 和 borders 之间是怎样互相影响的。HTML文档例子：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>Examples of margins, padding, and borders</TITLE>
<STYLE type="text/css">
UL {
background: yellow;
margin: 12px 12px 12px 12px;
padding: 3px 3px 3px 3px;
/* No borders set 没有设置边框*/
}
LI {
color: white; /* text color is white */
background: blue; /* Content, padding will be blue */
margin: 12px 12px 12px 12px;
padding: 12px 0px 12px 12px; /* Note 0px padding right */
list-style: none /* no glyphs before a list item */
/* No borders set */
}
LI.withborder {
border-style: dashed;
border-width: medium; /* sets border width on all sides */
border-color: lime;
}
</STYLE>
</HEAD>
<BODY>
<UL>
<LI>First element of list
<LI class="withborder">Second element of list is
a bit longer to illustrate wrapping.
</UL>
</BODY>
</HTML>
results in a document tree with (among other relationships) a UL element that has two LI children.
生成的文档树中含有一个包含两个LI子元素的UL元素。
The first of the following diagrams illustrates what this example would produce. The second illustrates the relationship between the margins, padding, and borders of the UL elements and those of its children LI elements. (Image is not to scale.)
下面的第一个图表阐明了这个例子将生成什么。第二个例子介绍了UL元素的margins, padding, 和 borders和子元素LI之间的关系。
Note that:
- The content width for each LI box is calculated top-down; the containing block for each LI box is established by the UL element.
每个LI盒子的内容宽度是由上到下计算的;每个LI盒子的包含块由UL元素创建。 - The margin box height of each LI box depends on its content height, plus top and bottom padding, borders, and margins. Note that vertical margins between the LI boxes collapse.
每个LI盒子的外部填充盒子的高度取决于其内容的高度，加上顶部和底部的padding，borders和margins。 - The right padding of the LI boxes has been set to zero width (the 'padding' property). The effect is apparent in the second illustration.
LI盒子的右侧填充区域的宽度已设置为0。实际效果同第二条说明。 - The margins of the LI boxes are transparent — margins are always transparent — so the background color (yellow) of the UL padding and content areas shines through them.
LI盒子的外部填充区域是透明的——外部填充始终为透明——因此UL的内部填充和内容区域的背景色将穿透外部填充区域。 - The second LI element specifies a dashed border (the 'border-style' property).
第二个LI元素指定了一个虚线边框（通过'border-style'属性）。
8.3 Margin properties: 'margin-top', 'margin-right', 'margin-bottom', 'margin-left', and 'margin'外部填充区域的属性
Margin properties specify the width of the margin area of a box. The 'margin' shorthand property sets the margin for all four sides while the other margin properties only set their respective side. These properties apply to all elements, but vertical margins will not have any effect on non-replaced inline elements.
Margin属性指定了一个盒子的外部填充区域的宽度。'margin'简写属性可以同时设置四个部分的外部填充区域，而其他的margin属性只能设置各自的外部填充区域。这些属性可以应用到所有元素，但是垂直的margins在不可替换行内元素上不会起作用。
The properties defined in this section refer to the <margin-width> value type, which may take one of the following values:
参考<margin-width>值的类型，本节内容所定义的属性将会取下面列表中的一个值：
<length>
Specifies a fixed width.
指定一个固定宽度
<percentage>
The percentage is calculated with respect to the width of the generated box's containing block. Note that this is true for 'margin-top' and 'margin-bottom' as well. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1.
百分比的计算与生成盒子的包含块有关。注意该规则同样适用于'margin-top' 和 'margin-bottom'。如果包含块的宽度取决于这个元素，那么CSS2.1中没有定义其最终布局。
auto
See the section on calculating widths and margins for behavior.
请查看calculating widths and margins。
Negative values for margin properties are allowed, but there may be implementation-specific limits.
Margin属性允许负值，但是会有些特殊实现的限制。
'margin-top', 'margin-bottom'
| Value: | <margin-width> | inherit |
| Initial: | 0 |
| Applies to: |
all elements except elements with table display types other than table-caption, table and inline-table
可应用在除diaply属性显示为table-caption, table 和 inline-table的table元素外的其他任何元素。 |
| Inherited: | no |
| Percentages: |
refer to width of containing block 与包含块的宽度有关 |
| Media: | visual |
| Computed value: |
the percentage as specified or the absolute length 指定的百分比宽度或绝对宽度 |
These properties have no effect on non-replaced inline elements.
这些属性在不可替代的内联元素上面没有任何作用。
'margin-right', 'margin-left'
| Value: | <margin-width> | inherit |
| Initial: | 0 |
| Applies to: |
all elements except elements with table display types other than table-caption, table and inline-table
可应用在除diaply属性显示为table-caption, table 和 inline-table的table元素外的其他任何元素。 |
| Inherited: | no |
| Percentages: |
refer to width of containing block
与包含块的宽度有关 |
| Media: | visual |
| Computed value: |
the percentage as specified or the absolute length
指定的百分比宽度或绝对宽度 |
These properties set the top, right, bottom, and left margin of a box.
这些属性可以设置一个盒子的上，右，下，左的外部填充区域的宽度。
Example(s):
h1 { margin-top: 2em }
'margin'
| Value: | <margin-width>{1,4} | inherit |
| Initial: |
see individual properties
查看单个属性的设置 |
| Applies to: |
all elements except elements with table display types other than table-caption, table and inline-table
可应用在除diaply属性显示为table-caption, table 和 inline-table的table元素外的其他任何元素。 |
| Inherited: | no |
| Percentages: |
refer to width of containing block
与包含块的宽度有关 |
| Media: | visual |
| Computed value: |
see individual properties
查看单个属性的设置 |
The 'margin' property is a shorthand property for setting 'margin-top', 'margin-right', 'margin-bottom', and 'margin-left' at the same place in the style sheet.
在样式表的相同位置，'margin'属性是设置'margin-top', 'margin-right', 'margin-bottom', and 'margin-left'的简写属性。
If there is only one component value, it applies to all sides. If there are two values, the top and bottom margins are set to the first value and the right and left margins are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values, they apply to the top, right, bottom, and left, respectively.
如果只有一组值，它将应用在该元素的所有外部填充区域。如果有两组值，第一组值用来顶部和底部的外部填充区域，第二组值用来设置右侧和左侧的外部填充区域。如果有三组值，第一组值用来设置顶部外部填充区域，第二组值用来设置左侧和右侧外部填充区域，第三组值用来设置底部外部填充区域。如果有四组值，它们将分别被应用在上，右，下，左四个外部填充区域。
Example(s):
body { margin: 2em } /* all margins set to 2em */
body { margin: 1em 2em } /* top & bottom = 1em, right & left = 2em */
body { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */
The last rule of the example above is equivalent to the example below:
body {
margin-top: 1em;
margin-right: 2em;
margin-bottom: 3em;
margin-left: 2em; /* copied from opposite side (right) */
}
8.3.1 Collapsing margins 填充区域的塌陷
In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin.
在本章中，外部填充区域的塌陷指的是两个或两个以上的盒子的相邻外部填充区域（内容为非空，没有内部填充区域和边框，或者没有清除元素来分隔它们）合并为一个填充区域。
In CSS 2.1, horizontal margins never collapse.
CSS2.1中，水平的外部填充区域永远不会发生塌陷。
Vertical margins may collapse between certain boxes:
在某些盒子中垂直的外部填充区域可能会发生塌陷：
- Two or more adjoining vertical margins of block-level boxes in the normal flow collapse. The resulting margin width is the maximum of the adjoining margin widths. In the case of negative margins, the maximum of the absolute values of the negative adjoining margins is deducted from the maximum of the positive adjoining margins. If there are no positive margins, the absolute maximum of the negative adjoining margins is deducted from zero. Note. Adjoining boxes may be generated by elements that are not related as siblings or ancestors.
在普通文档流中，两个或两个以上块级盒子的垂直外部填充区域会发生塌陷。塌陷后外部填充区域的宽度为这个两个相邻垂直外部填充区域宽度中最大的一个。如果存在负值，塌陷后的宽度等于正的外部填充区域宽度减去负的外部填充区域宽度的绝对值。若果没有正值，塌陷后的外部填充区域宽度等于0减去绝对值最大的外部填充区域宽度。注意生成相邻盒子的元素之间可能没有兄弟关系或者祖孙关系。 - Vertical margins between a floated box and any other box do not collapse (not even between a float and its in-flow children).
一个浮动盒子的垂直外部填充区域不会与其他任何盒子的垂直外部填充区域发生塌陷（甚至是一个浮动元素和其在普通文档流内的子元素之间也不会发生塌陷）。 - Vertical margins of elements that establish new block formatting contexts (such as floats and elements with 'overflow' other than 'visible') do not collapse with their in-flow children.
一个创建了新块级格式化环境（比如浮动元素或拥有'overflow'属性且值为'visible'以外其他值的元素）的元素垂直外部填充区域不会与在其在同一文档流内的子元素发生塌陷。 - Margins of absolutely positioned boxes do not collapse (not even with their in-flow children).
绝对定位盒子的垂直外部填充区域不会发生塌陷（即使与其在普通文档流内的子元素也不会发生塌陷）。 - Margins of inline-block elements do not collapse (not even with their in-flow children).
inline-block元素的外部填充区域不会发生塌陷（即使与其普通文档流内的子元素也不会发生塌陷）。 - If the top and bottom margins of a box are adjoining, then it is possible for margins to collapse through it. In this case, the position of the element depends on its relationship with the other elements whose margins are being collapsed.
如果一个盒子的顶部和底部的外部填充区域相邻，那么其外部填充区域可能会穿过它。这种情况，该元素的位置取决于它与其他塌陷元素之间的关系。- If the element's margins are collapsed with its parent's top margin, the top border edge of the box is defined to be the same as the parent's.
如果元素的外部填充区域与它的父元素顶部填充区域发生了塌陷，那么这个盒子的顶部边框就是其父元素的顶部边框。 - Otherwise, either the element's parent is not taking part in the margin collapsing, or only the parent's bottom margin is involved. The position of the element's top border edge is the same as it would have been if the element had a non-zero bottom border.
否则，要么元素的父元素没有参与塌陷，要么只有其父元素的底部外部填充区域参与了塌陷。如果该元素底部边框宽度非零，那么这个元素顶部边框区域的位置将正常显示。
- If the element's margins are collapsed with its parent's top margin, the top border edge of the box is defined to be the same as the parent's.
An element that has clearance never collapses its top margin with its parent block's bottom margin.
一个元素如果拥有清除元素，那么该元素的顶部外部填充区域与其父元素的底部填充区域也不会发生塌陷。
Note that the positions of elements that have been collapsed through have no effect on the positions of the other elements with whose margins they are being collapsed; the top border edge position is only required for laying out descendants of these elements.
注意：已穿透塌陷元素的位置不会对其他塌陷元素的位置有任何影响；
- Margins of the root element's box do not collapse.
根元素盒子的外部填充区域不会发生塌陷。
The bottom margin of an in-flow block-level element is always adjoining to the top margin of its next in-flow block-level sibling, unless that sibling has clearance.
在普通文档流中的块级元素的底部外部填充区域总是与其下一个在普通文档流中的兄弟块级元素相邻，除非该相邻兄弟元素可以清除浮动。
The top margin of an in-flow block box is adjoining to its first in-flow block-level child's top margin if the element has no top border, no top padding, and the child has no clearance.
如果一个在普通文档流中的块级元素没有顶部边框和顶部内部填充且其同一文档流中的子元素没有清除浮动，那么该元素的顶部外部填充区域与其子元素的顶部外部填充区域相邻。
The bottom margin of an in-flow block box with a 'height' of 'auto' is adjoining to its last in-flow block-level child's bottom margin if the element has no bottom padding or border.
如果一个在普通文档流中的块级元素没有底部内部填充区域和边框且该元素'height' 为 'auto'，那么该元素的底部外部填充区域将与其在同一文档流内的最后一个块级子元素的底部外部填充区域相邻。
An element's own margins are adjoining if the 'min-height' property is zero, and it has neither top or bottom borders nor top or bottom padding, and it has a 'height' of either 0 or 'auto', and it does not contain a line box, and all of its in-flow children's margins (if any) are adjoining.
如果一个元素的'min-height'属性值为0，它既没有顶部或底部边框也没有顶部或底部内部填充，它的'height'属性值为0或'auto'，它不包含一个行级盒子，而且所有普通文档流内的子元素的外部填充区域都互相连接，那么该元素本身的外部填充区域也互相连接。
When an element's own margins collapse, and that element has clearance, its top margin collapses with the adjoining margins of subsequent siblings but that resulting margin does not collapse with the bottom margin of the parent block.
当一个元素的外部填充区域发生塌陷，这个元素有清除浮动，且它的顶部外部填充区域与其后相邻元素连接的外部填充区域也发生塌陷，但是结果将导致塌陷后的外部填充区域不会与其父元素的底部填充区域发生塌陷。
Collapsing is based on the used value of 'padding', 'margin', and 'border' (i.e., after resolving any percentages). The collapsed margin is calculated over the used value of the various margins.
塌陷基于'padding', 'margin', 和 'border'的使用值（也就是在百分比解析之后的值）。塌陷将通过各种外部填充区域的使用值来计算。
Please consult the examples of margin, padding, and borders for an illustration of collapsed margins.
请参考examples of margin, padding, and borders关于外部填充区域塌陷的介绍。
8.4 Padding properties: 'padding-top', 'padding-right', 'padding-bottom', 'padding-left', and 'padding'内部填充区域属性
The padding properties specify the width of the padding area of a box. The 'padding' shorthand property sets the padding for all four sides while the other padding properties only set their respective side.
Padding属性指定了一个字的内部填充区域的宽度。'padding'简写属性可以设置四个部分的内部填充区域，而其他的padding属性只能设置相应的一个内部填充区域。
The properties defined in this section refer to the <padding-width> value type, which may take one of the following values:
参考< padding -width>值的类型，本节内容所定义的属性将会取下面列表中的一个值：
<length>
Specifies a fixed width.
指定一个固定宽度。
<percentage>
The percentage is calculated with respect to the width of the generated box's containing block, even for 'padding-top' and 'padding-bottom'. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1.
百分比宽度的计算与所生成盒子的包含块宽度有关，即使对于'padding-top' 和 'padding-bottom'属性。如果包含块的宽度依赖于这个元素，那么CSS2.1并未定义最终布局。
Unlike margin properties, values for padding values cannot be negative. Like margin properties, percentage values for padding properties refer to the width of the generated box's containing block.
不想margin属性，padding不允许使用负值。和margin属性一样的是padding的百分比数值与所生成盒子的包含块宽度有关。
'padding-top', 'padding-right', 'padding-bottom', 'padding-left'
| Value: | <padding-width> | inherit |
| Initial: | 0 |
| Applies to: |
all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column
可应用在除了 table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column元素外的其他所有元素。 |
| Inherited: | no |
| Percentages: |
refer to width of containing block
与包含块的宽度有关 |
| Media: | visual |
| Computed value: |
the percentage as specified or the absolute length
指定的百分比宽度或绝对宽度 |
These properties set the top, right, bottom, and left padding of a box.
这些属性设置了一个盒子的上，右，下，左内部填充区域。
Example(s):
blockquote { padding-top: 0.3em }
'padding'
| Value: | <padding-width>{1,4} | inherit |
| Initial: | see individual properties |
| Applies to: |
all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column
可应用在除了 table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column元素外的其他所有元素。 |
| Inherited: | no |
| Percentages: |
refer to width of containing block
与其包含块的宽度有关 |
| Media: | visual |
| Computed value: |
see individual properties
查看单个属性的说明 |
The 'padding' property is a shorthand property for setting 'padding-top', 'padding-right', 'padding-bottom', and 'padding-left' at the same place in the style sheet.
'padding'属性是设置'padding-top', 'padding-right', 'padding-bottom', and 'padding-left'四个属性的简写属性，在同一个样式表的同一位置设置该属性与设置其他四个属性作用相同。
If there is only one component value, it applies to all sides. If there are two values, the top and bottom paddings are set to the first value and the right and left paddings are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values, they apply to the top, right, bottom, and left, respectively.
如果只有一组值，它将应用在该元素的所有内部填充区域。如果有两组值，第一组值用来顶部和底部的内部填充区域，第二组值用来设置右侧和左侧的内部填充区域。如果有三组值，第一组值用来设置顶部内部填充区域，第二组值用来设置左侧和右侧内部填充区域，第三组值用来设置底部内部填充区域。如果有四组值，它们将分别被应用在上，右，下，左四个内部填充区域。
The surface color or image of the padding area is specified via the 'background' property:
内部填充区域的颜色或图像将通过'background'属性来指定。
Example(s):
h1 {
background: white;
padding: 1em 2em;
}
The example above specifies a '1em' vertical padding ('padding-top' and 'padding-bottom') and a '2em' horizontal padding ('padding-right' and 'padding-left'). The 'em' unit is relative to the element's font size: '1em' is equal to the size of the font in use.
上面这个例子指定了H1元素的垂直内部填充区域宽度为'1em'，水平内部填充区域宽度为'2em'。'em'单位是相对于元素的字体大小而言的：'1em'等于该元素所使用的字体大小。
8.5 Border properties 边框属性
The border properties specify the width, color, and style of the border area of a box. These properties apply to all elements.
Border属性指定了一个盒子边框区域的宽度，颜色和样式。这些属性可以应用到所有元素。
Note. Notably for HTML, user agents may render borders for certain user interface elements (e.g., buttons, menus, etc.) differently than for "ordinary" elements.
说明：对于HTML中的某些用户界面元素（例如按钮，菜单等等）和普通元素，浏览器的渲染效果可能会不同。
8.5.1 Border width: 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width', and 'border-width'
The border width properties specify the width of the border area. The properties defined in this section refer to the <border-width> value type, which may take one of the following values:
Border的width属性指定了边框区域的宽度。本节中所定义的属性将取下面值中的一个：
thin
A thin border.
较细的边框
medium
A medium border.
中等宽度的边框
thick
A thick border.
较粗的边框
<length>
The border's thickness has an explicit value. Explicit border widths cannot be negative.
边框的宽度需要指定一个明确的值且该值不允许负值。
The interpretation of the first three values depends on the user agent. The following relationships must hold, however:
前三个值的实际展现效果将依赖于具体的浏览器。但是这些值必须遵循下面的关系：
'thin' <='medium' <= 'thick'.
Furthermore, these widths must be constant throughout a document.
另外，这些宽度在这个文档中是保持不变的。
'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width'
| Value: | <border-width> | inherit |
| Initial: | medium |
| Applies to: | all elements |
| Inherited: | no |
| Percentages: | N/A |
| Media: | visual |
| Computed value: |
absolute length; '0' if the border style is 'none' or 'hidden'
绝对的宽度；如果border的样式为'none' 或 'hidden'，那么其宽度为'0'。 |
These properties set the width of the top, right, bottom, and left border of a box.
这些属性用来设置一个盒子的上，右，下，左边框。
'border-width'
| Value: | <border-width>{1,4} | inherit |
| Initial: |
see individual properties
查看单个属性的设置 |
| Applies to: |
all elements
所有元素 |
| Inherited: | no |
| Percentages: | N/A |
| Media: | visual |
| Computed value: |
see individual properties
查看单个属性 |
This property is a shorthand property for setting 'border-top-width', 'border-right-width', 'border-bottom-width', and 'border-left-width' at the same place in the style sheet.
该属性是设置'border-top-width', 'border-right-width', 'border-bottom-width', 和 'border-left-width'的简写属性，在同一文档的同一位置，他们的作用相同。
If there is only one component value, it applies to all sides. If there are two values, the top and bottom borders are set to the first value and the right and left are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values, they apply to the top, right, bottom, and left, respectively.
如果只有一组值，它将应用在该元素的所有边框。如果有两组值，第一组值用来设置上边框和下面框，第二组值用来设置左边框和右边框。如果有三组值，第一组值用来设置上边框，第二组值用来设置左边框和右边框，第三组值用来下边框。如果有四组值，它们将分别被应用在上，右，下，左四个边框。
Example(s):
In the examples below, the comments indicate the resulting widths of the top, right, bottom, and left borders:
下面的例子中，注释说明了上，右，下，左边框宽度的结果。
h1 { border-width: thin } /* thin thin thin thin */
h1 { border-width: thin thick } /* thin thick thin thick */
h1 { border-width: thin thick medium } /* thin thick medium thick */
8.5.2 Border color: 'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color', and 'border-color'
The border color properties specify the color of a box's border.
边框的颜色属性用来设置一个盒子各个边框的颜色。
'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color'
| Value: | <color> | transparent | inherit |
| Initial: |
the value of the 'color' property
初始值为'color'属性值 |
| Applies to: |
all elements
所有元素 |
| Inherited: | no |
| Percentages: | N/A |
| Media: | visual |
| Computed value: | when taken from the 'color' property, the computed value of 'color'; otherwise, as specified |
'border-color'
| Value: | [ <color> | transparent ]{1,4} | inherit |
| Initial: | see individual properties |
| Applies to: | all elements |
| Inherited: | no |
| Percentages: | N/A |
| Media: | visual |
| Computed value: | see individual properties |
The 'border-color' property sets the color of the four borders. Values have the following meanings:
'border-color'属性用来设置四个边框的颜色。该属性值有下面几个含义：
<color>
Specifies a color value.
指定一个颜色
transparent
The border is transparent (though it may have width).
边框透明（但它可以有宽度）。
The 'border-color' property can have from one to four component values, and the values are set on the different sides as for 'border-width'.
'border-color'与'border-width'属性一样，可以用来设置四个边框的颜色。
If an element's border color is not specified with a border property, user agents must use the value of the element's 'color' property as the computed value for the border color.
如果一个元素的边框颜色没有在border属性中指定，那么浏览器会使用该元素的'color'来做为边框的颜色。
Example(s):
In this example, the border will be a solid black line.
下面的例子中，边框将一条黑色的实线。
p {
color: black;
background: white;
border: solid;
}
8.5.3 Border style: 'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style', and 'border-style'
The border style properties specify the line style of a box's border (solid, double, dashed, etc.). The properties defined in this section refer to the <border-style> value type, which may take one of the following values:
border style属性指定了一个盒子的边框样式（例如实线，点线等等）。本节中定义的属性将去下面列表中的一个值：
none
No border; the computed border width is zero.
边框宽度的计算值为0
hidden
Same as 'none', except in terms of border conflict resolution for table elements.
同'none'属性，除了table elements中的border conflict resolution所描述的。
dotted
The border is a series of dots.
边框由一连串的点组成。
dashed
The border is a series of short line segments.
边框由一连串的短横线组成。
solid
The border is a single line segment.
边框是单一实线。
double
The border is two solid lines. The sum of the two lines and the space between them equals the value of 'border-width'.
边框有两条实线组成。两条实线的宽度和之间空白区域的宽度等于'border-width'的值。
groove
The border looks as though it were carved into the canvas.
ridge
The opposite of 'groove': the border looks as though it were coming out of the canvas.
inset
The border makes the box look as though it were embedded in the canvas.
outset
The opposite of 'inset': the border makes the box look as though it were coming out of the canvas.
All borders are drawn on top of the box's background. The color of borders drawn for values of 'groove', 'ridge', 'inset', and 'outset' depends on the element's border color properties, but UAs may choose their own algorithm to calculate the actual colors used. For instance, if the 'border-color' has the value 'silver', then a UA could use a gradient of colors from white to dark gray to indicate a sloping border.
所有边框都画在盒子的背景上面。属性为'groove', 'ridge', 'inset', 和 'outset'的边框颜色取决于该元素的border color 属性，但是浏览器可能会选择它们自己的算法来计算真实的颜色。例如，如果'border-color'属性值为'silver'，那么浏览器就可能会使用一个由白向深灰的渐变色来描绘这个边框。
'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style'
| Value: | <border-style> | inherit |
| Initial: | none |
| Applies to: | all elements |
| Inherited: | no |
| Percentages: | N/A |
| Media: | visual |
| Computed value: | as specified |
'border-style'
| Value: | <border-style>{1,4} | inherit |
| Initial: | see individual properties |
| Applies to: | all elements |
| Inherited: | no |
| Percentages: | N/A |
| Media: | visual |
| Computed value: | see individual properties |
The 'border-style' property sets the style of the four borders. It can have from one to four component values, and the values are set on the different sides as for 'border-width' above.
'border-style'属性用来设置四个边框的样式。它可以用一到四组值，这些值的使用方式同上面'border-width'属性。
Example(s):
#xy34 { border-style: solid dotted }
In the above example, the horizontal borders will be 'solid' and the vertical borders will be 'dotted'.
上面的例子中，水平的边框将是实线形式，垂直的边框将是点线形式。
Since the initial value of the border styles is 'none', no borders will be visible unless the border style is set.
因为border style的初始值为'none'，所以如果不设置边框的样式，元素将不会显示边框。
8.5.4 Border shorthand properties: 'border-top', 'border-right', 'border-bottom', 'border-left', and 'border'
'border-top', 'border-right', 'border-bottom', 'border-left'
| Value: | [ <border-width> || <border-style> || <'border-top-color'> ] | inherit |
| Initial: | see individual properties |
| Applies to: | all elements |
| Inherited: | no |
| Percentages: | N/A |
| Media: | visual |
| Computed value: | see individual properties |
This is a shorthand property for setting the width, style, and color of the top, right, bottom, and left border of a box.
这个设置一个盒子上，右，下，左边框的宽度，样式和颜色的简写属性。
Example(s):
h1 { border-bottom: thick solid red }
The above rule will set the width, style, and color of the border below the H1 element. Omitted values are set to their initial values. Since the following rule does not specify a border color, the border will have the color specified by the 'color' property:
上面的规则设置了H1元素边框的宽度，样式和颜色。没有设置的属性将会使用它们的初始值。下面的规则因为没有指定边框的颜色，所以边框将使用'color'属性的值作为边框的颜色。
H1 { border-bottom: thick solid }
'border'
| Value: | [ <border-width> || <border-style> || <'border-top-color'> ] | inherit |
| Initial: | see individual properties |
| Applies to: | all elements |
| Inherited: | no |
| Percentages: | N/A |
| Media: | visual |
| Computed value: | see individual properties |
The 'border' property is a shorthand property for setting the same width, color, and style for all four borders of a box. Unlike the shorthand 'margin' and 'padding' properties, the 'border' property cannot set different values on the four borders. To do so, one or more of the other border properties must be used.
'border'属性是设置一个盒子边框宽度，颜色和样式的简写属性。不像'margin' 和 'padding'属性，'border'属性不能为四个边框设置不同颜色。如果想这么做，必须使用一个或更多的其他边框属性。
Example(s):
For example, the first rule below is equivalent to the set of four rules shown after it:
例如，下面的第一个规则等于后面分别设置四个属性的规则：
p { border: solid red }
p {
border-top: solid red;
border-right: solid red;
border-bottom: solid red;
border-left: solid red
}
Since, to some extent, the properties have overlapping functionality, the order in which the rules are specified is important.
在某种程度上，这个属性的功能有所重叠，所以这些规则的顺序决定了其重要性。
Example(s):
Consider this example:
考虑这个例子：
blockquote {
border: solid red;
border-left: double;
color: black;
}
In the above example, the color of the left border is black, while the other borders are red. This is due to 'border-left' setting the width, style, and color. Since the color value is not given by the 'border-left' property, it will be taken from the 'color' property. The fact that the 'color' property is set after the 'border-left' property is not relevant.
上面的例子中，左边框的颜色为黑色，其他边框的颜色为白色。这是由于'border-left'属性设置了宽度，样式和颜色。因为'border-left'属性没有给出具体的颜色，所以它会借用'color'属性的颜色。实际上，与设置在'border-left'后的'color'属性没有任何关系。
8.6 The box model for inline elements in bidirectional context 在上下环境中行内元素的盒模型
For each line box, UAs must take the inline boxes generated for each element and render the margins, borders and padding in visual order (not logical order).
对于每一个行状盒子，浏览器必须为其中的每个元素生成一个行内盒子，然后按照显示顺序渲染他们的外部填充区域，边框和内部填充区域（不是逻辑上顺序）。
When the element's 'direction' property is 'ltr', the left-most generated box of the first line box in which the element appears has the left margin, left border and left padding, and the right-most generated box of the last line box in which the element appears has the right padding, right border and right margin.
When the element's 'direction' property is 'rtl', the right-most generated box of the first line box in which the element appears has the right padding, right border and right margin, and the left-most generated box of the last line box in which the element appears has the left margin, left border and left padding.
说明：本站所有W3C翻译文稿皆为原创，如果转载，请大家注明出处，谢谢。
转载于:https://www.cnblogs.com/-Milo/archive/2010/12/28/2873637.html
CSS2.1 盒模型相关推荐
- css3盒子模型微课_css3 盒模型记
css3 盒模型 css假定每个元素都会生成一个或多个矩形框,这称为元素框.各元素框中心有一个内容区.这个内容区周围有可选的内边距,边框和外边距.这些项之所以被认为是可选的,原因是它们的宽度可以设置为 ...
- html笔记（一）html4+css2.0、css基础和属性、盒模型
w3c 官网 这里是 html4 的内容 大标题 小节 一.关于HTML 1. 基本语法 2. HTML常用标签 3. 相对路径和绝对路径 二.css基础 1. 表单元素 2. 创建样式表 3. cs ...
- 常见浏览器兼容问题、盒模型2种模式以及css hack知识讲解
什么是浏览器兼容问题?所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们 ...
- flex 平铺布局_CSS3 Flex布局（伸缩布局盒模型）学习
CSS3 Flex布局(伸缩布局盒模型)学习 转自:http://www.xifengxx.com/web-front-end/1408.html CSS2定义了四种布局:块布局.行内布局.表格布局盒 ...
- css设置input框长度_干货极致分享浅谈CSS属性，有趣的盒模型。网友：哎呦不错哦！...
盒模型的组成大家肯定都懂,由里向外content,padding,border,margin. 盒模型是有两种标准的,一个是标准模型,一个是IE模型. 从上面两图不难看出在标准模型中,盒模型的宽高只是 ...
- CSS3 Flex布局（伸缩布局盒模型）学习
CSS3 Flex布局(伸缩布局盒模型)学习 转自:http://www.xifengxx.com/web-front-end/1408.html CSS2定义了四种布局:块布局.行内布局.表格布局盒 ...
- css3盒模型、过渡、转换介绍
CSS3中盒模型: 前面CSS中学到的盒子模型给padding.border会撑开盒子的大小,实际大小要通过计算才能得到,为了解决这个问题,CSS3推出了box-sizing属性来解决此问题,当box ...
- CSS基础语法和盒模型
CSS基础语法和盒模型 CSS简介 Cascading Style Sheet 层叠样式表 用于给HTML标签添加样式 CSS3是CSS的最新版本 增加了大量的样式/动画/3D特效以及移动端特性 前端 ...
- 【前端】【html5/css3】前端学习之路（二）（CSS3新选择器/CSS3盒模型/CSS3过渡效果）
一.CSS3新增选择器 1.结构(位置)伪类选择器 :first-child :选取属于其父元素的首个子元素的指定选择器 :last-child :选取属于其父元素的最后一个子元素的指定选择器 :nt ...
最新文章
- 判断子序列不同的子序列两个字符串的删除操作编辑距离
- 读《大学之路》有感①
- 数据可视化【十二】 颜色图例和尺寸图例
- Java sdk 调用淘宝开发平台
- LeetCode 旋转数组 系列
- 开滦二中2021高考成绩查询,2021唐山中考录取分数线查询
- Java中Double除保留后小数位的几种方法
- 主成分分析 PCA算法原理
- 低代码平台对程序员产生的内卷，零代码、低代码系列之一「对于零代、低代码平台的思考」
- 计算一个三位数的个十百c语言,“任意输入一个三位数,输出这个三位数的百位、十位和个位,并且计算十位百位个位的和.”c语言程序...
- 如何在Mac上合并照片库？
- 二元二次方程例题_二元二次方程组练习题及答案.doc
- apk自行修改后的操作(软件安装不了，安了打不开，闪退)
- 神兽归笼，又是一波斗智斗勇？这款QLED电视机让你带娃更省心
- Verdi 改变字体大小额方法
- 【Python】Python项目打包发布（一）（基于Pyinstaller打包多目录项目）
- AI如何帮助亚马逊达成市值万亿美元成就？
- CTF writeup:实验吧，天下武功唯快不破
- XP登录密码和任务计划的处理
- 在wordpress添加自制html页面