How to show and hide in css

How to implement display and hiding in css: 1. Use the display attribute and the syntax "display:none|block;" to hide and display html elements; 2. Use the visibility attribute and the syntax "visibility:hidden|visible" to hide and display Display html elements.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

In the usual development process, we always encounter some text that is displayed or hidden in specific scenarios to achieve the effect we want. In the display and visibility syntax in CSS, they can both hide and display HTML. element. They may look the same, but they still have certain differences.

First let’s take a look at the display and visibility attributes

The display attribute sets the display mode of the element. The corresponding script feature is display, and the optional values ​​​​are none, block and inline, the description of each value is as follows:

• none: Hides the element and does not retain the space when the element is displayed.

• block: Display elements in block mode.

• inline: Display the element inline.

The visibility attribute sets whether to display the element. The corresponding script feature is visibility. The optional values ​​are inherit, hidden and visible. The description of each value is as follows:

• inherit: Inherit the visibility attribute setting of the parent element.

• hidden: Hides the element but retains the space it occupies.

• visible: Display element (default value).
  

Instructions for use:

display:none; hides the html element, to be precise, when browsing Eliminate this element from the browser so it does not take up screen space. If there are other elements below it, it will be moved up to this space area.

dispaly:block; Display the hidden html element. If another element occupies the space, it will move down and the space will be occupied by the original element again.

visibility:hidden;Hide the element, truly hidden, but it still occupies that space.

visibility:visible; Make the element visible.

A simple example is written below to see the effect:

The second row is still occupied after hiding it After hiding the fourth row, it does not occupy the original position.

【Recommended learning: css video tutorial】

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