1. Classify according to block-level elements or inline elements
Block-level elements (block-level) and inline elements (inline-level, also called "inline" elements).
a. Block-level element (occupies one line)
Block-level element: Its most obvious feature is that it fills its parent horizontally by default The content area of the element, and there are no other elements on the left and right sides of it, that is, block-level elements occupy one line by default. Typical block-level elements are: , , ~
,
, etc.
b. Inline elements (can share a line with other elements)
Inline elements: Inline elements do not form a new content block, that is, within their There can be other elements on the left and right, such as , , , etc., which are typical inline-level elements. displayAttributeElements equal to "inline" are all inline elements. Almost all replaceable elements are inline elements, such as , , etc.
PS: (Block level and inline can be converted to each other): By setting the display attribute of CSS, inline elements can be turned into block level elements: display: block; You can also turn block-level elements into inline elements: display:inline.
##*The difference between block-level elements and inline elements:
1.Block-level elements will occupy an exclusive line, and its width will automatically fill the width of its parent element;Inline elements It will not occupy a single line. Adjacent in-line elements will be arranged in the same line. It will not wrap until it cannot fit in one line. Its width changes with the content of the element.
2 .Generally, block-level elements can be set with width, and height attributes, while inline elements with width and height set have no effect.
3. Block-level elements can be set with margin and padding. The horizontal padding-left of inline elements ,padding-right,margin-left,margin-right all produce margin effects, but padding-top in the vertical direction ,padding-bottom,margin-top,margin-bottom will not produce margin effect. (Effective in horizontal direction, invalid in vertical direction).
2. Classification according to replaceable and non-replaceable elements
Of course, in addition to block-level and inline elements, it can also be classified according to whether it is a replaceable element.
a. Replace element (this element can produce different display effects according to the change of a certain attribute)
Replace element: The browser will The tags and attributes of the element determine the specific display content of the element.
For example: the browser will read the image information and display it based on the value of the src attribute of the tag. , and if you view the (X)HTML code, you cannot see the actual content of the image; another example is to determine whether to display the input box or the radio button based on the type attribute of the tag wait.
##(X), ,
