The difference between display:none and visibility:hidden

The differences are as follows:

(Recommended tutorial: css quick start)

Display: none elements do not occupy any space , visibility: hidden element space is retained;

display: none will affect the transition effect of css3, visibility: hidden will not;

display: none hidden will produce redraw (repaint) and reflow (relfow), visibility: hidden will only trigger redrawing;

Involvement: nodes and descendant node elements of display: none are all invisible, descendant node elements of visibility: hidden nodes can be displayed with visibility: visible . The visibility: hidden attribute value is inheritable, so the descendant elements inherit hidden and are hidden by default, but when the descendant elements are reset to visibility: visible, they will not be hidden.

The above is the detailed content of The difference between display:none and visibility:hidden. For more information, please follow other related articles on the PHP Chinese website!