CSS element hiding principle and display:none and visibility:hidden
|
1. CSS element hiding <br />In CSS, there are many ways to hide elements (meaning making them invisible to the naked eye within the screen range). Some of them occupy space, while others do not; some can respond to clicks, while others cannot. Look at them one by one. Copy code The code is as follows:{ display: none; /* Does not take up space, cannot be clicked*/ } /************************************************************************************/ { visibility: hidden; /* takes up space, can't be clicked */ } /************************************************************************************/ { position: absolute; top: -999em; /* Does not take up space, cannot be clicked*/ } /************************************************************************************/ { position: relative; top: -999em; /* takes up space, cannot be clicked*/ } /************************************************************************************/ { position: absolute; visibility: hidden; /* Does not take up space, cannot be clicked*/ } /************************************************************************************/ { height: 0; overflow: hidden; /* Does not take up space, cannot be clicked */ } /************************************************************************************/ { opacity: 0; filter:Alpha(opacity=0); /* Occupies space, can be clicked */ } /************************************************************************************/ { position: absolute; opacity: 0; filter:Alpha(opacity=0); /* Does not take up space, can be clicked*/ } /************************************************************************************/ { zoom: 0.001; -moz-transform: scale(0); -webkit-transform: scale(0); -o-transform: scale(0); transform: scale(0); /* IE6/IE7/IE9 do not occupy space, IE8/FireFox/Chrome/Opera do. Can't click*/ } /************************************************************************************/ { position: absolute; zoom: 0.001; -moz-transform: scale(0); -webkit-transform: scale(0); -o-transform: scale(0); transform: scale(0); /* Does not take up space and cannot be clicked*/ } 2. display:none and visibility:hidden At present, I know of three differences (welcome to add): 1. Space Occupancy 2. Reflow and rendering 3. Involvement Hiding with display:none causes reflow and repaint, while visibility:hidden does not have this problem that affects front-end performance. The third point is probably unknown to many colleagues, which is the difference in "association". The so-called "collective punishment" means that if an ancestor encounters a disaster, all of his descendants will suffer without exception. display:none is an obvious statement of “chain responsibility”: once display:none is applied to a parent element, the parent and its descendant elements will all become invisible, and no matter how hard their descendant elements struggle, it will be of no avail. In actual web applications, we often need to implement some display and hiding functions. Due to the characteristics of display:none itself and the potential driver of jQuery, we are quite familiar with the hiding feature of display:none. Therefore, over time, a relatively solid emotional understanding will be formed, and this understanding will inevitably be transferred to the understanding of other similar performance attributes (eg. visibility), plus some conventional experience... For example, normally, if we apply visibility:hidden to a parent element, all its descendants will also be invisible. Therefore, we will have a similar understanding shift: no matter how hard the descendant elements with visibility:hidden declaration struggle, they cannot escape the fate of being invisible and obliterated. In reality, however, there are hidden “failures”. When to hide "expiration"? It's very simple. If visibility:visible is applied to a descendant element, then the descendant element will appear like Liu Qian.  Visibility is such a funny attribute. Comparison summary : display:none is a rather inhumane statement, as all future generations will be killed (collective punishment), and not even a place to bury them will be left (no space left), causing an uproar among the public (exaggeration and backflow). visibility:hidden shows humanitarian concern. Although the descendants have to be killed, they can avoid it through certain means (pseudo-incrimination). Moreover, the body will be intact after death and the cemetery will be complete (occupying space). The domestic people are relatively indifferent (no exaggeration and reflux). |
<<: Advanced explanation of javascript functions
>>: Deep understanding of the mechanism of CSS background-blend-mode
Recommend
Rendering Function & JSX Details
Table of contents 1. Basics 2. Nodes, trees, and ...
Detailed explanation of TS object spread operator and rest operator
Table of contents Overview Object rest attribute ...
Full steps to create a high-performance index in MySQL
Table of contents 1. Index Basics 1. Types of Ind...
Analyze the working principle of Tomcat
SpringBoot is like a giant python, slowly winding...
Example of troubleshooting method to solve Nginx port conflict
Problem Description A Spring + Angular project wi...
UDP connection object principle analysis and usage examples
I wrote a simple UDP server and client example be...
JavaScript closure details
Table of contents 1. What is a closure? 2. The ro...
JavaScript implements double-ended queue
This article example shares the specific code of ...
How to install Nginx in CentOS7 and configure automatic startup
1. Download the installation package from the off...
CSS animation property usage and example code (transition/transform/animation)
During development, a good user interface will al...
Do not start CSS pseudo-class names with numbers
When newbies develop div+css, they need to name t...
Detailed analysis of the principles and usage of MySQL views
Preface: In MySQL, views are probably one of the ...
MySQL database basic syntax and operation
MySQL database basic syntax DDL Operations Create...
Vue implements countdown function
This article example shares the specific code of ...
Introduction to the functions and usage of value and name attributes in Html
1. The value used in the button refers to the text...