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

This article mainly introduces how to use display:none and visibility:hidden in css. It is very detailed and has a certain reference value. Friends who are interested must finish it!

1. CSS element hiding

In CSS, there are many ways to make elements hidden (invisible to the naked eye on the screen), some occupy space, some do not take up space, some can respond to clicks, some cannot respond to clicks. Look at it one by one.

The code is as follows:

{display: none; / * does not occupy space and cannot be clicked * /}

/ * /

{visibility: hidden; / * occupies space, cannot click * /}

/ * /

{position: absolute; top:-999em; / * does not occupy space and cannot be clicked * /}

/ * /

{position: relative; top:-999em; / * occupies space and cannot be clicked * /}

/ * /

{position: absolute; visibility: hidden; / * does not occupy space and cannot be clicked * /}

/ * /

{height: 0; overflow: hidden; / * does not occupy space and cannot be clicked * /}

/ * /

{opacity: 0; filter:Alpha (opacity=0); / * occupy space, you can click * /}

/ * /

{position: absolute; opacity: 0; filter:Alpha (opacity=0); / * does not occupy space, you can click * /}

/ * /

{

Zoom: 0.001

-moz-transform: scale (0)

-webkit-transform: scale (0)

-o-transform: scale (0)

Transform: scale (0)

/ * IE6/IE7/IE9 does not occupy space, IE8/FireFox/Chrome/Opera occupies space. Can't click on * /

}

/ * /

{

Position: absolute

Zoom: 0.001

-moz-transform: scale (0)

-webkit-transform: scale (0)

-o-transform: scale (0)

Transform: scale (0)

/ * does not occupy space and cannot be clicked * /

}

II. Display:none and visibility:hidden

At present, there are three differences I know (welcome to add):

1. Space occupation

two。 Backflow and rendering

3. Plant connection

Display:none hiding produces reflow and repaint (reflow and redrawing), while visibility:hidden does not have this problem that affects front-end performance; the third point is estimated to be unknown to many peers, that is, the difference in "contiguity".

The so-called "connectedness" means that if an ancestral element encounters a certain scourge, its children and grandchildren will suffer without exception. Display:none is the obvious declaration of "contiguity": once the parent node element applies display:none, the parent node and its descendant node elements are not visible, and it doesn't matter how unyielding the descendant elements struggle.

In the actual web application, we often have to implement some hidden functions. Because of the characteristics of display:none and the potential driver of jQuery, we are quite familiar with the hidden feature of display:none. Therefore, over time, a relatively strong emotional understanding will be formed, and this understanding will inevitably be transferred to other similar performance attributes (eg. Visibility), plus some routine experience.

For example, in general, if we apply visibility:hidden to a parent element, its offspring will be completely invisible. As a result, we will have a similar cognitive transfer: no matter how unyielding the descendant elements under the visibility:hidden declaration struggle can not get rid of the fate of invisible obliteration. In fact, there is a hidden "failure" situation.

When to hide "invalidation"? Quite simply, if the descendant element applies visibility:visible, then the descendant element will appear like Liu Qian.

Visibility is such an attribute of funny.

Comparison and summary:

Display:none is a rather inhumane statement that all future generations are killed (connected), and there is no room for burial (no space), leading to an uproar (rendering and returning).

On the other hand, visibility:hidden has humanitarian care, although it has no choice but to kill the descendants, but the descendants can be avoided by certain means (pseudo-connection), and the whole body after death, the graveyard is complete (occupying space), and the domestic people are relatively indifferent (no rendering and returning).

The above is all the contents of the article "how to use display:none and visibility:hidden in css". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

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.