What is the difference between display and visibility?

One, space occupy

Display:none; is completely gone, not a placeholder in the document stream, and the browser will not parse the element

Visibility:hidden, which is visually disappearing, can be understood as the effect of a transparency of 0, which occupies a position in the document flow and the browser parses the element;

using Visibility:hidden is better than display:none performance, Display:none switch display visibility, the page produces reflux (when a part of the page needs to change size, layout, display hidden, etc. The page is rebuilt, and this is the reflow. All pages need to produce a reflow when they first load, while the visibility switch does not cause reflux when it is displayed.

Second, child element inheritance

Display:none will not be the quilt element inheritance, but the parent element is not, the child elements will not show, with, Mao's Ann attached ~ ~

Visibility:hidden the quilt element inheritance, you can set the child element visibility:visible to show the child elements

opacity:0 is also inherited by the quilt element, but cannot be re-displayed by setting the child element opacity:0

Third, event binding

the Display:none element is no longer in the page, so it must not trigger the event it is bound to;

events bound by the Visibility:hidden element cannot be triggered;

The event that is bound above the opacity:0 element can be triggered.

Four, transition animation

transition is certainly not valid for display;

transition for the visibility is also invalid;

transition is valid for opacity.

Note: To set a DOM element does not appear in the browser's viewable range:

Set the width height to 0, set the transparency to 0, set the Z-index position at-100.

What is the difference between display and visibility?