You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
CSS takes a source document, organized as a tree of <dfn lt="element|element tree">elements</dfn>,
25
+
and renders it onto a <a href="http://www.w3.org/TR/CSS21/intro.html#canvas">canvas</a> (such as your screen, a piece of paper, or an audio stream).
26
+
To do this, it generates an intermediary structure,
27
+
the <dfn>box tree</dfn>,
28
+
which represents the formatting structure of the rendered document.
29
+
Each <dfn>box</dfn> represents its corresponding <a>element</a> (or <a>pseudo-element</a>)
30
+
in space and/or time on the canvas.
31
+
32
+
To create the <a>box tree</a>,
33
+
CSS first uses <a href="http://www.w3.org/TR/css-cascade/">cascading and inheritance</a>,
34
+
to assign a value for each CSS property
35
+
to each element in the source tree.
36
+
(See [[!CSS3-CASCADE]].)
37
+
38
+
Then, for each element, it generates zero or more boxes
39
+
as specified by that element's 'display' and 'box-suppress' properties.
40
+
Typically, an element generates a single <a>box</a>.
41
+
However, some 'display' values
42
+
(e.g. ''display: list-item'')
43
+
generate more than one box
44
+
(e.g. a <a href="http://www.w3.org/TR/CSS21/visuren.html#principal-box">principal block box</a> and a <a href="http://www.w3.org/TR/CSS21/generate.html#lists">marker box</a>).
45
+
And some values
46
+
(such as ''display:none'', ''display: contents'', and ''box-suppress: discard'')
47
+
cause the <a>element</a> and/or its descendants to not generate any <a>boxes</a> at all.
48
+
<a>Boxes</a> are assigned the same styles as their generating <a>element</a>, unless otherwise indicated.
49
+
They're often referred to by their 'display' type--
50
+
e.g. a <a>box</a> generated by an element with ''display: block'' is called a “block box” or just a “block”.
51
+
52
+
An <dfn lt="anonymous|anonymous box">anonymous box</dfn> is is a box that is not associated with any element.
53
+
<a>Anonymous boxes</a> are generated in certain circumstances
54
+
to fix up the <a>box tree</a> when it requires a particular nested structure
55
+
that is not provided by the boxes generated from the <a>element tree</a>.
56
+
For example, a <a href="http://www.w3.org/TR/CSS21/tables.html#table-display">table cell box</a>
57
+
requires a particular type of parent box (the <a href="http://www.w3.org/TR/CSS21/tables.html#table-display">table row box</a>),
58
+
and will generate an <a>anonymous</a><a href="http://www.w3.org/TR/CSS21/tables.html#table-display">table row box</a> around itself
59
+
if its parent is not a <a href="http://www.w3.org/TR/CSS21/tables.html#table-display">table row box</a>.
60
+
(See [[CSS21]] § <a href="http://www.w3.org/TR/CSS21/tables.html#anonymous-boxes">17.2.1</a>.)
61
+
Unlike element-generated boxes, whose styles inherit strictly through the element tree,
62
+
anonymous boxes (which only exist in the <a>box tree</a>)
63
+
<a href="http://www.w3.org/TR/css-cascade/#inheriting">inherit</a> through their <a>box tree</a> parentage.
64
+
65
+
In the course of layout,
66
+
a <a>box</a> may be broken into multiple <a>fragments</a>.
67
+
This happens, for example, when an inline box is broken across lines,
68
+
or when a block box is broken across pages or columns.
69
+
A <a>box</a> therefore consists of one or more <a>box fragments</a>.
70
+
See [[CSS3-BREAK]] for more information on <a>fragmentation</a>.
23
71
24
-
The 'display' property, introduced in CSS 2.1,
25
-
defines what kind of boxes an element generates
26
-
(and whether it generates boxes at all),
27
-
and how it lays out its contents.
28
-
29
-
These concepts are actually rather independent,
30
-
though they're conflated by the 'display' property.
31
-
This causes some pain when a property value intended to affect one aspect
32
-
(such as setting an element to ''display:none'' to suppress box generation)
33
-
affects another aspect
34
-
(such as losing the memory of what it was <em>before</em>''display:none'',
35
-
so that it can be set back to that value later).
36
-
37
-
This specification subsumes the CSS 2.1 definition of the 'display' property,
38
-
and redefines it to be a shorthand property for a small family of longhands,
39
-
each controlling an independent aspect of an element's "display".
72
+
Note: Many of the CSS specs were written before this terminology was ironed out,
73
+
or refer to things incorrectly,
74
+
so view older specs with caution when they're using these terms.
75
+
It should be possible to infer from context which term they really mean.
76
+
Please <a href="#status">report errors</a> in specs when you find them,
77
+
so they can be corrected.
40
78
79
+
Note: Further information on the “aural” box tree
80
+
and its interaction with the 'display' property
81
+
can be found in the <a href="http://www.w3.org/TR/css3-speech/#aural-model">CSS Speech Module</a>.
82
+
[[!CSS3-SPEECH]]
41
83
42
84
<h3 id="placement">
43
85
Module interactions</h3>
44
86
45
-
This specification transforms the 'display' property into a shorthand property,
46
-
and defines several longhand properties that it expands into or effects.
47
-
48
87
This module replaces and extends the definition of the 'display' property defined in [[!CSS21]] section 9.2.4.
49
88
50
89
None of the properties in this module apply to the <code>::first-line</code> or <code>::first-letter</code> pseudo-elements.
@@ -81,6 +120,11 @@ Controlling Layout Modes: the 'display' property</h2>
0 commit comments