preface

Remember being asked in a job interview, “Please tell me the difference between display: None and visibility:hidden”? Display: None will not occupy the original location, and use the visibility:hidden to leave the original location. It’s not that simple! In this article, we’ll delve into their feud so that we can answer them better in our next interview.

in-depthdisplay:none

We all know that when the element is set to display: None, it won’t show up and doesn’t take up layout space, but we can still manipulate it with JavaScript. But why is this so? This relates to how browsers render: The browser will parse HTML tags to generate a DOM Tree, parse CSS to generate A CSSOM, and then synthesize the DOM Tree and CSSOM to generate a Render Tree. The elements correspond to 0 or more boxes in the Render Tree. Then the browser will layout and Render the interface with the information of the box model. An element set to display: None does not generate a box model in the Render Tree, so the layout, rendering and DOM manipulation are fine. There are a number of native display: None elements that come with browser native elements. Such as the link, script, style, dialog, input [type = hidden], etc.

2. New Boolean attribute for HIDDEN in HTML5, allowing developers to customize the hidden nature of elements

/* Compatible with native browsers that do not support hidden properties */ [hidden]{display: none; } <span hidden>Hide and Seek: You can't see me! Copy the code

3. The parent element is display: None, and the descendant element is also destroyed

.hidden{
  display: none;
}
.visible{
  display: block;
}

*** START ***
<div class="hidden">
  I'm parent! 
      

        I'
      
m son! </div>
</div>
*** END ***
Copy the code

The browser displays as

*** START ***
*** END ***
Copy the code

4. Can’t get the focus originally have no box, where to provoke the focus even through the TAB key is also unable to

<! -- Sincerity will not get focus --> <inputtype="hidden">
<div tabindex="1" style="display:none">hidden</div>
Copy the code

5. Unable to respond to any event, whether it is captured, from hitting their targets and bubbling phase are not due to display: none of the elements do not apply colours to a drawing on the interface, is don’t even make one pixel, so the natural cannot be made through the mouse to click, and element also can’t get focus, so also can’t become a keyboard events, from hitting their targets; If the parent element’s display is None, the child element’s display must be None, so the element has no chance to be on the path path of the event capture or bubble phase, so the display: None element cannot respond to events.

We can’t see the display: None element, but the hidden input element value is still submitted when the form is submitted.

<form>
  <input type="hidden" name="id">
  <input type="text" name="gguid" style="display:none">
</form>
Copy the code

7.CSS counter ignores display: None

.start{
  counter-reset: son 0;
}
.son{
  counter-increment: son 1;
}
.son::before{
  content: counter(son) ".";
}

<div class="start">
  <div class="son">son1</div>
  <div class="son" style="display:none">son2</div>
  <div class="son">son3</div>
</div>
Copy the code

The result:

1. son1
2. son3
Copy the code

Transition is just a fun Transition

Display :none. Display :block indicates that the element is in the BFC. Display :inline indicates that the element is in the IFC. Display is used to set the layout context of the element. If you change the display value, the layout of the element has changed. Reflow is not triggered.

in-depthvisibility

Visibility serves two different purposes

  1. Use to hide rows and columns of the table
  2. Use to hide elements without triggering the layout

Four valid values

1. There’s nothing to say about visible, just showing it on the interface. 2. Hidden makes the element invisible from view, but retains the element’s original position. 3. Collapse has the same effect as display: None when used on table child elements (tr,tbody, COL,colgroup) and visibility:hidden when used on other elements. However, this value is generally not used because of differences in implementation between browsers. 4. Inherit the visibility value of the parent element.

Contrast clearlydisplay:noneandvisibility:hidden

We have listed 8 points for display: None, so we only need to list visibility against it one by one. 1. The parent element is visibility:hidden, and the child element can be set to visibility: Visible, with effect

div{
  border: solid 2px blue;
}
.visible{
  visibility: visible;
}
.hidden{
  visibility: hidden;
}
<div class="hidden">
  I'm Parent. 
      

        I'
      
m Son.
  </div>
</div>
Copy the code

Results:

2. Can’t get focus like display: None

Since the child of an element set to Visibility :hidden can be visibility:visible, the hidden element may be in the path of the event bubble, so in the following code, hover the mouse over.visible. .Hidden responds to the hover event display.

div{
  border: solid 2px blue;
}
.visible{
  visibility: visible;
}
.hidden{
  visibility: hidden;
}
.hidden:hover{
  visibility: visible;
}
<div class="hidden">
  I'm Parent. 
      

        I'
      
m Son.
  </div>
</div>
Copy the code

4. The same as display: None does not prevent form submission

5. Counters in CSS are not ignored

6.Transition is effective for the change of visibility

Since changing visibility from Visible to Hidden does not change the attributes associated with the element’s layout, reflow will not be triggered and will just wait for the browser to periodically redraw the interface along with other rendering changes.

conclusion

Now we have a better understanding of display: None and visibility:hidden, and our answers will be more colorful in our next interview. Respect the original, reproduced please note from: www.cnblogs.com/fsjohnhuang… The fat boy John ^_^

reference

Css-tricks.com/almanac/pro… Juejin. Cn/post / 684490…