Table of contents
1. Element type
1. Block elements
(1) It appears in the form of an area block on the page. Each element usually occupies one or more entire lines, and attributes such as width, height, and alignment can be set for it.
(2) Common block elements: <p>, <div>, <ul>, <li>, <ol>, <h>
2. Inline elements
(1) Do not force other elements to be displayed on a new line. They do not occupy an independent area. They only rely on the font size and image size of their corresponding page elements to support the structure. It is not possible to set attributes such as width, height, and alignment. Commonly used Used to control the style of text in the page.
(2) Common inline elements include: <strong>, <b>, <em>, <i>, <a>, <span>, etc., among which <span> is the most typical inline element.
2. <span> tag
Like the <div> tag, <span> is also widely used in the html language as a container tag. span is an inline element, and span can only contain text and various inline tags.
The span tag is often used to define some special display text in web pages. It is used with the class attribute. It has no fixed format performance. Only when the style is applied, the corresponding element will produce visual changes.
3. Element Transformation
A web page is arranged in "boxes" composed of multiple block elements and corresponding elements of inline elements, but because of this, block elements and inline elements have different characteristics. eg: Features of block elements: properties such as width and height can be set. Features of inline elements: do not occupy a single line. If you want to make a block element have the characteristics of an inline element, or an inline element have the characteristics of a block element, this uses element transformation. Use the display attribute to transform elements
Common values and meanings of the display attribute are as follows:
inline: This element is displayed as an inline element (the default display attribute value of an inline element)
block: This element will be displayed as a block element (the default display attribute value of the block element)
inline-block: This element will be displayed as an inline block element, and properties such as width, height, and alignment can be set for it, but the element does not occupy a single line.
none: This element will be hidden, not displayed, and does not occupy page space, which means that the element does not exist