w3c css2.1 Specification笔记归纳

CSS Specification笔记

http://www.w3.org/TR/CSS21 目的：温故知新，查漏补缺。 输出：摘要，笔记，重点难点总结。

Abstract

CSS 2.1 is a style sheet language that allows authors and users to attach style (e.g., fonts and spacing) to structured documents (e.g., HTML documents and XML applications). By separating the presentation style of documents from the content of documents, CSS 2.1 simplifies Web authoring and site maintenance.

CSS是用来给结构化的文档（如HTML、XML）添加样式的语言。通过将文档的内容和展示样式分离，来简化Web开发和维护的工作。

1 About the CSS 2.1 Specification

2 Introduction to CSS 2.1

2.3 The CSS 2.1 processing model

In this model, a user agent processes a source by going through the following steps:

1. Parse the source document and create a document tree.
2. Identify the target media type.
3. Retrieve all style sheets associated with the document that are specified for the target media type.
4. Annotate every element of the document tree by assigning a single value to every property that is applicable to the target media type. Properties are assigned values according to the mechanisms described in the section on cascading and inheritance.
5. From the annotated document tree, generate a formatting structure. Often, the formatting structure closely resembles the document tree, but it may also differ significantly, notably when authors make use of pseudo-elements and generated content. First, the formatting structure need not be "tree-shaped" at all -- the nature of the structure depends on the implementation. Second, the formatting structure may contain more or less information than the document tree. For instance, if an element in the document tree has a value of 'none' for the 'display' property, that element will generate nothing in the formatting structure. A list element, on the other hand, may generate more information in the formatting structure: the list element's content and list style information (e.g., a bullet image). Note that the CSS user agent does not alter the document tree during this phase. In particular, content generated due to style sheets is not fed back to the document language processor (e.g., for reparsing).
6. Transfer the formatting structure to the target medium (e.g., print the results, display them on the screen, render them as speech, etc.).

Step 1 lies outside the scope of this specification (see, for example, [DOM]).

Steps 2-5 are addressed by the bulk of this specification.

Step 6 lies outside the scope of this specification.

2.3.1 The canvas

2.3.2 CSS 2.1 addressing model

2.4 CSS design principles

3 Conformance: Requirements and Recommendations

4 Syntax and basic data types

4.3 Values

4.3.6 Colors

A <color> is either a keyword or a numerical RGB specification.

Example(s):
em { color: #f00 } /* #rgb */
em { color: #ff0000 } /* #rrggbb */
em { color: rgb(255,0,0) }
em { color: rgb(100%, 0%, 0%) }

5 Selectors

5.1 Pattern matching

The following table summarizes CSS 2.1 selector syntax:

Pattern	Meaning	Described in section
*	Matches any element.	Universal selector
E	Matches any E element (i.e., an element of type E).	Type selectors
E F	Matches any F element that is a descendant of an E element.	Descendant selectors
E > F	Matches any F element that is a child of an element E.	Child selectors
E:first-child	Matches element E when E is the first child of its parent.	The :first-child pseudo-class
E:link E:visited	Matches element E if E is the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited).	The link pseudo-classes
E:active<<br />E:hover E:focus	Matches E during certain user actions.	The dynamic pseudo-classes
E:lang(c)	Matches element of type E if it is in (human) language c (the document language specifies how language is determined).	The :lang() pseudo-class
E + F	Matches any F element immediately preceded by a sibling element E.	Adjacent selectors
E[foo]	Matches any E element with the "foo" attribute set (whatever the value).	Attribute selectors
E[foo="warning"]	Matches any E element whose "foo" attribute value is exactly equal to "warning".	Attribute selectors
E[foo~="warning"]	Matches any E element whose "foo" attribute value is a list of space-separated values, one of which is exactly equal to "warning".	Attribute selectors
E[lang|="en"]	Matches any E element whose "lang" attribute has a hyphen-separated list of values beginning (from the left) with "en".	Attribute selectors
DIV.warning	Language specific. (In HTML, the same as DIV[class~="warning"].)	Class selectors
E#myid	Matches any E element with ID equal to "myid".	ID selectors

5.5 Descendant selectors

The selector in the following rule, which combines descendant and attribute selectors , matches any element that (1) has the "href" attribute set and (2) is inside a P that is itself inside a DIV:

div p *[href]

5.7 Adjacent sibling selectors

Adjacent sibling selectors have the following syntax: E1 + E2, where E2 is the subject of the selector. The selector matches if E1 and E2 share the same parent in the document tree and E1 immediately precedes E2, ignoring non-element nodes (such as text nodes and comments).

选择器E1 + E2，只有E2才是它选择的对象。

Thus, the following rule states that when a P element immediately follows a MATH element, it should not be indented:

math + p { text-indent: 0 }

The next example reduces the vertical space separating an H1 and an H2 that immediately follows it:

h1 + h2 { margin-top: -5mm }

5.8 Attribute selectors

IE6及以下不支持 :-(

5.8.1 Matching attributes and attribute values

Attribute selectors may match in four ways:

[att] Match when the element sets the "att" attribute, whatever the value of the attribute. [att=val] Match when the element’s "att" attribute value is exactly "val". [att~=val] Match when the element’s "att" attribute value is a space-separated list of "words", one of which is exactly "val". If this selector is used, the words in the value must not contain spaces (since they are separated by spaces). [att|=val] Match when the element’s "att" attribute value is a hyphen-separated list of "words", beginning with "val". The match always starts at the beginning of the attribute value. This is primarily intended to allow language subcode matches (e.g., the "lang" attribute in HTML) as described in RFC 3066 ([RFC3066]).

Multiple attribute selectors can be used to refer to several attributes of an element, or even several times to the same attribute.

Example(s):

Here, the selector matches all SPAN elements whose "hello" attribute has exactly the value "Cleveland" and whose "goodbye" attribute has exactly the value "Columbus":

span[hello="Cleveland"][goodbye="Columbus"] { color: blue; }

Example(s):

The following selectors illustrate the differences between "=" and "~=". The first selector will match, for example, the value "copyright copyleft copyeditor" for the "rel" attribute. The second selector will only match when the "href" attribute has the value "http://www.w3.org/".

a[rel~="copyright"]
a[href="http://www.w3.org/"]

Example(s):

The following rule hides all elements for which the value of the "lang" attribute is "fr" (i.e., the language is French).

*[lang=fr] { display : none }

Example(s):

The following rule will match for values of the "lang" attribute that begin with "en", including "en", "en-US", and "en-cockney":

*[lang|="en"] { color : red }

5.8.3 Class selectors

To match a subset of "class" values, each value must be preceded by a ".". Example(s):

For example, the following rule matches any P element whose "class" attribute has been assigned a list of space-separated values that includes "pastoral" and "marine":

p.marine.pastoral { color: green }

This rule matches when class="pastoral blue aqua marine" but does not match for class="pastoral blue".

Note. CSS gives so much power to the "class" attribute, that authors could conceivably design their own "document language" based on elements with almost no associated presentation (such as DIV and SPAN in HTML) and assigning style information through the "class" attribute. Authors should avoid this practice since the structural elements of a document language often have recognized and accepted meanings and author-defined classes may not.

类选择符如此强悍，大家切勿滥用。尽量使用语义化的html标签， 而不是用div/span加类选择符来代替它们。

5.9 ID selectors

D selectors have a higher specificity than attribute selectors. For example, in HTML, the selector #p123 is more specific than [id=p123] in terms of the cascade .

5.10 Pseudo-elements and pseudo-classes

CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information that lies outside the document tree.

Pseudo-elements create abstractions about the document tree beyond those specified by the document language. For instance, document languages do not offer mechanisms to access the first letter or first line of an element’s content. CSS pseudo-elements allow style sheet designers to refer to this otherwise inaccessible information. Pseudo-elements may also provide style sheet designers a way to assign style to content that does not exist in the source document (e.g., the :before and :after pseudo-elements give access to generated content).

Pseudo-classes classify elements on characteristics other than their name, attributes or content; in principle characteristics that cannot be deduced from the document tree. Pseudo-classes may be dynamic, in the sense that an element may acquire or lose a pseudo-class while a user interacts with the document. The exceptions are ’:first-child’ , which can be deduced from the document tree, and ’:lang()’ , which can be deduced from the document tree in some cases.

Neither pseudo-elements nor pseudo-classes appear in the document source or document tree.

Pseudo-classes are allowed anywhere in selectors while pseudo-elements may only be appended after the last simple selector of the selector.

Pseudo-element and pseudo-class names are case-insensitive.

Some pseudo-classes are mutually exclusive, while others can be applied simultaneously to the same element. In case of conflicting rules, the normal cascading order determines the outcome.

IE7及以下不支持 :-(

5.11 Pseudo-classes

5.11.1 :first-child pseudo-class

The :first-child pseudo-class matches an element that is the first child element of some other element.

Example(s):

In the following example, the selector matches any P element that is the first child of a DIV element. The rule suppresses indentation for the first paragraph of a DIV:

div > p:first-child { text-indent: 0 }

This selector would match the P inside the DIV of the following fragment:

<P> The last P before the note.
<DIV class="note">
<P> The first P inside the note.
</DIV>

but would not match the second P in the following fragment:

<P> The last P before the note.
<DIV class="note">
<H2>Note</H2>
<P> The first P inside the note.
</DIV>

5.11.3 The dynamic pseudo-classes: :hover, :active, and :focus

Interactive user agents sometimes change the rendering in response to user actions. CSS provides three pseudo-classes for common cases:

• The :hover pseudo-class applies while the user designates an element (with some pointing device), but does not activate it. For example, a visual user agent could apply this pseudo-class when the cursor (mouse pointer) hovers over a box generated by the element. User agents not supporting interactive media do not have to support this pseudo-class. Some conforming user agents supporting interactive media may not be able to support this pseudo-class (e.g., a pen device).
• The :active pseudo-class applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it.
• The :focus pseudo-class applies while an element has the focus (accepts keyboard events or other forms of text input).

An element may match several pseudo-classes at the same time.

Example(s):

a:link { color: red } /* unvisited links */
a:visited { color: blue } /* visited links */
a:hover { color: yellow } /* user hovers */
a:active { color: lime } /* active links */

Note that the A:hover must be placed after the A:link and A:visited rules, since otherwise the cascading rules will hide the ’color’ property of the A:hover rule. Similarly, because A:active is placed after A:hover, the active color (lime) will apply when the user both activates and hovers over the A element. Example(s):

An example of combining dynamic pseudo-classes:

a:focus { background: yellow }
a:focus:hover { background: white }

The last selector matches A elements that are in pseudo-class :focus and in pseudo-class :hover.

LoVe HAte原则

5.11.4 The language pseudo-class: :lang

The pseudo-class ’:lang(C)’ matches if the element is in language C. Whether there is a match is based solely on the identifier C being either equal to, or a hyphen-separated substring of, the element’s language value, in the same way as if performed by the ’|=’ operator. The identifier C doesn’t have to be a valid language name.

Example(s):

The following rules set the quotation marks for an HTML document that is either in Canadian French or German:

html:lang(fr-ca) { quotes: ’« ’ ’ »’ }
html:lang(de) { quotes: ’»’ ’«’ ’\2039’ ’\203A’ }
:lang(fr) > Q { quotes: ’« ’ ’ »’ }
:lang(de) > Q { quotes: ’»’ ’«’ ’\2039’ ’\203A’ }

The second pair of rules actually set the ’quotes’ property on Q elements according to the language of its parent. This is done because the choice of quote marks is typically based on the language of the element around the quote, not the quote itself: like this piece of French “à l’improviste” in the middle of an English text uses the English quotation marks.

Note the difference between [lang|=xx] and :lang(xx). In this HTML example, only the BODY matches [lang|=fr] (because it has a LANG attribute) but both the BODY and the P match :lang(fr) (because both are in French).

<body lang=fr>
<p>Je suis Français.</p>
</body>

5.12 Pseudo-elements

5.12.1 The :first-line pseudo-element

The :first-line pseudo-element applies special styles to the contents of the first formatted line of a paragraph. For instance:

p:first-line { text-transform: uppercase }

 

The :first-line pseudo-element can only be attached to a block-level element, inline-block, table-caption or a table-cell.

5.12.2 The :first-letter pseudo-element

5.12.3 The :before and :after pseudo-elements

The ’:before’ and ’:after’ pseudo-elements can be used to insert generated content before or after an element’s content. They are explained in the section on generated text.

Example(s):

h1:before {content: counter(chapno, upper-roman) ". "}

6 Assigning property values, Cascading, and Inheritance

6.1 Specified, computed, and actual values

The final value of a property is the result of a four-step calculation: the value is determined through specification (the "specified value"), then resolved into a value that is used for inheritance (the "computed value"), then converted into an absolute value if necessary (the "used value"), and finally transformed according to the limitations of the local environment (the "actual value").

6.1.1 Specified values

User agents must first assign a specified value to each property based on the following mechanisms (in order of precedence):

1. If the cascade results in a value, use it.
2. Otherwise, if the property is inherited and the element is not the root of the document tree, use the computed value of the parent element.
3. Otherwise use the property’s initial value. The initial value of each property is indicated in the property’s definition.

6.3 The @import rule

The ’@import’ rule allows users to import style rules from other style sheets. Any @import rules must precede all other rules (except the @charset rule, if present). The following lines are equivalent in meaning and illustrate both ’@import’ syntaxes (one with "url()" and one with a bare string):

@import "mystyle.css";
@import url("mystyle.css");

The following rules illustrate how @import rules can be made media-dependent:

@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;

6.4 The cascade

6.4.1 Cascading order

To find the value for an element/property combination, user agents must apply the following sorting order:

Sort according to importance (normal or important) and origin (author, user, or user agent). In ascending order of precendence:

1. user agent declarations
2. user normal declarations
3. author normal declarations
4. author important declarations
5. user important declarations

6.4.2 !important rules

Declaring a shorthand property (e.g., ’background’) to be "!important" is equivalent to declaring all of its sub-properties to be "!important".

6.4.3 Calculating a selector’s specificity

A selector’s specificity is calculated as follows:

1. count 1 if the declaration is from is a ’style’ attribute rather than a rule with a selector, 0 otherwise (= a) (In HTML, values of an element’s "style" attribute are style sheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0.)
2. count the number of ID attributes in the selector (= b)
3. count the number of other attributes and pseudo-classes in the selector (= c)
4. count the number of element names and pseudo-elements in the selector (= d)

选择器的优先级如下:style ＞ id ＞ 其它属性(包括class)和伪类 ＞ 元素名和伪元素

* {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul li {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul ol+li {} /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
#x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
style="" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */
<HEAD>
<STYLE type="text/css">
#x97z { color: red }
</STYLE>
</HEAD>
<BODY>
<P ID=x97z style="color: green">
</BODY>

7 Media types

7.2 Specifying media-dependent style sheets

@import url("fancyfonts.css") screen;
@media print {
/* style sheet for print goes here */ }

HTML 4 ([HTML4]), the "media" attribute on the LINK element specifies the target media of an external style sheet:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>Link to a target medium</TITLE>
<LINK REL="stylesheet" TYPE="text/css"
MEDIA="print, handheld" HREF="foo.css">
</HEAD>
<BODY>
<P>The body...
</BODY>
</HTML>

7.2.1 The @media rule

An @media rule specifies the target media types (separated by commas) of a set of rules (delimited by curly braces). The @media construct allows style sheet rules for various media in the same style sheet:

@media print {
body { font-size: 10pt }
}
@media screen {
body { font-size: 13px }
}
@media screen, print {
body { line-height: 1.2 }
}

Style rules outside of @media rules apply to all media types that the style sheet applies to.

8 Box model

The CSS box model describes the rectangular boxes that are generated for elements in the document tree and laid out according to the visual formatting model.

盒子模式，可以参考 彻底弄懂CSS盒子模式系列文章

8.3 Margin properties: ’margin-top’, ’margin-right’, ’margin-bottom’, ’margin-left’, and ’margin’

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 */

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.

水平的margins不会重叠

Vertical margins may collapse between certain boxes:

• Two or more adjoining vertical margins of block 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.
• 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 with ’overflow’ other than ’visible’ do not collapse with their in-flow children.
• 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).
• 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.
• Margins of the root element’s box do not collapse.

9.2 Controlling box generation

9.2.1 Block-level elements and block boxes

Block-level elements are those elements of the source document that are formatted visually as blocks (e.g., paragraphs). Several values of the ’display’ property make an element block-level: ’block’, ’list-item’, and ’run-in’ (part of the time; see run-in boxes ), and ’table’.

"run-in"（吵架盒子？）可以无视，没啥用也不被支持。参考棕熊的 [Quicky] block 和 inline 的区别是？

9.2.1.1 Anonymous block boxes

In other words: if a block box (such as that generated for the DIV above) has another block box or run-in box inside it (such as the P above), then we force it to have only block boxes and run-in boxes inside it.

When an inline box contains a block box, the inline box (and its inline ancestors within the same line box) are broken around the block. The line boxes before the break and after the break are enclosed in anonymous boxes, and the block box becomes a sibling of those anonymous boxes. When such an inline box is affected by relative positioning, the relative positioning also affects the block box.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HEAD>
<TITLE>Anonymous text interrupted by a block</TITLE>
</HEAD>
<BODY>
This is anonymous text before the P.
<P>This is the content of P.</P>
This is anonymous text after the P.
</BODY>

9.2.2 Inline-level elements and inline boxes

Inline-level elements are those elements of the source document that do not form new blocks of content; the content is distributed in lines (e.g., emphasized pieces of text within a paragraph, inline images, etc.). Several values of the ’display’ property make an element inline: ’inline’, ’inline-table’, and ’run-in’ (part of the time; see run-in boxes ). Inline-level elements generate inline boxes.

9.2.2.1 Anonymous inline boxes

In a document with HTML markup like this: <p>Some <em>emphasized</em> text</p>

The <p> generates a block box, with several inline boxes inside it. The box for "emphasized" is an inline box generated by an inline element (<em>), but the other boxes ("Some" and "text") are inline boxes generated by a block-level element (<p>). The latter are called anonymous inline boxes, because they don’t have an associated inline-level element.

9.2.3 Run-in boxes

9.2.4 The ’display’ property

Value: inline | block | list-item | run-in | inline-block | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit

block This value causes an element to generate a block box. inline-block This value causes an element to generate a block box, which itself is flowed as a single inline box, similar to a replaced element. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an inline replaced element. inline This value causes an element to generate one or more inline boxes. list-item This value causes an element (e.g., LI in HTML) to generate a principal block box and a list-item inline box. For information about lists and examples of list formatting, please consult the section on lists . none This value causes an element to generate no boxes in the formatting structure (i.e., the element has no effect on layout). Descendant elements do not generate any boxes either; this behavior cannot be overridden by setting the ’display’ property on the descendants. Please note that a display of ’none’ does not create an invisible box; it creates no box at all. CSS includes mechanisms that enable an element to generate boxes in the formatting structure that affect formatting but are not visible themselves. Please consult the section on visibility for details. run-in This value creates either block or inline boxes, depending on context. Properties apply to run-in boxes based on their final status (inline-level or block-level). table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, and table-caption These values cause an element to behave like a table element (subject to restrictions described in the chapter on tables ).

block 块级元素，生成一个块级盒子。 inline-block 内联块级元素，在内部表现得像块级盒子，在外部表现得像内联元素。 inline 内联元素，生成一行或多行内联盒子。（一行排不下的时候自动增加一行盒子）（对内表现：宽和高设置无效，没有固定的宽和高）（对外表现：流水般见缝插针） list-item 列表项，生成一个主要的块级盒子和一个列表项内联盒子。 none 不生成盒子，它里面的元素即使设置了display也不显示。 注意：不同于visibility:hidden占着茅坑不显示，它根本就不生成盒子。 run-in 要么生成块级盒子要么生成内联盒子，取决于它所处的上下文。 table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, and table-caption 表格元素。

9.3 Positioning schemes

In CSS 2.1, a box may be laid out according to three positioning schemes:

1. Normal flow . In CSS 2.1, normal flow includes block formatting of block boxes, inline formatting of inline boxes, relative positioning of block or inline boxes, and positioning of run-in boxes.
2. Floats . In the float model, a box is first laid out according to the normal flow, then taken out of the flow and shifted to the left or right as far as possible. Content may flow along the side of a float.
3. Absolute positioning . In the absolute positioning model, a box is removed from the normal flow entirely (it has no impact on later siblings) and assigned a position with respect to a containing block.

盒子有三种定位方案： 正常流。包括块级盒子的块级展示, 内联盒子的内联展示, 块级盒子和内联盒子的相对定位, 以及争吵盒子的定位。 浮动。在浮动模式中，盒子先根据正常流定位，然后脱离正常流移动到最左边或者最右边。其内容也跟着移动。 绝对定位。在绝对定位模式中，盒子完全从正常流中脱离 (对下一个兄弟结点没有影响) ，根据它所在的容器指定一个位置。

Note. CSS 2.1’s positioning schemes help authors make their documents more accessible by allowing them to avoid mark-up tricks (e.g., invisible images) used for layout effects.

9.3.1 Choosing a positioning scheme: ’position’ property

The ’position’ and ’float’ properties determine which of the CSS 2.1 positioning algorithms is used to calculate the position of a box.

’position’ 和’float’ 属性决定了按照哪一种算法来计算盒子的位置。

’position’

static The box is a normal box, laid out according to the normal flow . The ’top’, ’right’, ’bottom’, and ’left’ properties do not apply. relative The box’s position is calculated according to the normal flow (this is called the position in normal flow). Then the box is offset relative to its normal position. When a box B is relatively positioned, the position of the following box is calculated as though B were not offset. The effect of ’position:relative’ on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined. absolute The box’s position (and possibly size) is specified with the ’top’, ’right’, ’bottom’, and ’left’ properties. These properties specify offsets with respect to the box’s containing block . Absolutely positioned boxes are taken out of the normal flow. This means they have no impact on the layout of later siblings. Also, though absolutely positioned boxes have margins, they do not collapse with any other margins. fixed The box’s position is calculated according to the ’absolute’ model, but in addition, the box is fixed with respect to some reference. As with the ’absolute’ model, the box’s margins do not collapse with any other margins. In the case of handheld, projection, screen, tty, and tv media types, the box is fixed with respect to the viewport and doesn’t move when scrolled.

static 正常流。’top’, ’right’, ’bottom’, and ’left’ 属性不起作用。 relative 盒子的位置是根据正常流（正常流定位）来计算的。 然后盒子相对正常位置偏移。如果一个盒子B是相对定位，接下来的盒子在计算位置时 会把盒子B视作没有偏移。 ’position:relative’ 对于 table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption 这些元素的效果 没有定义。 absolute 盒子的位置 (可能还有大小) 由 ’top’, ’right’, ’bottom’, and ’left’ 来指定。它们确定了盒子相对其所在块的偏移量。绝对定位的盒子 从正常流中脱离出来。它们对接下来的兄弟结点的布局没有影响。 尽管绝对定位的盒子有margins，但它们不会同别的margins重叠。 fixed 盒子的位置依照绝对定位模式来计算，且根据某种参照其位置是固定的. 和绝对定位模式一样，盒子的margins不会同其它的margins重叠。在手持设备, projection, 屏幕, 打印机, 和电视媒体类, 盒子相对于可视区域的位置是固定的在卷动时不会移动。

Example(s): @media screen {
h1#first { position: fixed }
}
@media print {
h1#first { position: static }
}

9.3.2 Box offsets: ’top’, ’right’, ’bottom’, ’left’

An element is said to be positioned if its ’position’ property has a value other than ’static’. Positioned elements generate positioned boxes, laid out according to four properties:

’top’ This property specifies how far an absolutely positioned box’s top margin edge is offset below the top edge of the box’s containing block . For relatively positioned boxes, the offset is with respect to the top edges of the box itself (i.e., the box is given a position in the normal flow, then offset from that position according to these properties). Note: For absolutely positioned elements whose containing block is based on a block-level element, this property is an offset from the padding edge of that element.

’top’ 这个属性确定一个绝对定位的盒子的包括margin在内的上边沿相对它的容器的上边沿的偏移距离。对于相对定位的盒子，是对于它自己的上边沿的偏移距离（盒子在正常流中定位，然后根据top进行偏移）。注意：对于容器是块级元素的绝对定位的元素，偏移是从块级元素的padding边沿算起的。

The values for the four properties have the following meanings:

<length> The offset is a fixed distance from the reference edge. Negative values are allowed. <percentage> The offset is a percentage of the containing block’s width (for ’left’ or ’right’) or height (for ’top’ and ’bottom’). Negative values are allowed. auto For non-replaced elements, the effect of this value depends on which of related properties have the value ’auto’ as well. See the sections on the width and height of absolutely positioned , non-replaced elements for details. For replaced elements, the effect of this value depends only on the intrinsic dimensions of the replaced content. See the sections on the width and height of absolutely positioned, replaced elements for details.

<percentage>是相对于容器的大小，利用这一点可以实现水平居中或者垂直居中。 参考 CSS在页面布局中实现div垂直居中的方法总结。

9.4 Normal flow

Boxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously. Block [p. 121] boxes participate in a block formatting [p. 130] context. Inline boxes [p. 123] participate in an inline formatting [p. 130] context.

9.4.1 Block formatting contexts

Floats, absolutely positioned elements, inline-blocks, table-cells, table-captions, and elements with ’overflow’ other than ’visible’ (except when that value has been propagated to the viewport) establish new block formatting contexts.

In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the ’margin’ properties. Vertical margins between adjacent block boxes in a block formatting context collapse [p. 109] .

In a block formatting context, each box’s left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box’s line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower [p. 135] due to the floats).

9.4.2 Inline formatting context

In an inline formatting context, boxes are laid out horizontally, one after the other, beginning at the top of a containing block. Horizontal margins, borders, and padding are respected between these boxes. The boxes may be aligned vertically in different ways: their bottoms or tops may be aligned, or the baselines of text within them may be aligned. The rectangular area that contains the boxes that form a line is called a line box.

The width of a line box is determined by a containing block [p. 120] and the presence of floats. The height of a line box is determined by the rules given in the section on line height calculations [p. 180] .

A line box is always tall enough for all of the boxes it contains. However, it may be taller than the tallest box it contains (if, for example, boxes are aligned so that baselines line up). When the height of a box B is less than the height of the line box containing it, the vertical alignment of B within the line box is determined by the ’vertical-align’ property. When several inline boxes cannot fit horizontally within a single line box, they are distributed among two or more vertically-stacked line boxes. Thus, a paragraph is a vertical stack of line boxes. Line boxes are stacked with no vertical separation and they never overlap.

Here is an example of inline box construction. The following paragraph (created by the HTML block-level element P) contains anonymous text interspersed with the elements EM and STRONG:

<P>Several <EM>emphasized words</EM> appear
<STRONG>in this</STRONG> sentence, dear.</P>

The P element generates a block box that contains five inline boxes, three of which are anonymous:

• Anonymous: "Several"
• EM: "emphasized words"
• Anonymous: "appear"
• STRONG: "in this"
• Anonymous: "sentence, dear."

To format the paragraph, the user agent flows the five boxes into line boxes. In this example, the box generated for the P element establishes the containing block for the line boxes. If the containing block is sufficiently wide, all the inline boxes will fit into a single line box:

Several emphasized words appear in this sentence, dear.

If not, the inline boxes will be split up and distributed across several line boxes. The previous paragraph might be split as follows:

Several emphasized
words appear in this
sentence, dear.

In the previous example, the EM box was split into two EM boxes (call them "split1" and "split2"). Margins, borders, padding, or text decorations have no visible effect after split1 or before split2.

9.4.3 Relative positioning

Once a box has been laid out according to the normal flow [p. 130] or floated, it may be shifted relative to this position. This is called relative positioning. Offsetting a box (B1) in this way has no effect on the box (B2) that follows: B2 is given a position as if B1 were not offset and B2 is not re-positioned after B1’s offset is applied. This implies that relative positioning may cause boxes to overlap.

For relatively positioned elements, ’left’ and ’right’ move the box(es) horizontally, without changing their size. ’left’ moves the boxes to the right, and ’right’ moves them to the left. Since boxes are not split or stretched as a result of ’left’ or ’right’, the computed values are always: left = -right.

Example. The following three rules are equivalent:

div.a8 { position: relative; direction: ltr; left: -1em; right: auto }
div.a8 { position: relative; direction: ltr; left: auto; right: 1em }
div.a8 { position: relative; direction: ltr; left: -1em; right: 5em }

对于相对定位的元素，’left’和’right’ 不会改变它的大小。

9.5 Floats

A float is a box that is shifted to the left or right on the current line. The most interesting characteristic of a float (or "floated" or "floating" box) is that content may flow along its side (or be prohibited from doing so by the ’clear’ property). Content flows down the right side of a left-floated box and down the left side of a right-floated box. The following is an introduction to float positioning and content flow; the exact rules [p. 139] governing float behavior are given in the description of the ’float’ property.

A floated box is shifted to the left or right until its outer edge touches the containing block edge or the outer edge of another float. If there’s a line box, the top of the floated box is aligned with the top of the current line box.

If there isn’t enough horizontal room for the float, it is shifted downward until either it fits or there are no more floats present.

Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float didn’t exist. However, line boxes created next to the float are shortened to make room for margin box of the float.

由于浮动元素不在正常流中，它前后的块级元素会当它不存在。 但内联盒子会缩短，让出空间。呵呵，看它的 几个图会比较清楚。

9.5.1 Positioning the float: the ’float’ property

This property specifies whether a box should float to the left, right, or not at all. It may be set for any element, but only applies to elements that generate boxes that are not absolutely positioned [p. 142] . The values of this property have the following meanings:

left The element generates a block [p. 121] box that is floated to the left. Content flows on the right side of the box, starting at the top (subject to the ’clear’ property). right Similar to ’left’, except the box is floated to the right, and content flows on the left side of the box, starting at the top. none The box is not floated.

9.5.2 Controlling flow next to floats: the ’clear’ property

This property indicates which sides of an element’s box(es) may not be adjacent to an earlier floating box. The ’clear’ property does not consider floats inside the element itself or in other block formatting contexts.

9.6 Absolute positioning

In the absolute positioning model, a box is explicitly offset with respect to its containing block. It is removed from the normal flow entirely (it has no impact on later siblings). An absolutely positioned box establishes a new containing block for normal flow children and absolutely (but not fixed) positioned descendants. However, the contents of an absolutely positioned element do not flow around any other boxes. They may obscure the contents of another box (or be obscured themselves), depending on the stack levels [p. 154] of the overlapping boxes.

9.6.1 Fixed positioning

Fixed positioning is a subcategory of absolute positioning. The only difference is that for a fixed positioned box, the containing block is established by the viewport [p. 120] . For continuous media [p. 102] , fixed boxes do not move when the document is scrolled. In this respect, they are similar to fixed background images [p. 222] . For paged media [p. 211] , boxes with fixed positions are repeated on every page. This is useful for placing, for instance, a signature at the bottom of each page.

Authors may use fixed positioning to create frame-like presentations. Consider the following frame layout:

This might be achieved with the following HTML document and style rules:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>A frame document with CSS 2.1</TITLE>
<STYLE type="text/css" media="screen">
BODY { height: 8.5in } /* Required for percentage heights below */
#header {
position: fixed;
width: 100%;
height: 15%;
top: 0;
right: 0;
bottom: auto;
left: 0;
}
#sidebar {
position: fixed;
width: 10em;
height: auto;
top: 15%;
right: auto;
bottom: 100px;
left: 0;
}
#main {
position: fixed;
width: auto;
height: auto;
top: 15%;
right: 0;
bottom: 100px;
left: 10em;
}
#footer {
position: fixed;
width: 100%;
height: 100px;
top: auto;
right: 0;
bottom: 0;
left: 0;
}
</STYLE>
</HEAD>
<BODY>
<DIV id="header"> ... </DIV>
<DIV id="sidebar"> ... </DIV>
<DIV id="main"> ... </DIV>
<DIV id="footer"> ... </DIV>
</BODY>
</HTML>

9.7 Relationships between ’display’, ’position’, and ’float’

The three properties that affect box generation and layout — ’display’, ’position’, and ’float’ — interact as follows:

1. If ’display’ has the value ’none’, then ’position’ and ’float’ do not apply. In this case, the element generates no box.
2. Otherwise, if ’position’ has the value ’absolute’ or ’fixed’, the box is absolutely positioned, the computed value of ’float’ is ’none’, and display is set according to the table below. The position of the box will be determined by the ’top’, ’right’, ’bottom’ and ’left’ properties and the box’s containing block.
3. Otherwise, if ’float’ has a value other than ’none’, the box is floated and ’display’ is set according to the table below.
4. Otherwise, if the element is the root element, ’display’ is set according to the table below.
5. Otherwise, the remaining ’display’ property values apply as specified.

Specified value	Computed value
inline-table	table
inline, run-in, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block	block
others	same as specified

9.8 Comparison of normal flow, floats, and absolute positioning

To illustrate the differences between normal flow, relative positioning, floats, and absolute positioning, we provide a series of examples based on the following HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>Comparison of positioning schemes</TITLE>
</HEAD>
<BODY>
<P>Beginning of body contents.
<SPAN id="outer"> Start of outer contents.
<SPAN id="inner"> Inner contents.</SPAN>
End of outer contents.</SPAN>
End of body contents.
</P>
</BODY>
</HTML>

In this document, we assume the following rules:

body { display: block; font-size:12px; line-height: 200%;
width: 400px; height: 400px }
p { display: block }
span { display: inline }

还是看 原文的图比较清楚。

9.8.4 Absolute positioning

Finally, we consider the effect of absolute positioning [p. 141] . Consider the following CSS declarations for outer and inner:

#outer {
position: absolute;
top: 200px; left: 200px;
width: 200px;
color: red;
}
#inner { color: blue }

which cause the top of the outer box to be positioned with respect to its containing block. The containing block for a positioned box is established by the nearest positioned ancestor (or, if none exists, the initial containing block [p. 161] , as in our example). The top side of the outer box is ’200px’ below the top of the containing block and the left side is ’200px’ from the left side. The child box of outer is flowed normally with respect to its parent.

绝对定位的元素的位置是相对其容器区域定位的。一个可定位盒子（position属性不是static）的容器 区域是由离它最近的可定位的祖先元素形成的。

The following example shows an absolutely positioned box that is a child of a relatively positioned box. Although the parent outer box is not actually offset, setting its ’position’ property to ’relative’ means that its box may serve as the containing block for positioned descendants. Since the outer box is an inline box that is split across several lines, the first inline box’s top and left edges (depicted by thick dashed lines in the illustration below) serve as references for ’top’ and ’left’ offsets.

#outer {
position: relative;
color: red
}
#inner {
position: absolute;
top: 200px; left: -100px;
height: 130px; width: 130px;
color: blue;

}

If we do not position the outer box:

#outer { color: red }
#inner {
position: absolute;
top: 200px; left: -100px;
height: 130px; width: 130px;
color: blue;
}

the containing block for inner becomes the initial containing block [p. 161] (in our example). The following illustration shows where the inner box would end up in this case.

Relative and absolute positioning may be used to implement change bars, as shown in the following example. The following fragment:

<P style="position: relative; margin-right: 10px; left: 10px;">
I used two red hyphens to serve as a change bar. They
will "float" to the left of the line containing THIS
<SPAN style="position: absolute; top: auto; left: -1em; color: red;">--</SPAN>
word.</P>

First, the paragraph (whose containing block sides are shown in the illustration) is flowed normally. Then it is offset ’10px’ from the left edge of the containing block (thus, a right margin of ’10px’ has been reserved in anticipation of the offset). The two hyphens acting as change bars are taken out of the flow and positioned at the current line (due to ’top: auto’), ’-1em’ from the left edge of its containing block (established by the P in its final position). The result is that the change bars seem to "float" to the left of the current line.

top: auto这个东东不错 :-D

9.9 Layered presentation

9.9.1 Specifying the stack level: the ’z-index’ property

For a positioned box, the ’z-index’ property specifies:

1. The stack level of the box in the current stacking context.
2. Whether the box establishes a local stacking context.

Values have the following meanings:

<integer> This integer is the stack level of the generated box in the current stacking context. The box also establishes a local stacking context in which its stack level is ’0’. auto The stack level of the generated box in the current stacking context is the same as its parent’s box. The box does not establish a new local stacking context.

The order in which the rendering tree is painted onto the canvas is described in terms of stacking contexts. Stacking contexts can contain further stacking contexts. A stacking context is atomic from the point of view of its parent stacking context; boxes in other stacking contexts may not come between any of its boxes.

Each box belongs to one stacking context. Each box in a given stacking context has an integer stack level, which is its position on the z-axis relative to other boxes in the same stacking context. Boxes with greater stack levels are always formatted in front of boxes with lower stack levels. Boxes may have negative stack levels. Boxes with the same stack level in a stacking context are stacked back-to-front according to document tree order.

Each stacking context consists of the following stacking levels (from back to front):

1. the background and borders of the element forming the stacking context.
2. the stacking contexts of descendants with negative stack levels.
3. a stacking level containing in-flow non-inline-level descendants.
4. a stacking level for floats and their contents.
5. a stacking level for in-flow inline-level descendants.
6. a stacking level for positioned descendants with ’z-index: auto’, and any descendant stacking contexts with ’z-index: 0’.
7. the stacking contexts of descendants with positive stack levels.

9.10 Text direction: the ’direction’ and ’unicode-bidi’ properties

10 Visual formatting model details

10.1 Definition of "containing block"

The position and size of an element’s box(es) are sometimes calculated relative to a certain rectangle, called the containing block of the element. The containing block of an element is defined as follows:

1. The containing block in which the root element lives is a rectangle with the dimensions of the viewport , anchored at the canvas origin for continuous media, and the page area for paged media. This containing block is called the initial containing block. The ’direction’ property of the initial containing block is the same as for the root element.
2. For other elements, if the element’s position is ’relative’ or ’static’, the containing block is formed by the content edge of the nearest block-level , table cell or inline-block ancestor box.
3. If the element has ’position: fixed’, the containing block is established by the viewport in the case of continuous media or the page area in the case of paged media.
4. If the element has ’position: absolute’, the containing block is established by the nearest ancestor with a ’position’ of ’absolute’, ’relative’ or ’fixed’, in the following way:
   1. In the case that the ancestor is inline-level, the containing block depends on the ’direction’ property of the ancestor:
      1. If the ’direction’ is ’ltr’, the top and left of the containing block are the top and left padding edges of the first box generated by the ancestor, and the bottom and right are the bottom and right padding edges of the last box of the ancestor.
      2. If the ’direction’ is ’rtl’, the top and right are the top and right padding edges of the first box generated by the ancestor, and the bottom and left are the bottom and left padding edges of the last box of the ancestor.
      Note: This may cause the containing block’s width to be negative.
   2. Otherwise, the containing block is formed by the padding edge of the ancestor.
   If there is no such ancestor, the containing block is the initial containing block.

元素盒子的位置和大小的计算与一个特定的矩形有关，叫容器区域。 一个元素的容器区域定义如下： 根元素的容器区域是viewport（窗口或者屏幕的可视区域） ，锚点位于画布的起始点（连续的媒介物时）,或者页面区域的起始点（分页的媒介物时）。 它也叫初始容器区域。它的 ’direction’ 属性和根元素相同。 对于其它元素，如果position是’relative’或’static’，容器区域由最近的 块级，表单元格或内联块级的祖先盒子的内容边沿构成。 如果元素’position: fixed’，容器区域由viewport（连续媒介物时）或者页面区域 （分页的媒介物时）构成。 如果元素’position: absolute’，容器区域由最近的’position’为 ’absolute’, ’relative’或’fixed’的祖先构成，以如下方式： 如果该祖先是内联级，容器区域取决于其’direction’属性： 如果’direction’是’ltr’，容器区域的top和left是该祖先的生成的第一个盒子的内边沿， bottom和right是祖先的生成的最后一个盒子的内边沿。 如果’direction’是’rtl’，容器区域的top和right是该祖先的生成的第一个盒子的内边沿， bottom和left是祖先的生成的最后一个盒子的内边沿。 否则，容器区域由该祖先的内边沿构成。 如果没有这样的祖先，容器区域则是初始容器区域。

With no positioning, the containing blocks (C.B.) in the following document:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>Illustration of containing blocks</TITLE>
</HEAD>
<BODY id="body">
<DIV id="div1">
<P id="p1">This is text in the first paragraph...</P>
<P id="p2">This is text <EM id="em1"> in the
<STRONG id="strong1">second</STRONG> paragraph.</EM></P>
</DIV>
</BODY>
</HTML>

are established as follows:

For box generated by	C.B. is established by
html	initial C.B. (UA-dependent)
body	html
div1	body
p1	div1
p2	div1
em1	p2
strong1	p2

If we position "div1":

#div1 { position: absolute; left: 50px; top: 50px }

its containing block is no longer "body"; it becomes the initial containing block (since there are no other positioned ancestor boxes).

If we position "em1" as well:

#div1 { position: absolute; left: 50px; top: 50px }
#em1 { position: absolute; left: 100px; top: 100px }

the table of containing blocks becomes:

For box generated by	C.B. is established by
html	initial C.B. (UA-dependent)
body	html
div1	initial C.B.
p1	div1
p2	div1
em1	div1
strong1	em1

By positioning "em1", its containing block becomes the nearest positioned ancestor box (i.e., that generated by "div1").

10.2 Content width: the ’width’ property

This property specifies the content width of boxes generated by block-level and replaced elements.

This property does not apply to non-replaced inline-level elements. The content width of a non-replaced inline element’s boxes is that of the rendered content within them (before any relative offset of children). Recall that inline boxes flow into line boxes . The width of line boxes is given by the their containing block , but may be shorted by the presence of floats .

The width of a replaced element’s box is intrinsic and may be scaled by the user agent if the value of this property is different than ’auto’.

非替换性的内联元素的宽由它里面的内容决定。 替换性元素（如img）的盒子的宽是它自身的宽， 如果width属性不是auto可能会被user agent缩放。

10.3 Calculating widths and margins

The values of an element’s ’width’, ’margin-left’, ’margin-right’, ’left’ and ’right’ properties as used for layout depend on the type of box generated and on each other. (The value used for layout is sometimes referred to as the used value .) In principle, the values used are the same as the computed values, with ’auto’ replaced by some suitable value, and percentages calculated based on the containing block, but there are exceptions. The following situations need to be distinguished:

1. inline, non-replaced elements
2. inline, replaced elements
3. block-level, non-replaced elements in normal flow
4. block-level, replaced elements in normal flow
5. floating, non-replaced elements
6. floating, replaced elements
7. absolutely positioned, non-replaced elements
8. absolutely positioned, replaced elements
9. ’inline-block’, non-replaced elements in normal flow
10. ’inline-block’, replaced elements in normal flow

10.3.1 Inline, non-replaced elements

The ’width’ property does not apply. A computed value of ’auto’ for ’left’, ’right’, ’margin-left’ or ’margin-right’ becomes a used value of ’0’.

10.3.2 Inline, replaced elements

A computed value of ’auto’ for ’margin-left’ or ’margin-right’ becomes a used value of ’0’.

10.3.3 Block-level, non-replaced elements in normal flow

The following constraints must hold among the used values of the other properties: ’margin-left’ + ’border-left-width’ + ’padding-left’ + ’width’ + ’padding-right’ + ’border-right-width’ + ’margin-right’ + scrollbar width (if any) = width of containing block

If ’width’ is not ’auto’ and ’border-left-width’ + ’padding-left’ + ’width’ + ’padding-right’ + ’border-right-width’ + scrollbar width (if any) (plus any of ’margin-left’ or ’margin-right’ that are not ’auto’) is larger than the width of the containing block, then any ’auto’ values for ’margin-left’ or ’margin-right’ are, for the following rules, treated as zero.

If all of the above have a computed value other than ’auto’, the values are said to be "over-constrained" and one of the used values will have to be different from its computed value. If the ’direction’ property of the containing block has the value ’ltr’, the specified value of ’margin-right’ is ignored and the value is calculated so as to make the equality true. If the value of ’direction’ is ’rtl’, this happens to ’margin-left’ instead.

10.3.4 Block-level, replaced elements in normal flow

The used value of ’width’ is determined as for inline replaced elements . Then the rules for non-replaced block-level elements are applied to determine the margins.

10.3.5 Floating, non-replaced elements

If ’margin-left’, or ’margin-right’ are computed as ’auto’, their used value is ’0’. If ’width’ is computed as ’auto’, the used value is the "shrink-to-fit" width.

10.3.6 Floating, replaced elements

If ’margin-left’ or ’margin-right’ are computed as ’auto’, their used value is ’0’. The used value of ’width’ is determined as for inline replaced elements .

10.3.7 Absolutely positioned, non-replaced elements

10.3.8 Absolutely positioned, replaced elements

10.3.9 ’Inline-block’, non-replaced elements in normal flow

10.3.10 ’Inline-block’, replaced elements in normal flow

10.4 Minimum and maximum widths: ’min-width’ and ’max-width’

These two properties allow authors to constrain content widths to a certain range.

10.6 Calculating heights and margins

10.7 Minimum and maximum heights: ’min-height’ and ’max-height’

10.8 Line height calculations: the ’line-height’ and ’vertical-align’ properties

As described in the section on inline formatting contexts , user agents flow inline boxes into a vertical stack of line boxes.

10.8.1 Leading and half-leading

’line-height’

Value: normal | <number> | <length> | <percentage> | inherit

Example(s):

The three rules in the example below have the same resultant line height:

div { line-height: 1.2; font-size: 10pt } /* number */
div { line-height: 1.2em; font-size: 10pt } /* length */
div { line-height: 120%; font-size: 10pt } /* percentage */

’vertical-align’

Value: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit

11 Visual effects

11.1 Overflow and clipping

Generally, the content of a block box is confined to the content edges of the box. In certain cases, a box may overflow, meaning its content lies partly or entirely outside of the box

Whenever overflow occurs, the ’overflow’ property specifies whether a box is clipped to its padding edge, and if so, whether a scrolling mechanism is provided to access any clipped out content.

11.1.1 Overflow: the ’overflow’ property

This property specifies whether content of a block-level element is clipped when it overflows the element’s box. It affects the clipping of all of the element’s content except any descendant elements (and their respective content and descendants) whose containing block is the viewport or an ancestor of the element. Values have the following meanings:

容器区域在该元素之外的后代元素不受’overflow’属性的影响。

11.1.2 Clipping: the ’clip’ property

A clipping region defines what portion of an element’s border box is visible. By default, the element is not clipped. However, the clipping region may be explicitly set with the ’clip’ property.

An element’s clipping region clips out any aspect of the element (e.g. content, children, background, borders, text decoration, outline and visible scrolling mechanism — if any) that is outside the clipping region. Content that has been clipped does not cause overflow.

11.2 Visibility: the ’visibility’ property

The ’visibility’ property specifies whether the boxes generated by an element are rendered. Invisible boxes still affect layout (set the ’display’ property to ’none’ to suppress box generation altogether). Values have the following meanings:

visible

The generated box is visible.

hidden

The generated box is invisible (fully transparent, nothing is drawn), but still affects layout. Furthermore, descendents of the element will be visible if they have ’visibility: visible’.

collapse

Please consult the section on dynamic row and column effects in tables. If used on elements other than rows, row groups, columns, or column groups, ’collapse’ has the same meaning as ’hidden’.

12 Generated content, automatic numbering,and lists

In some cases, authors may want user agents to render content that does not come from the document tree . One familiar example of this is a numbered list; the author does not want to list the numbers explicitly, he or she wants the user agent to generate them automatically. Similarly, authors may want the user agent to insert the word "Figure" before the caption of a figure, or "Chapter 7" before the seventh chapter title. For audio or braille in particular, user agents should be able to insert these strings.

In CSS 2.1, content may be generated by two mechanisms:

1. The ’content’ property, in conjunction with the :before and :after pseudo-elements.
2. Elements with a value of ’list-item’ for the ’display’ property.

12.1 The :before and :after pseudo-elements

For example, the following rule inserts the string "Note: " before the content of every P element whose "class" attribute has the value "note":

p.note:before { content: "Note: " }

The formatting objects (e.g., boxes) generated by an element include generated content. So, for example, changing the above style sheet to:

p.note:before { content: "Note: " }
p.note { border: solid green }

would cause a solid green border to be rendered around the entire paragraph, including the initial string.

The :before and :after pseudo-elements inherit any inheritable properties from the element in the document tree to which they are attached.

For example, the following rules insert an open quote mark before every Q element. The color of the quote mark will be red, but the font will be the same as the font of the rest of the Q element:

q:before {
content: open-quote;
color: red
}

12.2 The ’content’ property

This property is used with the :before and :after pseudo-elements to generate content in a document. Values have the following meanings:

none

The pseudo-element is not generated.

normal

Computes to ’none’ for the :before and :after pseudo-elements.

<string>

Text content (see the section on strings ).

<uri>

The value is a URI that designates an external resource (such as an image). If the user agent cannot display the resource it must either leave it out as if it were not specified or display some indication that the resource cannot be displayed.

<counter>

Counters may be specified with two different functions: ’counter()’ or ’counters()’. The former has two forms: ’counter(name)’ or ’counter(name, style)’. The generated text is the value of the innermost counter of the given name in scope at this pseudo-element; it is formatted in the indicated style (’decimal’ by default). The latter function also has two forms: ’counters(name, string)’ or ’counters(name, string, style)’. The generated text is the value of all counters with the given name in scope at this pseudo-element, from outermost to innermost separated by the specified string. The counters are rendered in the indicated style (’decimal’ by default). See the section on automatic counters and numbering for more information.

open-quote and close-quote

These values are replaced by the appropriate string from the ’quotes’ property. no-open-quote and no-close-quote Introduces no content, but increments (decrements) the level of nesting for quotes.

attr(X)

This function returns as a string the value of attribute X for the subject of the selector. The string is not parsed by the CSS processor. If the subject of the selector doesn’t have an attribute X, an empty string is returned. The case-sensitivity of attribute names depends on the document language.

Authors may include newlines in the generated content by writing the "\A" escape sequence in one of the strings after the ’content’ property. This inserted line break is still subject to the ’white-space’ property. See "Strings" and "Characters and case" for more information on the "\A" escape sequence.

h1:before { display: block; text-align: center; white-space: pre; content: "chapter\A hoofdstuk\A chapitre" }

很有用的东东，IE又不支持。

12.3 Quotation marks

12.4 Automatic counters and numbering

12.5 Lists

12.5.1 Lists: the ’list-style-type’, ’list-style-image’, ’list-style-position’, and ’list-style’ properties

13 Paged media

14 Colors and Backgrounds

14.1 Foreground color: the ’color’ property

14.2 The background

Authors may specify the background of an element (i.e., its rendering surface) as either a color or an image. In terms of the box model , "background" refers to the background of the content , padding and border areas. Border colors and styles are set with the border properties . Margins are always transparent.

14.2.1 Background properties: ’background-color’, ’background-image’, ’background-repeat’, ’background-attachment’, ’background-position’, and ’background’

In the first rule of the following example, only a value for ’background-color’ has been given and the other individual properties are set to their initial value. In the second rule, all individual properties have been specified.

BODY { background: red }
P { background: url("chess.png") gray 50% repeat fixed }

15 Fonts

15.2 Font matching algorithm

Because there is no accepted, universal taxonomy of font properties, matching of properties to font faces must be done carefully. The properties are matched in a well-defined order to insure that the results of this matching process are as consistent as possible across UAs (assuming that the same library of font faces is presented to each of them).

1. The User Agent makes (or accesses) a database of relevant CSS 2.1 properties of all the fonts of which the UA is aware. If there are two fonts with exactly the same properties, the user agent selects one of them.
2. At a given element and for each character in that element, the UA assembles the font properties applicable to that element. Using the complete set of properties, the UA uses the ’font-family’ property to choose a tentative font family. The remaining properties are tested against the family according to the matching criteria described with each property. If there are matches for all the remaining properties, then that is the matching font face for the given element or character.
3. If there is no matching font face within the ’font-family’ being processed by step 2, and if there is a next alternative ’font-family’ in the font set, then repeat step 2 with the next alternative ’font-family’.
4. If there is a matching font face, but it doesn’t contain a glyph for the current character, and if there is a next alternative ’font-family’ in the font sets, then repeat step 2 with the next alternative ’font-family’.
5. If there is no font within the family selected in 2, then use a UA-dependent default ’font-family’ and repeat step 2, using the best match that can be obtained within the default font. If a particular character cannot be displayed using this font, then the UA may use other means to determine a suitable font for that character. The UA should map each character for which it has no suitable font to a visible symbol chosen by the UA, preferably a "missing character" glyph from one of the font faces available to the UA.

The per-property matching rules from (2) above are as follows:

1. ’font-style’ is tried first. ’italic’ will be satisfied if there is either a face in the UA’s font database labeled with the CSS keyword ’italic’ (preferred) or ’oblique’. Otherwise the values must be matched exactly or font-style will fail.
2. ’font-variant’ is tried next. ’small-caps’ matches (1) a font labeled as ’small-caps’, (2) a font in which the small caps are synthesized, or (3) a font where all lowercase letters are replaced by upper case letters. A small-caps font may be synthesized by electronically scaling uppercase letters from a normal font. ’normal’ matches a font’s normal (non-small-caps) variant. A font cannot fail to have a normal variant. A font that is only available as small-caps shall be selectable as either a ’normal’ face or a ’small-caps’ face.
3. ’font-weight’ is matched next, it will never fail. (See ’font-weight’ below.)
4. ’font-size’ must be matched within a UA-dependent margin of tolerance. (Typically, sizes for scalable fonts are rounded to the nearest whole pixel, while the tolerance for bitmapped fonts could be as large as 20%.) Further computations, e.g. by ’em’ values in other properties, are based on the computed value of ’font-size’.

哎，大家都不照规矩来。 :-( 字体设置可以参考 谈谈网页设计中的字体应用

16 Text

16.1 Indentation: the ’text-indent’ property

16.2 Alignment: the ’text-align’ property

16.3.1 Underlining, overlining, striking, and blinking: the ’text-decoration’ property

16.4 Letter and word spacing: the ’letter-spacing’ and ’word-spacing’ properties

16.5 Capitalization: the ’text-transform’ property

16.6 Whitespace: the ’white-space’ property

17 Tables

看着表格就烦。以后再看。

18 User interface

18.1 Cursors: the ’cursor’ property

18.4 Dynamic outlines: the ’outline’ property

At times, style sheet authors may want to create outlines around visual objects such as buttons, active form fields, image maps, etc., to make them stand out. CSS 2.1 outlines differ from borders in the following ways:

1. Outlines do not take up space.
2. Outlines may be non-rectangular.

18.4.1 Outlines and the focus

For example, to draw a thick black line around an element when it has the focus, and a thick red line when it is active, the following rules can be used:

:focus { outline: thick solid black }
:active { outline: thick solid red }

 

 

 

 

 

转载于:https://www.cnblogs.com/thxiso/archive/2008/10/27/1303909.html