{display: none; /* Does not occupy space, can not click */}
/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * /
{ visibility: hidden; /* Takes up space, can’t click */}
/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * /
{ position: absolute; top: -999em; /* Does not occupy space, can not click */}
/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * /
{ position: relative; top: -999em; /* Takes up space, can’t click */}
/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * /
{ position: absolute; visibility: hidden; /* Does not occupy space, can not click */}
/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * /
{ height: 0; overflow: hidden; /* Does not occupy space, can not click */}
/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * /
{ opacity: 0; filter:Alpha(opacity=0); /* To take up space, you can click */}
/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * /
{ position: absolute; opacity: 0; filter:Alpha(opacity=0); /* Does not take up space, you can click */}
}
{zoom: 0.001; -moz-transform: scale(0); -webkit-transform: scale(0); -o-transform: scale(0); transform: scale(0); /* IE6/IE7/IE9 does not occupy space, IE8/FireFox/Chrome/Opera occupies space. Can’t even click */}
/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * /
{ position: absolute; Zoom: 0.001; -moz-transform: scale(0); -webkit-transform: scale(0); -o-transform: scale(0); transform: scale(0); /* Does not occupy space, can not click */}
The most common ones are display: None and visibility:hidden
Dispaly: None After this property is set, all elements under the element are hidden and the space occupied by the element disappears.
Visibility: Hidden After setting the element, the element will be invisible but still occupy the space.
Display: None and visibility:hidden difference?
1. Visibility is inherited, and its child elements will inherit this property. If you set visibility:visible, the child element will be displayed
2. Visibility will not affect the calculation of the counter. Although it is hidden, the counter will continue to operate.
3. The transition of CSS3 supports the visibility attribute, but does not support display, because transition can be delayed. Therefore, using pure CSS with visibility to realize hover delay display effect can improve user experience
4. Display :none will cause reflow and redraw the visibility:hidden will cause redrawing expand tomorrow’s daily question: What is reflow? What is Repaint? What’s the difference?
What is reflow? What is Repaint? What’s the difference?