1. Document flow
Document flow: Divide the form into lines from top to bottom, and arrange elements in each line from left to right, which is the document flow. That is to say, from beginning to end (top-to-bottom, left-to-right) ), in the order of the document, to place the elements.
Each non-floating block-level element has its own line, and floated elements float at one end of the line as required. If the current line does not fit, a new line will be created and then floated. Inline elements will not have a line of their own. Almost all elements (including block-level, inline and list elements) can generate child lines for placing child 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. Floating elements do not occupy any normal document flow space, and the positioning of floating elements is based on the normal document flow, and then extracted from the document flow and moved to the left or right as far as possible. The text content wraps around the floated element. When an element is pulled out of the normal document flow, other elements still in the document flow ignore the element and fill its original space. The source of confusion about the float concept is the browser's interpretation of the theory.
Based on the document flow, we can easily understand the following positioning patterns:
Relative positioning, that is, offset relative to the position of the element in the document flow. But retain the original placeholder.
Absolute positioning, that is, completely out of the flow of the document, offset relative to the nearest parent element whose position attribute is not static
Fixed positioning, i.e. completely out of the flow of the document, offset relative to the viewport.
2. Inline elements and block-level elements.
The CSS Definitive Guide says: Any visible element that is not a block-level element is an inline element. The characteristic of its performance is the "line layout" form, and the "line layout" here means that its performance form is always displayed in lines. For example, when we set an inline element border-bottom:1px solid #000; its behavior is to repeat each line, and there will be a thin black line below each line. If it is a block-level element then the black line displayed will only appear below the block. Elements such as p, h1, or div are often called block-level elements, and these elements are displayed as a piece of content; elements such as Strong, span, etc., are called inline elements, and their content is displayed in the line, that is, "inline box". (Inline elements can be converted to block elements using display=block, and display=none means the resulting element has no box at all, neither displays the element nor takes up space in the document)
A: Inline is an element within a line and can only be placed in the line; a block-level element is a square, which can be placed anywhere on the page.
B: To put it bluntly, an inline element is like a word; a block-level element is like a paragraph, which will appear on its own line unless otherwise defined.
C: General block level elements such as paragraph <p>, heading <h1><h2>..., list, <ul><ol><li>, table <table>, form <form>, DIV<div> and BODY <body> and other elements. And inline elements such as: form element <input>, hyperlink <a>, image <img>, <span>
D: The salient feature of block-level elementless is that each block-level element is displayed from a new line, and the subsequent elements also need to be displayed on another line.
E: <span> is an inline element in the CSS definition, while <div> is a block-level element.
Using the word container will make it easier to visually understand their existence and purpose. Inline elements are equivalent to a small container, and <div> is equivalent to a large container. Of course, a large container can contain a small container. <span> is a small container, so you may have a preliminary impression in your mind, if we want to put some water in a large container. But what if I also want to put some ink in it? It's very simple, we take out the small container, put ink in it and put it into the clean water in the large container, right? for example
<div>abcdefg</div> uses CSS to style the letter c, so we can use <span>.
<div>ab<span>c</span>defg</div>
Block elements are generally container elements for other elements. Block elements generally start from a new line. They can accommodate inline elements and other block elements. Common block elements are paragraph tags 'P'. "form" This block element compares Special, it can only be used to hold other block elements.
Without the effect of CSS, the block elements will go down in order one line at a time. With CSS, we can change the default layout mode of this html and place block elements where you want. Instead of stupidly starting a new line every time. It should be pointed out that the table tag is also a type of block element. Table based layout and css based layout view these two layouts from the perspective of general users (excluding visually impaired, blind, etc.), except for the page loading speed. Apart from the difference, there is no other difference. However, if ordinary users inadvertently click the button to view the source code of the page, the difference between the two will be very large. The CSS layout page source code designed based on the good refactoring concept can at least allow ordinary users without web development experience to quickly read the content. From this point of view, css layout code should have a better aesthetic experience.
Inline elements are generally based on semantic-level basic elements. Inline elements can only hold text or other inline elements, the common inline element "a".
Both block elements and inline elements are concepts in the html specification. The basic difference between block elements and inline elements is that block elements generally start on a new line. And when css control is added, this property difference between block elements and inline elements is no longer a difference. For example, we can add an attribute such as display:block to the inline element cite, so that it also has the attribute of starting from a new line every time.
The basic concept of a mutable element is that it needs to determine whether the element is a block element or an inline element according to the context. Variable elements still belong to the above two element categories. Once the context determines his category, he must follow the rules and restrictions of block elements or inline elements. See the full text for a general classification of elements.