1. display:none hides, display:black displays;
2. visibility: hidden hides, visibility: visible displays;
3. opacity: 0 hides, opacity: 1 displays;
Differences:
1. Whether it occupies space
display:none does not take up space after being hidden. The element and all its descendant elements will be hidden and cannot be accessed using auxiliary devices such as screen readers; visibility: hidden means that the hidden element occupies the same space as when it is not hidden, which will affect the page layout
. ;
Opacity: 0 is to make the element transparent and hide the occupied space
2. Whether child elements inherit
display:none will not be inherited by child elements, the parent element will no longer exist, and the child elements will not be displayed.
visibility:hidden will be inherited by child elements, and child elements can be displayed by setting visibility:visible.
Opacity:0 will be inherited by child elements, but child elements cannot be redisplayed by setting opacity:0.
3. Event binding
The elements with display:none no longer exist on the page, so the events bound to them cannot be triggered.
visibility:hidden will not trigger the event bound to it.
The time bound to the opacity:0 element can be triggered.
4. Transition animation
transition is not valid for display.
transition is invalid for visibility.
transition is valid for opacity.
5. Will reflow and redrawing occur?
display: none will cause reflow and redraw,
visibility: hidden will only cause the page to be redrawn,
and opacity: 0 will only cause the page to be redrawn.
Other ways to hide elements:
Form elements with type="hidden".
Both width and height are explicitly set to 0.