Home > Article > Web Front-end > 【CSS3】-block-level elements, inline elements_html/css_WEB-ITnose
【CSS3】-block-level elements, inline elements_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:44:461122browse
Document flow
Divide the form into rows from top to bottom, and arrange the elements in each row in order from left to right, which is document flow.
Each non-floating block-level element occupies its own line, and floating elements float at one end of the line as required. If the current row cannot accommodate it, a new row will be created and then floated.
Inline elements will not occupy a line of their own. Almost all elements (including block-level, inline and list elements) can generate sub-rows for placing sub-elements.
There are three situations that will cause elements to exist out of the document flow, namely floating, absolute positioning, and fixed positioning. But in IE, floating elements also exist in the document flow (which makes me think this is reasonable><).
Floating elements do not occupy any normal document flow space, and the positioning of floating elements is still based on the normal document flow, and then extracted from the document flow and moved as far as possible to the left or right. The text content will be wrapped around the floated element. When an element is extracted from the normal document flow, other elements still in the document flow ignore the element and fill its original space.
The concept of floating is confusing because of the browser’s interpretation of the theory. It can only be said that many people use IE as the standard, but in fact it is not.
Based on the document flow, we can easily understand the following positioning modes:
Relative positioning, that is, offset relative to the position of the element in the document flow. But keep the original place.
Absolute positioning, that is, completely out of the document flow, offset relative to the nearest parent element with a non-static value for the position attribute.
Fixed positioning, that is, completely out of the document flow and offset relative to the viewport.
A few questions
"CSS Definitive Guide" Chinese text shows: Any visible element that is not a block-level element is an inline element. The characteristic of its performance is the form of "row layout". The "row layout" here means that its form of expression is always displayed in rows. For example, when we set an inline element border-bottom:1px solid #000;, it will be repeated in each line, and there will be a thin black line below each line. If it is a block-level element, the black line displayed will only appear below the block.
Elements such as p, h1, or div are often called block-level elements. These elements are displayed as a piece of content; Strong. Elements such as span are called inline elements, and their content is displayed in the line, that is, "inline box". (You can use display=block to convert inline elements into block elements. display=none means that the generated element has no frame at all, neither displays the element nor takes up space in the document)
, title
..., list. - , table
, form
- , table
, form