What properties does display have?

Display attributes include block, inline, inline-block, none, flex, grid, etc. Detailed introduction: 1. block, use the block attribute value, the element will be displayed as a block-level element, the block-level element will occupy an exclusive line, and will automatically wrap before and after; 2. inline, use the inline attribute value, the element will be displayed as an inline element In the form of display, inline elements will not occupy a line alone, but will be displayed on a line with other inline elements; 3. inline-block, etc.

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

The display attribute is a commonly used attribute in CSS, which is used to control the display mode of elements. By using the display attribute, you can make elements appear on the page in different ways.

In CSS, the display attribute has multiple values. The following will introduce several commonly used display attributes and their attribute values.

1. block (block-level element): Using the block attribute value, the element will be displayed as a block-level element. Block-level elements will occupy their own line and will automatically wrap before and after. Common block-level elements include div, p, h1-h6, etc.

2. inline (inline element): Using the inline attribute value, the element will be displayed as an inline element. Inline elements do not occupy a line by themselves, but appear on a line with other inline elements. Common inline elements include span, a, em, etc.

3. inline-block (inline block-level element): Using the inline-block attribute value, the element will be displayed as an inline block-level element. Inline block-level elements do not occupy a line by themselves, but they can have a set width and height and can appear on the same line. Common inline block-level elements include input, button, etc.

4. none (hidden element): Using the none attribute value, the element will be hidden and will no longer occupy the space on the page. Hidden elements are not visible on the page and do not affect the layout of other elements. The display and hiding of elements can be controlled through JavaScript and other methods.

5. Flex (flexible layout): Using the flex attribute value, the elements will be laid out in the form of a flexible box model. Flexible layout enables flexible layout and allows you to easily adjust the size and position of elements. Common flexible layout attributes include flex-direction, flex-wrap, justify-content, etc.

6. grid (grid layout): Using the grid attribute value, the elements will be laid out in the form of grid layout. Grid layout provides a two-dimensional layout method that divides the page into rows and columns and allows elements to be positioned and aligned. Common grid layout attributes include grid-template-rows, grid-template-columns, grid-gap, etc.

In addition to the above commonly used display attribute values, there are also some other display attribute values, such as table (table element), table-cell (table cell element), etc. You can choose the appropriate one according to specific needs. Attribute value to control how the element is displayed.

To sum up, the display attribute is an important attribute in CSS that controls the display mode of elements. Commonly used display attribute values ​​include block, inline, inline-block, none, flex, grid, etc. By flexibly using these attribute values, you can achieve various layout effects and improve the readability and user experience of the page.

The above is the detailed content of What properties does display have?. For more information, please follow other related articles on the PHP Chinese website!