“This is the fourth day of my participation in the Gengwen Challenge. For details, see” Gengwen Challenge “.

1. Visibility: hidden/visible and dispaly: none

Some people simply say display: none; And the visibility: hidden; The difference between these two properties is that the former does not take up space in the document when hidden. The latter takes up space in the document when hidden. Visibility: Hidden is not as easy as you think. Visibility is an attribute that you underestimate. We all know that visibility: hidden; Is inherited if the parent element is set to visibility: hidden; Then the subset elements will be invisible. However, if the subset element is set to visibility: visible; This is fundamentally different from display: NoneCopy the code
< ul > < li > you see me 1 < / li > < li class = "second - li" > you can't see me 2 < / li > < li > you see me 3 < / li > < li > you see me 4 < / li > < / ul > < style type = "text/CSS" > ul {  visibility: hidden; background: pink; } .second-li{ visibility: visible; } </style>Copy the code
The outer ul element is set to visibility: hidden but its child element is set to visibility: visibleCopy the code

2. The impact of display and visibility on the counter

display: none; It has an effect on the counter; If an element is hidden, the element does not participate in the counter calculation. Visibility: hidden; It has no effect on the counter. If an element is hidden, it still participates in the counter calculationCopy the code
Do not affect the counter 1 < ol > < li > < / li > < li class = "second - li" > does not affect the counter 2 < / li > < li > does not affect the counter 3 < / li > < li > does not affect the counter 4 < / li > < / ol > < ol > < li > affect counter 1 < / li > < span style =" box-sizing: border-box! Important; word-wrap: break-word! Important; "style =" box-sizing: border-box! Important; mistyrose; margin-top: 10px; } .second-li{ visibility: hidden; } .li-er{ display: none; } </style>Copy the code

3. The animation effects of display and Visibility are different

Display: None animations will not produce transition animations, even if you set the transition time. Visibility: The animation that hidden participates in will produce a transition effect; Css3 supports the transition property, visibility; Unfortunately, there is no support for display.Copy the code
3.1 Excessive animation effects caused by using display: None
The following code uses display: none; The animation is overdone but it's immediately visibleCopy the code
<div class="box"> <div class="son">.son{opacity: 0; transition: opacity 5s; display: none; } .box:hover .son{ display: block; opacity: 1; }Copy the code

3.2 Using visibility: excessive effects caused by hidde on the animation;
<div class="box"> <div class="son" style ="text/ CSS ">.son{opacity: 0; transition: opacity 5s; visibility: hidden; } .box:hover .son{ visibility: visible; opacity: 1; } </style>Copy the code

4. Whether there is reflux

Display: None is the element that disappears completely, does not occupy any space in the document stream, and is not parsed by the browser; Display: None Backflow occurs when switching. Visibility :hidden is an element that visually disappears and occupies a place in the document stream. The browser will parse the element. There is no refluxCopy the code