The size and position of an element are often impacted by its 包含块 . Most often, the containing block is the content area of an element's nearest block-level ancestor, but this is not always the case. In this article, we examine the factors that determine an element's containing block.
When a user agent (such as your browser) lays out a document, it generates a box for every element. Each box is divided into four areas:
Many developers believe that the containing block of an element is always the content area of its parent, but that isn't necessarily true. Let's investigate the factors that determine what an element's containing block is.
Before learning what determines the containing block of an element, it's useful to know why it matters in the first place.
The size and position of an element are often impacted by its containing block. Percentage values that are applied to the
width
,
height
,
padding
,
margin
, and offset properties of an absolutely positioned element (i.e., which has its
position
设为
absolute
or
fixed
) are computed from the element's containing block.
The process for identifying the containing block depends entirely on the value of the element's
position
特性：
position
特性为
static
,
relative
，或
sticky
, the containing block is formed by the edge of the
content box
of the nearest ancestor element that is either
a block container
(such as an inline-block, block, or list-item element) or
establishes a formatting context
(such as a table container, flex container, grid container, or the block container itself).
position
特性为
absolute
, the containing block is formed by the edge of the
padding box
of the nearest ancestor element that has a
position
value other than
static
(
fixed
,
absolute
,
relative
，或
sticky
).
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).
position
特性为
absolute
or
fixed
, the containing block may also be formed by the edge of the
padding box
of the nearest ancestor element that has the following:
transform
or
perspective
value other than
none
will-change
value of
transform
or
perspective
filter
value other than
none
或
will-change
value of
filter
(only works on Firefox).
contain
value of
paint
(e.g.
contain: paint;
)
注意：
The containing block in which the root element (
<html>
) resides is a rectangle called the
initial containing block
. It has the dimensions of the viewport (for continuous media) or the page area (for paged media).
As noted above, when certain properties are given a percentage value, the computed value depends on the element's containing block. The properties that work this way are box model properties and offset properties :
height
,
top
，和
bottom
properties compute percentage values from the
height
of the containing block.
width
,
left
,
right
,
padding
，和
margin
properties compute percentage values from the
width
of the containing block.
The HTML code for all our examples is:
<body>
<section>
<p>This is a paragraph!</p>
</section>
</body>
Only the CSS is altered in each instance below.
In this example, the paragraph is statically positioned, so its containing block is
<section>
because it's the nearest ancestor that is a block container.
<body>
<section>
<p>This is a paragraph!</p>
</section>
</body>
body {
background: beige;
}
section {
display: block;
width: 400px;
height: 160px;
background: lightgray;
}
p {
width: 50%; /* == 400px * .5 = 200px */
height: 25%; /* == 160px * .25 = 40px */
margin: 5%; /* == 400px * .05 = 20px */
padding: 5%; /* == 400px * .05 = 20px */
background: cyan;
}
In this example, the paragraph's containing block is the
<body>
element, because
<section>
is not a block container (because of
display: inline
) and doesn’t establish a formatting context.
<body>
<section>
<p>This is a paragraph!</p>
</section>
</body>
body {
background: beige;
}
section {
display: inline;
background: lightgray;
}
p {
width: 50%; /* == half the body's width */
height: 200px; /* Note: a percentage would be 0 */
background: cyan;
}
In this example, the paragraph's containing block is
<section>
because the latter's
position
is
absolute
. The paragraph's percentage values are affected by the
padding
of its containing block, though if the containing block's
box-sizing
value were
border-box
this would not be the case.
<body>
<section>
<p>This is a paragraph!</p>
</section>
</body>
body {
background: beige;
}
section {
position: absolute;
left: 30px;
top: 30px;
width: 400px;
height: 160px;
padding: 30px 20px;
background: lightgray;
}
p {
position: absolute;
width: 50%; /* == (400px + 20px + 20px) * .5 = 220px */
height: 25%; /* == (160px + 30px + 30px) * .25 = 55px */
margin: 5%; /* == (400px + 20px + 20px) * .05 = 22px */
padding: 5%; /* == (400px + 20px + 20px) * .05 = 22px */
background: cyan;
}
In this example, the paragraph's
position
is
fixed
, so its containing block is the initial containing block (on screens, the viewport). Thus, the paragraph's dimensions change based on the size of the browser window.
<body>
<section>
<p>This is a paragraph!</p>
</section>
</body>
body {
background: beige;
}
section {
width: 400px;
height: 480px;
margin: 30px;
padding: 15px;
background: lightgray;
}
p {
position: fixed;
width: 50%; /* == (50vw - (width of vertical scrollbar)) */
height: 50%; /* == (50vh - (height of horizontal scrollbar)) */
margin: 5%; /* == (5vw - (width of vertical scrollbar)) */
padding: 5%; /* == (5vw - (width of vertical scrollbar)) */
background: cyan;
}
In this example, the paragraph's
position
is
absolute
, so its containing block is
<section>
, which is the nearest ancestor with a
transform
property that isn't
none
.
<body>
<section>
<p>This is a paragraph!</p>
</section>
</body>
body {
background: beige;
}
section {
transform: rotate(0deg);
width: 400px;
height: 160px;
background: lightgray;
}
p {
position: absolute;
left: 80px;
top: 30px;
width: 50%; /* == 200px */
height: 25%; /* == 40px */
margin: 5%; /* == 20px */
padding: 5%; /* == 20px */
background: cyan;
}
all
property resets all CSS declarations to a given known state