How to make an element of HTML hidden, we generally have three ways: Display:none, opacity:0, Visibility:hidden. But what is the difference between these three ways?

1. Display:none

When the element is hidden, the hidden elements do not occupy space , and the original HTML style is changed after hiding. Once the parent element has Display:none applied, the parent node and its descendant node elements are all invisible, and no matter how unyielding the descendants ' elements struggle.

2. Visibility:hidden

When the element is hidden, the hidden elements still occupy the original position and will not change the original HTML style when hidden. However, if the element's child elements use visibility:visible, the child elements will not be hidden.

3. opacity:0

When the element is hidden, the hidden elements still occupy the original position and will not change the original HTML style when hidden. However, the event that the hidden element corresponds to can still be triggered. The display property does not appear to be transitioning even if the transition,opacity attribute is added to the element with the transition.

How to make an element of HTML hidden, we generally have three ways: Display:none, opacity:0, Visibility:hidden. But what is the difference between these three ways?