display:none; With the visibility: hidden;

display

The display attribute sets the internal and external display types of an element. The outer display types of an element will determine how that element will behave in a streaming layout (block level or inline elements the inner display types of elements can control the layout of their children (e.g. Flow Layout, Grid, or Flex) setting display to None removes elements from the accessibility tree. This causes the element and all its descendants to no longer be accessed by screen Reading Technology

<div>
        <strong>Give the element the display: None style</strong>
        <p>A</p>
        <p style='display:none; '>B</p>
        <p>C</p>
</div>
Copy the code

visibility

The CSS property Visibility displays or hides elements without changing the layout of the document. This property can also hide rows or columns in a table element. visibility:hidden; Hide an element, but the layout of other elements does not change, which is equivalent to making this element transparent.

<div>
        <strong>Set the visibility:hidden for the element; style</strong>
        <p>A</p>
        <p style='visibility:hidden; '>B</p>
        <p>C</p>
</div>
Copy the code

The difference between

1, visibility has inheritance, set the parent element to visibility:hidden; Child elements also inherit this attribute. But if you redefine the child element to visibility: visible, the child element will be visible again. 2, visibility: hidden; Undefined: hidden; undefined: hidden; An element is missing, but its counter is still running. This and display: none; 3. CSS3 transition supports the visibility property, but does not support display. Since transition can be delayed, it can use pure CSS with visibility to realize hover delay display effect. Improve the user experience. (The reason is that transparency is a number, and numbers are variable)

With display: none; related

Select an element in the CSS, set the background image, but set the element display: None; Has the browser made a resource request for this image? What if you set display: None: to the parent of the element?