What are the attribute values ​​of display in html?

The display attribute values ​​in html include none, block, inline, inline-block, flex, grid, table, etc. Detailed introduction: 1. none, set the element not to be displayed, that is, hide the element. The hidden element does not occupy the page space and will not affect the page layout; 2. block, set the element to be displayed as a block-level element, block level The element will occupy its own line, and attributes such as width, height, margins, and padding can be set; 3. inline, etc.

The operating system for this tutorial: Windows 10 system, DELL G3 computer.

The display attribute in HTML is used to define how elements are displayed. The display attribute has multiple values. Commonly used attribute values ​​include:

1. `none`: Set the element not to be displayed, that is, hide the element. Hidden elements do not occupy page space and have no impact on page layout.

2. `block`: Set the element to be displayed as a block-level element. Block-level elements occupy their own line and can set attributes such as width, height, margins, and padding. Common block-level elements include div, p, h1, etc.

3. `inline`: Set the element to be displayed as an inline element. Inline elements do not occupy a line by themselves and can be displayed on the same line as other elements. Common inline elements include span, a, img, etc.

4. `inline-block`: Set the element to be displayed as an inline block-level element. Inline block-level elements can be displayed on a single line, and properties such as width, height, margins, and padding can be set. Common inline block-level elements include input, button, etc.

5. `flex`: Set the element to be displayed in a flexible box model. The flexible box model can implement flexible layout and set attributes such as the arrangement direction, alignment and arrangement order of elements. Common flex box model attributes include flex-direction, justify-content, align-items, etc.

6. `grid`: Set elements to be displayed in a grid layout model. The grid layout model can implement complex two-dimensional layouts, and can set attributes such as the position, size, and spacing of elements on rows and columns. Common grid layout properties include grid-template-rows, grid-template-columns, grid-gap, etc.

7. `table`: Set the element to be displayed in table layout. Table layout can implement a table-like structure and can set properties such as borders, spacing, and alignment of cells. Common table layout attributes include table-layout, border-collapse, text-align, etc.

In addition to the above common attribute values, there are also some other display attribute values, such as `inline-table`, `list-item`, `run-in`, etc., which can be customized according to specific needs. Choose to use. In practical applications, we can flexibly select different display attribute values ​​as needed to achieve different page layouts and display effects.

The above is the detailed content of What are the attribute values ​​of display in html?. For more information, please follow other related articles on the PHP Chinese website!