css to achieve hidden element effect

display: none

1. DOM structure: The browser will not render display:none elements and does not occupy page space

2. Event monitoring: Unable to monitor events for elements

3. Inheritance: Will not be inherited by child elements (child elements set display: block will not be displayed)

4. Changes : Changing the attribute value will cause the page to be rearranged and redrawn

5. Transition: The transition effect cannot be set transition: display is invalid

(Video tutorial recommendation:css video tutorial)

visibility: hidden

1. It will not be rendered, but it will occupy the page space

2. Event monitoring cannot be set on the element

3. It can be inherited. If the sub-element is set to non-visibility:hidden, it can be displayed.

4. Changing the attribute will only cause the page to be rearranged.

5. Transition:visibility will be displayed immediately. hidden has a transition effect

opacity: 0

1. The element is hidden and will occupy the page space

2. Event monitoring can be set

3. It can be inherited. Setting the opacity of the sub-element can display it.

4. It will not redraw or rearrange.

5. Transition: opacity can realize the transition effect of showing and hiding.

6. Opacity will trigger hardware acceleration

Recommended tutorial:css quick start

The above is the detailed content of css to achieve hidden element effect. For more information, please follow other related articles on the PHP Chinese website!