Home > Web Front-end > CSS Tutorial > The difference between display:none and visibility:hidden

The difference between display:none and visibility:hidden

王林
Release: 2020-07-23 17:36:04
forward
2881 people have browsed it

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!

Related labels:
source:juejin.im
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template