8000 csswg-drafts/css-box/Overview.html at c5c9e02d5053a9b0b099af665a16259825f53df3 · w3c/csswg-drafts · GitHub
Skip to content

Overview.html

Latest commit

 

History

History
9333 lines (7064 loc) · 334 KB

Overview.html

File metadata and controls

9333 lines (7064 loc) · 334 KB
<li><a href="#stacking-contexts"><span class=secno>23. </span>Stacking
contexts</a>
<ul class=toc>
<li><a href="#definitions"><span class=secno>23.1.
</span>Definitions</a>
<li><a href="#painting-order"><span class=secno>23.2. </span>Painting
order</a>
<li><a href="#notes"><span class=secno>23.3. </span>Notes</a>
<li><a href="#the-ltnumbergt-value"><span class=secno>23.4. </span>The
&lt;number&gt; value</a>
<li><a href="#auto"><span class=secno>23.5. </span>The auto value</a>
<li><a href="#complex-size"><span class=secno>23.6. </span>Algorithm for
shrink-wrapping replaced elements with complex width/height</a>
</ul>
<li><a href="#the-float-displace-and-indent-edge-reset"><span
class=secno>24. </span>The ‘<code
class=property>float-displace</code>’ and ‘<code
class=property>indent-edge-reset</code>’ properties
[alternative 1]</a>
<ul class=toc>
<li><a href="#the-float-displace-property"><span class=secno>24.1.
</span>The ‘<code class=property>float-displace</code>’
property</a>
<li><a href="#the-indent-edge-reset-property"><span class=secno>24.2.
</span>The ‘<code class=property>indent-edge-reset</code>’
property</a>
</ul>
<li class=no-num><a href="#the-float-displace-property-alternative2">The
‘float-displace’ property [alternative 2]</a>
<li class=no-num><a href="#the-float-displace-property-alternative3">The
‘float-displace’ property [alternative 3]</a>
<li><a href="#conformance"><span class=secno>25. </span>Conformance</a>
<li><a href="#acknowledgments"><span class=secno>26.
</span>Acknowledgments</a>
<li class=no-num><a href="#references">References</a>
<ul class=toc>
<li class=no-num><a href="#normative-references">Normative
references</a>
<li class=no-num><a href="#informative-references">Informative
references</a>
</ul>
<li class=no-num><a href="#index">Index</a>
<li class=no-num><a href="#property-index">Property index</a>
</ul>
<!--end-toc-->
<h2 id=how-to-read-this-specification><span class=secno>1. </span>How to
read this specification</h2>
<p>All sections are normative, unless stated otherwise.
<div class=example>
<p>Examples look like this and normally start with the word “Example.”
Examples are not normative.
</div>
<p class=note>Notes look like this and normally start with the word
“Note.” Notes are not normative.
<p class=issue>Editorial notes look like this. They will be removed before
the document becomes Candidate Recommendation.
<p>Each property is defined in part in the text and in part by a table that
groups together a number of facts about the property, including a regular
expression to restrict its syntax. See <span class=issue>[where?]</span>
for the meaning. The “Inherited” and “Initial” rows in the table
are used by the Cascading and Inheritance module <a href="#CSS3CASCADE"
rel=biblioentry>[CSS3CASCADE]<!--{{CSS3CASCADE}}--></a> and “Media” by
the Media Queries specification <a href="#MEDIAQ"
rel=biblioentry>[MEDIAQ]<!--{{MEDIAQ}}--></a>.
<p>The specification may refer to the <a href="#used-value."><em>used
value</em></a> and the <a href="#computed-value"><em>computed
value</em></a> of a property. Unless stated explicitly, the short form
“value” means the computed value.
<h2 id=dependencies-on-other-modules><span class=secno>2.
</span>Dependencies on other modules</h2>
<p>This CSS module depends on the following other CSS modules:
<ul>
<li><cite>CSS Writing Modes Module</cite> <a href="#CSS3-WRITING-MODES"
rel=biblioentry>[CSS3-WRITING-MODES]<!--{{!CSS3-WRITING-MODES}}--></a>
– switch between vertical and horizontal text, properties <dfn
id=writing-mode>writing-mode</dfn> and <dfn id=direction>direction</dfn>,
definitions of the terms <dfn id=block-flow-direction>block flow
direction</dfn> and <dfn id=inline-base-direction.>inline base
direction.</dfn>
<li><cite>CSS Syntax Module</cite> <a href="#CSS3SYN"
rel=biblioentry>[CSS3SYN]<!--{{!CSS3SYN}}--></a> – syntax of properties
and values
<li><cite>CSS Values and Units Module</cite> <a href="#CSS3VAL"
rel=biblioentry>[CSS3VAL]<!--{{!CSS3VAL}}--></a> – definitions of value
types <dfn id=number><var>&lt;number&gt;</var></dfn>, <dfn
id=percentage><var>&lt;percentage&gt;</var></dfn>, <dfn
id=angle><var>&lt;angle&gt;</var></dfn> and <dfn
id=lenhgt><var>&lt;length&gt;</var></dfn>; defines the terms <dfn
id=computed-value>computed value</dfn> and <dfn id=used-value.>used
value.</dfn>
<li><cite>CSS Text Module</cite> <a href="#CSS3TEXT"
rel=biblioentry>[CSS3TEXT]<!--{{!CSS3TEXT}}--></a> – inline layout and
definition of <dfn id=line-box.>line box.</dfn>
<li><cite>CSS Generated and Replaced Content module</cite> <a
href="#CSS3GENCON" rel=biblioentry>[CSS3GENCON]<!--{{!CSS3GENCON}}--></a>
– defines the terms <dfn id=replaced-element>replaced element</dfn> and
<dfn id=intrinsic0>intrinsic</dfn> size (and intrinsic ratio).
<li><cite>CSS Backgrounds and Borders Module</cite> <a href="#CSS3BG"
rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a> – defines <dfn
id=bg-position><var>&lt;bg-position&gt;</var></dfn>
<li><cite>CSS Basic User Interface Module</cite> <a href="#CSS3UI"
rel=biblioentry>[CSS3UI]<!--{{!CSS3UI}}--></a> – defines <dfn
id=box-sizing>box-sizing</dfn>
<li><cite>CSS 2D Transforms</cite> <a href="#CSS3-2D-TRANSFORMS"
rel=biblioentry>[CSS3-2D-TRANSFORMS]<!--{{!CSS3-2D-TRANSFORMS}}--></a>
– defines <dfn id=transform>transform</dfn>
</ul>
<h2 id=introduction-amp-definitions><span class=secno>3.
</span>Introduction &amp; definitions</h2>
<p class=issue>Investigate if it is possible to make a pseudo-element to
select anonymous boxes (‘<code class=css>::paragraph</code>’). See
minutes of 10 Aug 2011.
<p class=note>Note: The model in this specification differs from the model
described in the CSS level 2 specification <a href="#CSS21"
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, because it is generalized to
apply also to vertical text. A document using only features from level 2
renders exactly as described there, (except possibly for features that are
undefined in that specification and have become defined since).
<p>CSS assumes that the document to lay out is modeled as a <span
class=index id=tree
title="tree!!of elements|document tree|element tree">tree</span> of <dfn
id=elements. title=element>elements.</dfn> Each element has an ordered
list of zero or more child elements, with an optional string of text
before the list, in-between the children and after the list. Each child
has one parent, except for the unique element that has no parent, which is
called the <dfn id=root-element.>root element.</dfn>
<p class=note>Note that such a tree can be described in XML or SGML, but
also in other notations and that it is the definition of that notation,
not CSS, that determines the equivalence between the abstract tree and the
concrete notation. E.g., SGML often allows white space to be added between
elements for readability, which does not result in a string of spaces in
the abstract tree.
<p>CSS describes how each element and each string of text is laid out by
transforming the document tree into a set of rectangular boxes, whose
size, position, and stacking level on the <a
href="#canvas"><em>canvas</em></a> depend on their properties. We say that
an element <dfn id=generates title="generated box">generates</dfn> one or
more boxes. There are numerous different types of boxes. <span
class=issue>[Or maybe only one? I.e., a block-level box is just a normal
box that happens to be generated by a block-level element?]</span> A block
box is like a paragraph; a line box is like a single line of text; and
inline boxes are like words inside a line.
<div class=issue>
<p>Define the <dfn id=box-tree. title="box tree|tree!!of boxes">box
tree.</dfn> (Is the space between words a kind of box as well, or a
spacer item? Is the current selection a box? Is there a defined order
among sibling boxes? If so, are bidi inline boxes ordered in reading
order or in visual order?)
<p>[Define the box tree before pagination and then describe how pagination
can break one box into two?] <!--
<ul>
<li>If the parent element is a list item, the boxes go into the
parent's block box, not the marker box.
<li>If the element is run-in, its boxes go either into a box of its
parent element, or into a box of a later sibling.
<li>The order of sibling boxes is always such that boxes that belong
to elements earlier in the document come before boxes of elements that
come later in the document.
<li>Note that 'position' can put a box into the box of an ancestor
(the one establishing the containing block) rather than a parent.
<li>Note that 'flow' puts boxes into a named flow root.
</ul>
-->
</div>
<p>When the specification says a box <var>A</var> <dfn
id=contains>contains</dfn> a box <var>B</var> it means <var>B</var> is a
child of <var>A</var> in the <a href="#box-tree."><em>box tree.</em></a>
Typically, box <var>B</var> is geometrically contained within box
<var>A</var> as well, but that need not be the case, because of, e.g.,
overflow or negative margins.
<p class=note>Note: The precise rules are below and in other modules, but
in summary, <span class=issue>[write something that helps convey the idea
of a flow, e.g.:]</span> a block-level box contains either other
block-level boxes (e.g., a section containing paragraphs, or a table
containing rows), or it contains line boxes (e.g., a paragraph containing
lines of text). A line box contains inline-level boxes (e.g., a line with
words in different styles). An inline-level box may contain either text
interspersed with more inline-level boxes, or it may contain a block-level
box (e.g., a small table that is rendered inline).
<div class=figure>
<p><img
alt="Each generated box in the rendering has a link to the element that generated it."
src=box-intro.png>
<p class=caption>Relation between four displayed boxes in the rendered
document (on the right) and the three corresponding elements in the
source document on the (left).
</div>
<div class=example>
<p>For example, a fragment of HTML such as
<pre>&lt;ul&gt;
&lt;li&gt;The first item in the list.
&lt;li&gt;The second item.
&lt;/ul&gt;</pre>
<p>may result in <span class=issue>[rewrite the following
sentence?]</span> one block-level box for the <code>ul</code> element,
containing two block-level boxes for the two <code>li</code> elements,
each of which has one line box (i.e., one line of text). Both line boxes
contain two inline-level boxes: one that contains the list bullet and one
that contains the text.
<p>Note how the <code>li</code> is transformed into multiple boxes,
including one that contains “generated content,” viz., the list
bullet, which is not present in the source document.
<p>If the document is rendered in a narrow window, it may be that the
<code>li</code> elements get transformed into even more boxes, because
the text requires multiple lines. And if the document is rendered on
paper or in multiple columns, it may be that a page break falls in the
middle of the <code>ul</code> element, so that it is not transformed into
a single block-level box, but into two smaller ones, each on a different
page or column.
</div>
<p>Each box belongs to exactly one element. It is either <a
href="#generates" title="generated box">generated</a> directly by the
element, or it is an <a href="#anonymous-box"><em>anonymous box,</em></a>
which has been inserted to ensure that every box and its parent are of
mutually compatible types as defined by the layout rules of CSS. An
anonymous box is defined to belong to whichever element generates the
box's closest element-generated ancestor box. When we need to be precise,
we say that the anonymous box is <dfn id=induced>induced,</dfn> rather
than generated, by the element it belongs to.
<p class=note>For example, an anonymous table wrapper box that is created
around a table cell because the table cell element doesn't have a table
element as parent, belongs to the parent element of the table cell, not to
the table cell itself.
<p class=note>An anonymous box is never a <em>principal</em> box. Except
for that, an anonymous box cannot be distinguished by its property values
and characteristics from a box generated by some hypothetical document
element. <span class=issue>Remove this note? Do we actually use the
concept of “principal box” anywhere?</span>
<p>Properties are set on elements <a href="#CSS3CASCADE"
rel=biblioentry>[CSS3CASCADE]<!--{{!CSS3CASCADE}}--></a> and influence how
the element is turned into boxes. Every box has the same properties with
the same values as the element to which it belongs, except for anonymous
boxes: inheritable properties on anonymous boxes have the same value as
the element, while non-inheritable properties have the initial value. The
only property that boxes do not have is the ‘<a href="#display0"><code
class=property>display</code></a>’ property. <span class=issue>[Is this
useful? Or is it better to say that boxes are just rectangles with a
border, a background, a position, a bunch of other boxes inside, and a
reference to the element they belong to? They don't really have properties
then and it is only a convenience to say the “the box has a font
<var>X.</var>”</span>
<p>Boxes do not have specified values <a href="#CSS3CASCADE"
rel=biblioentry>[CSS3CASCADE]<!--{{!CSS3CASCADE}}--></a>, but they do have
computed, used and actual values.
<p class=note>Boxes are frequently referred to by their property values.
For example, a “floated box” is a box whose computed value of ‘<a
href="#float"><code class=property>float</code></a>’ is not ‘<code
class=css>none</code>’, and a “positioned box” is a box whose
computed value of ‘<code class=property>position</code>’ is not
‘<code class=css>static</code>’. However, terms such as
<em>block-level box,</em> <a href="#block-container-box"><em>block
container box</em></a> and <em>table box</em> describe characteristics
which cannot be deduced solely from a box's property values.
<div class=figure id=various>
<p><img
alt="Diagram of a typical box, showing the content, padding, border and margin areas"
src=box.png>
<p class=caption>The various areas and edges of a typical box
</div>
<p>Boxes have padding, a border and margins (see the <a
href="#various">figure</a>). Different properties determine the thickness
of each of these (which may be zero). The margins of adjacent boxes are
also subject to <a href="#collapse."><em
title=collapse>collapsing</em></a> (i.e., the actual margin between
adjacent boxes may be less than the sum of the boxes' individual margins).
<p>Each box has a <dfn id=content-area>content area</dfn> (a.k.a. <dfn
id=content-box>content box</dfn>). The rectangle that bounds this area is
the <dfn id=content-edge.>content edge.</dfn> Around the content area is
the <dfn id=padding-area>padding area</dfn> and its outside bounds are
called the <dfn id=padding-edge.>padding edge.</dfn> The padding area and
content area together form the <dfn id=padding-box.>padding box.</dfn>
Outside the padding is the <dfn id=border-area>border area</dfn> and the
outside boundary of that area is the <dfn id=border-edge.>border
edge.</dfn> The border area, padding area and content area together form
the <dfn id=border-box.>border box.</dfn> Finally, outside the border is
the <dfn id=margin-area>margin area</dfn> and its outer edge is the <dfn
id=margin-edge.>margin edge.</dfn>
<p>When the specification says that the padding or border is <dfn
id=ldquoabsentrdquo
title="absent|padding!!absent|border!!absent">“absent”</dfn> on some
side of the box, that means that its thickness is zero.
<p><a href="#line-box."><em title="line box">Line boxes</em></a> cannot
have any padding, border or margin, and therefore their margin edge,
border edge, padding edge and content edge all coincide.
<p class=note>Note that the margin, unlike the border and padding, may have
a negative thickness. That is one way to make adjacent boxes overlap each
other.
<p class=note>Note that the edges always form rectangles, even if there is
a ‘<code class=property>border-radius</code>’ <a href="#CSS3BG"
rel=biblioentry>[CSS3BG]<!--{{CSS3BG}}--></a> or a shape <a
href="#CSS3-EXCLUSIONS"
rel=biblioentry>[CSS3-EXCLUSIONS]<!--{{CSS3-EXCLUSIONS}}--></a>.
<p>We say that a box or element is <dfn id=horizontal>horizontal</dfn> if
its ‘<a href="#writing-mode"><code
class=property>writing-mode</code></a>’ property is ‘<code
class=css>horizontal-tb</code>’, otherwise it is <dfn
id=vertical.>vertical.</dfn>
<div class=note>
<p>Note that there are theoretically eight possible orientations for text,
but CSS only defines six:
<table class=equiv-table style="table-layout: fixed; width: 100%">
<thead>
<tr>
<th>
<th>‘<code class=css>writing-mode: horizontal-tb</code>’
<th>‘<code class=css>writing-mode: vertical-rl</code>’
<th>‘<code class=css>writing-mode: vertical-lr</code>’
<tbody>
<tr>
<th>‘<code class=css>direction: ltr</code>’
<td>
<p>Text is written from left to right and paragraphs grow downwards
<p><img alt="" class=small src=horizontal.png>
<td>
<p>Text is written top to bottom and paragraphs grow to the left
<p><img alt="" class=small src=vertical.png>
<td>
<p>Text is written top to bottom and paragraphs grow to the right
<p><img alt="" class=small src=vertical-lr.png>
<tr>
<th>‘<code class=css>direction: rtl</code>’
<td>
<p>Text is written from right to left and paragraphs grow downwards
<p><img alt="" class=small src=horizontal-rtl.png>
<td>
<p>Text is written bottom to top and paragraphs grow to the left
<p><img alt="" class=small src=vertical-rtl.png>
<td>
<p>Text is written bottom to top and paragraphs grow to the right
<p><img alt="" class=small src=vertical-lr-rtl.png>
</table>
<p>There is no “horizontal-bt.” More information about ‘<a
href="#writing-mode"><code class=property>writing-mode</code></a>’ and
‘<a href="#direction"><code class=property>direction</code></a>’ can
be found in <a href="#CSS3-WRITING-MODES"
rel=biblioentry>[CSS3-WRITING-MODES]<!--{{!CSS3-WRITING-MODES}}--></a>.
</div>
<p class=mtb>Calculations of the size and position of boxes are usually
very similar for horizontal and vertical boxes, except that the horizontal
and vertical directions are interchanged. To avoid many almost identical
definitions, this specification therefore often uses abstract terms
instead of top, right, bottom, left, width and height: four terms (head
edge, foot edge, start edge and end edge) for the four edges of a box,
four terms (A edge, B edge, C edge and D edge) for the edges of the
children of a box and two terms (block dimension and inline dimension) for
the width and height of a box.
<p class=issue>The names head and foot are under discussion. There is an
issue in <a href="#CSS3-WRITING-MODES"
rel=biblioentry>[CSS3-WRITING-MODES]<!--{{!CSS3-WRITING-MODES}}--></a>
that suggests some possible names: “head,” “before,”
“before-block,” “foot,” “tail,” “after” and
“after-block.”
<p>The <dfn id=head>head,</dfn> <dfn id=foot>foot,</dfn> <dfn
id=start>start</dfn> and <dfn id=end>end</dfn> edge of a box refer to the
top, right, bottom and left edges, depending on the ‘<a
href="#writing-mode"><code class=property>writing-mode</code></a>’ and
‘<a href="#direction"><code class=property>direction</code></a>’
properties of that box, as follows:
<table class=equiv-table>
<thead>
<tr>
<th rowspan=2>Value of<br>
‘<a href="#writing-mode"><code
class=property>writing-mode</code></a>’
<th rowspan=2>Value of<br>
‘<a href="#direction"><code class=property>direction</code></a>’
<th colspan=4>Meaning of…
<th rowspan=2>
<tr>
<th>“head”
<th>“end”
<th>“foot”
View remainder of file in raw view