Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "how to understand display:none and visibility:hidden in CSS". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Go deep into display:none

We all know that when an element is set to display:none, the element will not be displayed on the interface, and it does not take up layout space, but we can still manipulate it through JavaScript. But why is that?

This involves the rendering principle of the browser: the browser parses the HTML tag to generate DOM Tree, parses the CSS to generate CSSOM, then combines DOM Tree and CSSOM to generate Render Tree, and the elements correspond to 0 or more boxes in Render Tree, and then the browser layouts and renders the interface with the information of the box model. The element set to display:none does not generate the corresponding box model in Render Tree, so the subsequent layout and rendering work is naturally fine, and the DOM operation is OK.

But in addition to the above knowledge, there are eight points that we need to pay attention to.

1. Elements of the native default display:none

In fact, there are many native browser elements with display:none, such as link,script,style,dialog,input [type=hidden] and so on.

The hidden Boolean attribute is added to 2.HTML5 to allow developers to customize the concealment of elements.

/ * compatible with browsers that do not support hidden attributes natively * / [hidden] {display: none;} Hide and Seek: You can't see me!

3. The parent element is display:none, and the descendant element is doomed.

.hidden {display: none;} .visible {display: block;} * START * Icubm parent! Ichimm son! * END *

The browser is displayed directly as

* * START * END * *

4. Unable to get focus

Originally, there is no box, where does it attract the focus ^ _ ^ there is no way even through the tab key?

Hidden

5. Unable to respond to any event, whether it is capture, * target, or bubble phase

Since the element of display:none does not render on the interface at all, not even one pixel, it naturally cannot be clicked by the mouse, and the element cannot gain focus, so it cannot become the target of keyboard events. When the display of the parent element 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 phase, so the element of display:none cannot respond to the event.

6. Do not delay form form submission data

Although we cannot see the element of display:none, the value of the hidden input element is still submitted when the form is submitted.

Counter in 7.CSS ignores elements of display:none

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

The result is:

1. Son1 2. Son3

8.Transition is not interested in the changes in display.

For details, please refer to CSS Magic Hall: Transition is so much fun.

Reflow will be triggered when 9.display changes

Apart from display:none, we can see that display:block indicates that the element is in BFC, while display:inline means that the element is in IFC, which means that display is used to set the layout context to which the element belongs. Changing the display value indicates that the layout used by the element has changed, and it would be strange not to trigger reflow.

Go deep into visibility

Visibility has two different functions

Rows and columns used to hide the table

Used to hide elements without triggering the layout

4 valid valu

1.visible

There's nothing to say, just display it on the interface.

2.hidden

Make the element invisible in the meeting, but retain the position that the element originally occupied.

3.collapse

The effect is the same as display:none for table child elements (such as tr,tbody,col,colgroup) and the same as visibility:hidden for other elements. However, because the implementation of each browser is different, this value is generally not used.

4.inherit

Inherits the visibilityvalue of the parent element.

Compare display:none and visibility:hidden clearly

We have listed 8 points for display:none above, so we only need to list the visibility one by one against it, won't it be clear?

1. The parent element is visibility:hidden, while the child element can be set to visibility:visible and take effect

Div {border: solid 2px blue;}. Visible {visibility: visible;} .hidden {visibility: hidden;} Isimm Parent. I am Son.

Results:

two。 Like display:none, can't get focus.

3. Can respond to events during the bubbling phase

Because the child of an element set to visibility:hidden can be visibility:visible, it is possible that the hidden element is on the path where the event bubbles, so in the following code, when you move the mouse over .visible, .hidden displays in response to the hover event.

Div {border: solid 2px blue;} .visible {visibility: visible;} .hidden {visibility: hidden;} .hidden: hover {visibility: visible;} Illumination Parent. I am Son.

4. Like display:none, it does not hinder the submission of form forms.

Counter in 5.CSS will not ignore

6.Transition is effective for changes in visibility.

7.visibility changes do not trigger reflow

Because setting from visible to hidden does not change the properties related to the element layout, reflow is not triggered, but waits quietly with other rendering changes for the browser to redraw the interface regularly.

This is the end of the content of "how to understand display:none and visibility:hidden in CSS". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.