How to control hiding and displaying in css display

The Display property of CSS is used to set the display mode of elements. You can use it to control aspects such as the visibility, layout, and size of elements, so it is very common in CSS applications.

CSS Display Settings

In CSS, the Display property can accept the following values:

• none
• inline
• block
• inline-block
• table
• table-cell
• table-row
• inline-table
• flex
• grid

It is worth noting that different elements support different Display attributes, which requires choosing the appropriate attribute value based on the actual situation.

CSS Display none

Use Display:none to completely hide an element. This means that the element does not take up any space on the page and does not impact other elements. This feature is very useful in web development where HTML elements need to be displayed or hidden dynamically.

CSS Display inline

Use Display:inline to display elements as inline elements, that is, they will be arranged on the same line like ordinary text. It ignores the width and height attributes of the element and displays them based only on the size of the content.

CSS Display block

Use Display:block to display elements as block-level elements, that is, they will occupy their own row on the page. This feature is very useful because it allows us to have a more specific layout of HTML elements.

CSS Display inline-block

Use Display:inline-block to display elements as both inline elements and block-level elements at the same time, that is, they will be arranged on the same line, but can be displayed like Block-level elements also set attributes such as size.

CSS Display table

Use Display:table to display elements as a table. This means that the element will contain the table header, table body and table footer, and can be set using the relevant properties of the table.

CSS Display table-cell

Use Display:table-cell to display an element as a table cell, that is, the element will become a cell in the table. It can be very useful as it automatically adjusts width and height between columns and rows.

CSS Display table-row

Use Display:table-row to display an element as a table row, that is, the element will become a row in the table. It's also very useful because it allows you to have a more specific layout of table rows.

CSS Display inline-table

Use Display:inline-table to display elements as both inline elements and tables. This allows us to create a table within an inline element.

CSS Display flex

Use Display:flex to make an element a flexible box. This means that elements within the container can be aligned, arranged, and added/removed as you wish.

CSS Display grid

Use Display:grid to make an element a grid container. This means you can divide the page into a grid and place elements in different sizes and positions, which is extremely useful.

CSS Display hides and shows elements

An important feature of CSS Display is that it can be used to hide or show HTML elements. Display: None is often used to hide and show elements.

When the following code takes effect, the element will be hidden:

display: none;

When you need to display the element, just set the Display attribute to the appropriate value, for example:

display: block;

This allows the element to be redisplayed.

Conclusion

The CSS Display property is very important in web development and can be used to control the layout, visibility, and size of elements to achieve complex page designs. Understanding the different Display values ​​and their use cases is an important step in mastering basic CSS skills.

The above is the detailed content of How to control hiding and displaying in css display. For more information, please follow other related articles on the PHP Chinese website!