A
CSS
layout mode
, sometimes simply called
layout
, is an algorithm that determines the position and size of boxes based on the way they interact with their sibling and ancestor boxes. There are several of them:
-
Normal flow
— all elements are part of normal flow until you do something to take them out of it. Normal flow includes
block layout
, designed for laying out boxes such as paragraphs and
inline layout
, which lays out inline items such as text.
-
Table layout
, designed for laying out tables.
-
Float layout
, designed to cause an item to position itself left or right with the rest of the content in normal flow wrapping around it.
-
Positioned layout
, designed for positioning elements without much interaction with other elements.
-
Multi-column layout
, designed for laying content out in columns as in a newspaper.
-
Flexible box layout
, designed for laying out complex pages that can be resized smoothly.
-
Grid layout
, designed for laying out elements relative to a fixed grid.
注意：
并非所有
CSS properties
apply to all
layout modes
. Most of them apply to one or two of them and have no effect if they are set on an element participating in another layout mode.
另请参阅
-
CSS 关键概念：
CSS 句法
,
at-rule
,
comments
,
specificity
and
继承
,
the
box
,
layout modes
and
visual formatting models
,
and
margin collapsing
,
或
initial
,
computed
,
resolved
,
specified
,
used
,
and
actual
values.
Definitions of
value syntax
,
shorthand properties
and
replaced elements
.
