Understanding and mutual conversion of elements in HTML rows and block-level elements

Understanding and mutual conversion of elements in HTML rows and block-level elements

Block-level elements:Div, p (paragraph), form (form), ul (unordered list), li (list item), ol (ordered list), dl (definition list ), hr (horizontal split line), menu (menu list), table (table )...

　　Features:1. A block-level element occupies only one row, and its width automatically fills the width of its parent element.

2. You can set the width and height attributes. (Even if the width is set, only one row is exclusive unless the float attribute is used in special cases)

3. You can set the margin (outer margin) and padding (inner margin ).

Line element:Span, strong, em, br, img, input, label, select, testarea...

(Line elements, inline elements, embedded elements, and straight-forward elements refer to "inline elements ")

　　Features:1. An element in a row does not exclusive to a row. The elements in the adjacent row are arranged in the same row. The line breaks only when the row does not exist, its width varies with the content of the element (its width is extended by the content ).

2. Setting the width and height attributes is invalid.

3. the padding effects are generated for padding-left, padding-right, margin-left, and margin-right in the horizontal direction,

However, padding-top, padding-bottom, margin-top, and margin-bottom in the vertical direction will not produce any results.

 

Variable element:Determine whether the element is a block-level element or a Row Element Based on the context. It belongs to the preceding two element categories. Once the context relation determines its category, it complies with the rules and restrictions of block-level elements or intra-row elements.

 

CSS:Css can change the default layout of html and place block-level elements in the desired position.

The basic difference between block-level elements and intra-row elements is that block elements generally start from a new row. After css control is added, this attribute difference will not be different.

ToLine ElementAddDisplay: blockSuch an attribute allows the Row Element to have attributes starting from the new row each time.

ToBlock-level elementsAddDisplay: inlineThis attribute prevents block-level elements from attributes starting with a new row.

 

ToLine ElementAddDisplay: inline-blockAttribute, but you can set the width and height attributes.

(This article is for learning and communication only. If you have different opinions, you are welcome to leave your valuable comments ~)