A comparison of several methods of CSS "hidden" elements

When it comes to CSS hidden elements, I think the first way that most of our partners will think about it is to set the display to none. This is the best known and most commonly used method. I'm sure there are a lot of people who think that using set visibility as hidden to hide elements is also a common method, and many people know the difference. In addition to these two methods, this article also summed up some of the less commonly used methods, compared to these several "hidden" elements of the difference and advantages and disadvantages, welcome to communicate!!

a brief introduction to several methodsFirst of all we have a few ways of hiding elements in the final analysis, some are well-known, and some are a skill. Display:noneSetting the display of an element to none is the most common method of hiding elements. Hide {display:none; When the element is set to Display:none, the element disappears completely on the page, and the space that the element originally occupies is occupied by other elements, meaning that it causes the browser to rearrange and redraw. Visibility:hiddenSetting the visibility of an element to hidden is also a common way of hiding elements, and display:none is that when the page disappears, the space occupied by the element remains, so it only causes the browser to redraw and not rearrange ... hidden{ Visibility:hidden} Visibility:hidden applies to scenes where elements are hidden and do not want the page layout to change opacity:0Opacity Properties I believe we all know that the transparency of the element, and the transparency of the element is set to 0, in the eyes of our users, the elements are also hidden, which is a way to hide elements. Transparent {opacity:0; What this method and Visibility:hidden have in common is that the elements still occupy space after the element is hidden, but we all know that after setting the transparency to 0, the element is invisible, and it still exists in the page. Set Height,width model property to 0This is my summary of a relatively exotic skills, simply put the elements of the margin,border,padding,height and width, and so on the impact of the element box model of the property set to 0, if the element has child elements or content, you should also set its overflow:     Hidden to hide its child elements, which is a Chine. hiddenbox {margin:0;     border:0;     padding:0;     height:0;     width:0; Overflow:hidden; This approach is neither practical nor likely to have some problems. But usually we use some of the page effects may be done in this way, such as jquery slideup animation, it is to set the elements of the Overflow:hidden, and then through the timer, constantly set the elements of the height,margin-top, The Margin-bottom,border-top,border-bottom,padding-top,padding-bottom is 0, which achieves the slideup effect. Event Response after element is hidden If the hidden elements are bound to some events, after we perform the relevant actions, will these events be answered and executed, and look at the following code: <style>     DIV {          W idth:100px;          height:100px;          background:red;  &NB Sp       margin:15px;          padding:10px;          bord er:5px Solid green;          display:inline-block;          overflow: hidden;     }    . none {Display:none;}    . hidden {visibility:hidden;}     Opacity0 {opacity:0}    . height0 {height:0;}   </style>     <div class= " None "></div> <div class=" hidden "></div> <div class=" opacity0 "></div> <div class= "Height0" >aa</div>     <script src= "/scripts/jquery-1.10.2.min.js" ></script> < Script>     $ (". None"). ON ("click", Function () {        Console.log ("none clicked");    })     $ (". Hidde N "). On (" click ", Function () {        Console.log (" Hidden clicked ");    })     $ ( ". Opacity0"). On ("click", Function () {        Console.log ("Opacity0 clicked");    }) &nbsp ;   $ (". Height0"). On ("click", Function () {        Console.log ("Height0 clicked");    } </script>   This code shows the methods of four hidden elements, and then binds their click events, after testing, the main conclusions are as follows:   1, Display:none: The element disappears completely, obviously does not trigger its Click event 2, Visibility:hidden: Unable to trigger its Click event, there is a saying is Display:none is invisible, and visibility:hidden is invisible, this argument is not accurate, After setting the element's visibility, the Click event cannot be triggered, which means that the element of this method disappears, but still occupies the page space. 3, opacity:0: Can trigger the Click event, the reason is also very simple, set the element transparency to 0, the element is only relative to the human eye does not exist, to the browser, it still exists, so can trigger click event 4, height:0: Set the height of the element to 0, and set the Overflow:hidden. Use this method to hide an element, and whether the event can be triggered depends on the specific situation. If the element is set border,padding property is not 0, it is obvious that the page can still see this element, the trigger element of the Click event completely no problem. If all properties are set to 0, it is clear that this element is equivalent to disappearing, that is, the Click event cannot be triggered。   But are these conclusions really accurate? We add this code in the above code:   1 $ (". None"). Click (); It turns out that triggering the Click event, which means that the element that is set to Display:none can be triggered by JS. So the real reason the front can't trigger the Click event is that the mouse doesn't really touch the elements that are set to be hidden!!! The influence of   CSS3 transition on these methods CSS3 provided transition greatly improved the writing of web animations, but not every CSS attribute can be animated by transition. We modify the code as follows: <style>     DIV {          width:100px;        &NB Sp height:100px;          background:red;          margin:15px;  &N Bsp       padding:10px;          border:5px solid green;          display:inline-block;          overflow:hidden;          Transi Tion:all linear 2s;      } </style>     <div class= "None" ></div> <div class= "hidden" ></ div> <div class= "opacity0" ></div> <div class= "height0" >aa</div>     <script src= "/scripts/jquery-1.10.2.min.js" ></script> <script> $ (". None"). On ("click", Function () {    Console.log ("none clicked");     $ (this). CSS ("display", "none");}) $ (". Hidden"). On ("click", Function () {    Console.log ("Hidden clicked");     $ (this). CSS (" Visibility "," hidden "); $ (". Opacity0"). On ("click", Function () {    Console.log ("Opacity0 clicked");     $ (this). CSS ("Opa City ", 0); $ (". Height0"). On ("click", Function () {    Console.log ("Height0 clicked");     $ (this). css ({&nbsp ;       "height": 0,    }); </script>   After testing, you can see: 1, Display:none: Completely unaffected by the transition property, the element immediately disappeared 2, Visibility:hidden: The time the element disappears is the same as the transition property setting, but no animation effects 3, opacity, and height can perform normal animation   Suppose we want to do a fade through the CSS3 animation effect, should be as follows:    .fadeout {visibility:visible; opacity:1; transition:all linear 2s;}  . fadeout:hover {visibility:hidden; opacity:0;}You should set both the visibility and opacity properties of the element.