Analysis of the difference between display:none and visibility:hidden in css

The content of this article is about the analysis of the difference between display:none and visibility:hidden in CSS. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Do you still remember being asked during the interview, "Please tell me the difference between display:none and visibility:hidden"? Will the interviewer smile after answering that display:none does not occupy the original position and visibility:hidden retains the original position? It’s actually more than that! In this article, we will delve into their grievances and resentments together, so that we can give better answers in the next interview!

In-depth display:none

We all know that when an element is set to display:none, the element will not be displayed on the interface, and the element will not occupy the layout space. But we can still manipulate the element through JavaScript. But why is this so?
This involves the rendering principle of the browser: the browser will parse HTML tags to generate DOM Tree, parses CSS to generate CSSOM, then synthesizes DOM Tree and CSSOM to generate Render Tree, elements in Render Tree corresponds to 0 or more boxes, and then the browser layouts and renders the interface with the information of the box model. Elements set to display:none do not generate corresponding box models in the Render Tree, so subsequent layout and rendering work naturally has nothing to do with it. As for DOM operations, it is still possible.
But in addition to the above knowledge points, there are also the following 8 points that we need to pay attention to
1. Elements with native default display:none
In fact, many native browser elements have display:none Elements, such as link, script, style, dialog, input [type=hidden], etc.

2. The hidden Boolean attribute is added to HTML5, allowing developers to customize the hiddenness of elements

/* 兼容原生不支持hidden属性的浏览器  */
[hidden]{
  display: none;
}
<span>Hide and Seek: You can't see me!</span>

3. The parent element is display:none, and the descendant elements cannot escape

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

*** START ***
<div>
  I'm parent!
  <div> I'm son! </div>
</div>
*** END ***

The browser directly displays it as

*** START ***
*** END ***

4. Unable to obtain focus
There is no box originally. Where is the focus? ^_^ Even through the tab key, there is no way

<!-- 真心不会获得焦点 -->
<input>
<div>hidden</div>

5. Unable to respond to any event, whether it is capturing, hitting the target, or bubbling stage
Due to display:none The element will not be rendered on the interface at all, it does not even occupy 1 pixel, so naturally it cannot be hit by mouse click, and the element cannot obtain focus, so it cannot be the target of keyboard events; and the display of the parent element When it is none, the display of the child element must be none, so the element has no chance to be on the path of the event capture or bubbling stage, so the element with display:none cannot respond to the event.

6. Do not delay form form submission data
Although we cannot see the display:none element, the value of the hidden input element will still be submitted when the form is submitted.

7. The counter in CSS will ignore the elements of display:none

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

<div>
  <div>son1</div>
  <div>son2</div>
  <div>son3</div>
</div>

The result is:

1. son1
2. son3

8.Transition changes to display Don’t catch a cold

9. Reflow will be triggered when display changes
Leaving aside display:none, let’s see that display:block means that the element is located in BFC, while display:inline means that the element is located in IFC. In other words, the purpose of display is to set the layout context to which the element belongs. If the display value is modified, it means that the layout method adopted by the element has changed. It would be strange if reflow is not triggered!

In-depth visibility

Visibility has two different functions

It is used to hide the rows and columns of the table

It is used without triggering layout Hidden element

4 valid values

1.visible
There is nothing to say, it is just displayed on the interface.
2.hidden
Make the element invisible on the screen, but retain the original position of the element.
3.collapse
When used on table sub-elements (such as tr, tbody, col, colgroup), the effect is the same as display:none. When used on other elements, the effect is the same as visibility:hidden. However, since the implementation effects of each browser are different, this value is generally not used.
4.inherit
Inherit the visibility value of the parent element.

Clearly compare display:none and visibility:hidden

We have listed 8 points for attention on display:none above, so we only need to compare it and list the visibility one by one, and it will be clearly visible. Yet?
1. The parent element is visibility:hidden, and the child element can be set to visibility:visible and it will take effect

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

Result:

2. Can't get focus like display:none

3. Can respond to events in the bubbling stage
Since the child elements of an element set to visibility:hidden can be visibility:visible, it is hidden The element may be located on the path of the event bubbling. Therefore, in the following code, when the mouse is moved to .visible, .hidden will be displayed in response to the hover event.

div{
  border: solid 2px blue;
}
.visible{
  visibility: visible;
}
.hidden{
  visibility: hidden;
}
.hidden:hover{
  visibility: visible;
}
<div class="hidden">
  I&#39;m Parent.
  <div class="visible">
    I&#39;m Son.
  </div>
</div>

4. Like display:none, it does not prevent form submission

5.The counter in CSS will not be ignored

6.Transition is effective for changes in visibility

7. Visibility changes will not trigger reflow
Since the attributes related to the element layout will not be changed when it is set from visible to hidden, reflow will not be triggered, and it will just quietly wait for browsing with other rendering changes. The controller redraws the interface regularly.

The above is the detailed content of Analysis of the difference between display:none and visibility:hidden in css. For more information, please follow other related articles on the PHP Chinese website!