As the name suggests, both display and visibility are to hide page elements. Let's see the difference between them. opacity, finally.

1, display: none

1. After setting the display:none attribute to the element, the element is hidden and the occupied space disappears.
i see:

    <div>
      <button>A Button</button>
      <button>B Button</button>
      <button>C Button</button>
    </div>

After adding the display:none attribute

    <div>
      <button>A Button</button>
      <button style="display: none">B Button</button>
      <button>C Button</button>
    </div>

It turns out that the space occupied by the "B button" has also disappeared.

2. After setting the display:none attribute to the parent element, the child attribute is also hidden.
Original appearance:

    <div>
      <button>A Button</button>
      <button>B Button</button>
      <button>C Button</button>
      <ol>
        <li>hello</li>
        <li>hello2</li>
      </ol>
    </div>

After adding display:none to the parent element, the child elements disappear

    <div>
      <button>A Button</button>
      <button>B Button</button>
      <button>C Button</button>
      <ol style="display: none">
        <li>hello</li>
        <li>hello2</li>
      </ol>
    </div>

Even if you add a block to a child element, it will not be displayed.

  <div>
     <button>A Button</button>
     <button>B Button</button>
     <button>C Button</button>
     <ol style="display: none">
       <li style="display: block">hello</li>
       <li>hello2</li>
     </ol>
   </div>

3. Because the element disappears after display:none, the count will be affected under the li tag. such as
Original code:

    <div>
      <button>A Button</button>
      <button>B Button</button>
      <button>C Button</button>
      <ol>
        <li>hello</li>
        <li>hello2</li>
        <li>hello3</li>
      </ol>
    </div>

Add hide to child elements:

  <div>
     <button>A Button</button>
     <button>B Button</button>
     <button>C Button</button>
     <ol>
       <li>hello</li>
       <li style="display: none">hello2</li>
       <li>hello3</li>
     </ol>
   </div>

Because the child elements are hidden, the following elements are automatically moved up.

2, visibility:hidden

1. After hiding the attribute with visibility, the element still occupies the original page space.

 <div>
   <button>A Button</button>
   <button style="visibility: hidden">B Button</button>
   <button>C Button</button>
 </div>

After hiding

2. The parent element affects the child element, and if the child element is set to display, the hidden attribute is eliminated.

<div>
      <button>A Button</button>
      <button>B Button</button>
      <button>C Button</button>
      <ol style="visibility: hidden">
        <li>hello</li>
        <li>hello2</li>
        <li>hello3</li>
      </ol>
    </div>

 <div>
   <button>A Button</button>
   <button>B Button</button>
   <button>C Button</button>
   <ol style="visibility: hidden">
     <li>hello</li>
     <li style="visibility: visible">hello2</li>
     <li>hello3</li>
   </ol>
 </div>

So, third, visibility It will not affect the calculation, but put on the invisibility cloak for those hidden elements, and will not affect other elements.

Last point:
First, understand the rendering process of the following browser:
1. Parse HTML and build DOM tree according to the document
2. Analyze CSS style sheet and build CSSOM(CSS Object Model)
3. Merge Dom and CSSOM to generate render tree; On the basis of the DOM tree, a REDOR tree is generated according to the attributes of the node (margin/padding/width/height), excluding the display:none and head nodes, but including the visibility: hidden node)
4. Calculate the layout and the position of each element according to the Render Tree, which is also called the reflow process of layout
5. Render according to Render Tree and call API of Native GUI of operating system to draw.

Secondly, understand two concepts, redrawing and reflow
1. Repaint: when some elements in Render Tree need to update attributes, but these attributes will only affect the appearance and style of the elements, not the layout.
2. Reflow: when some (or all) of the Render Tree needs to be rebuilt due to changes in the size, layout, hiding, etc. of the elements.

Because display:none will change the page layout, it will trigger reflow, while visibility:hidden does not affect the page layout. It only puts on "invisibility cloak" for elements, so it will only trigger repaint

Summary:

(display:none is abbreviated as display, and visibility:hidden is abbreviated as visibility)
1) The hiding of display will directly remove the elements and the occupied space will disappear; visibility on the contrary, it just puts a layer of "invisibility cloak" on the hidden elements, and the space occupied by them will not disappear.
2) When the parent element of display is set to hide, the child element will also be hidden, but if the child element is set to display, it will not work;
visibility the parent element is hidden, the child element is hidden, the parent element is hidden, and the child element is displayed, which will work.
3) Because display directly removes the elements, it will affect the count. For example, the li tag in the above example will automatically replace the hidden elements with the following elements. visibility will not affect the count because it is simply hidden.
4) Because display affects the page layout, reflow will be triggered, while visibility will only trigger repaint.

A thousand words make one sentence

display throws an element out of the interface, so the space will disappear, other elements will replace and trigger reflow (re layout). visibility only puts a "invisibility cloak" on the element, so its space is still there, will not affect the count, and will only trigger redrawing (the layout remains unchanged, but the "invisibility cloak" effect should be increased.)

Add: in fact, there is another method to hide elements, that is, opacity:0. This attribute is set to transparency. The value range is 0-1. Setting 0 is hidden, and 1 is fully displayed. This method is the same as the characteristics of visibility. In short, it is to wear invisibility cloak on elements.

Reference article:
Introduction to the rendering principle of browser: https://coolshell.cn/articles...