Most people can easily confuse CSS attribute display with visibility, they seem to be no different, in fact, their differences are very large.
The visibility property is used to determine whether the element is displayed or hidden, represented by visibility= "Visible|hidden" (visible represents the display, and hidden represents hiding).
When the visibility is set to "hidden", the element is hidden, but it still occupies its original position. Cases:
<script language= "JavaScript" > Function togglevisibility (Me) {if (me.style.visibility== "hidden") { me.style.visibility= "visible"; else {me.style.visibility= "hidden"; } </script> <div onclick= "togglevisibility (This)" > the first line of text will trigger the "hidden" and "visible" properties, noting the change in the second row. </div> <div> because visibility retains the position of the element, the second row does not move up or down, although the first row is missing but the position is still there. </div>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Notice that when the element is hidden, no other events can be received, so in the first code, when it is set to "hidden", it is no longer able to receive the response to the event, so it is not possible to click the first text of the mouse to display it.
On the other hand, the display property is a little different. The Visibility property is a hidden element that retains the floating position of the element, and display is actually a floating feature that sets the element.
When display is set to block (blocks), all elements in the container will be treated as a separate block, just like the <div> element, it will be placed into the page at that point. (You can actually set the <span> display:block to work like <div>.)
Setting display to inline will make it behave as if it were an element inline---even if it is an ordinary block element such as <DIV>, it will be combined to image <span> output stream.
Look at the code and effect of my instance:
<script language= "JavaScript" > Function Toggledisplay (Me) {if (me.style.display== "block") {me.style.display= " inline "; Alert ("Text is now: ' inline '."); else {if (me.style.display== "inline") {me.style.display= "none"; Alert ("Text is now: ' None '.) Automatically re-display after 3 seconds. "); Window.settimeout ("bluetext.style.display= ' block ';", 3000, "JavaScript"); else {me.style.display= "block"; Alert ("Text is now: ' Block '."); Click to view the effect in the <span id= "Bluetext" onclick= toggledisplay (this) > Blue </span> text.}} </script> <div>. </div>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Finally, display is set: None, when the element is actually removed from the page, and the element underneath it is automatically filled in. (At this point the Display:none element is equivalent to disappearing, while the Visibility:hidden is only hidden, and the position is still there.) ）
Display properties are block, inline, none value, and use Visibility:hidden for debugging example:
<textarea id="runcode32213"><p>display properties are block, inline, none, and use Visibility:hidden, debugging </p> <p><span id= "Ospan" &G T This is a span</span> in a sentence.</p> <P> <input type=button value= "Inline" onclick= "Ospan.style" . display= ' inline ' "> <input type=button value=" block "onclick=" ospan.style.display= ' blocks ' "> <input type= Button value= "None" onclick= "ospan.style.display= ' None" "> <input type=button value=" Hidden "onclick=" ospan.style.visibility= ' hidden ' "><input type=button value=" Visible "onclick=" Visible ' "> </P> <UL> <LI> Sets the element to block, which wraps after the element. </LI> <LI> Setting the element to inline eliminates element wrapping. </LI> <LI> Sets the element to none, hiding the element content. </LI> </UL></textarea>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
At the same time, the difference between display:inline and float:left can be read in the article:
(display refers to the displayed state, inline means inline, is characterized by clinging to the previous inline element, usually the default inline element has Span,a,em,strong, etc.). Float, Float:left, is a floating form of block-level elements, and is a form of two states. ）
Http://www.andymao.com/andy/post/42.html
Http://bbs.blueidea.com/thread-2596793-1-1.html
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > < HTML xmlns= "http://www.w3.org/1999/xhtml" > <pead> <meta http-equiv= "Content-type" content=; charset=gb2312 "/> <title>float &inline</title> <style> *{text-align:center;padding:4px;} Div,p{text-align:left;} span{/*float:right;*/background: #f5f5f5 border-left:1px #eee solid;border-top:1px #eee solid;border-right:1px #ccc solid;border-bottom:1px #ccc Solid;} Ul#inline li{display:inline list-style:none;border-left:1px #ccc solid;width:300px; background: #f5f5f5; * float: left*/;} Ul#float li{float:left;display:inline list-style:none;border-left:1px #666 solid;width:300px; background: #f5f5f5;} </style> </pead> <body> <span >span is an inline/inline element, giving him a width assignment is ineffective. </span> <span >span is an inline/inline element, giving him a width assignment 100px+float:right; You can see the width. </span> <div> <p> This li is defined as an inline/inline, set width no effect </p> <ul id= "inline" > <li>test</li> <li>test</li> </ul> </div& Gt <div> <p> This li is defined as an inline/inline+float:left, setting width effect </p> <ul id= "float" > <li>test</li > <li>test</li> </ul> </div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Solve:
After looking up the CSS manual, we found that the hidden content is different, one is to retain the physical space of the object, one is not retained.
-------------------------------
Display:none
CSS1 hidden objects. Unlike the hidden value of the visibility property, it does not retain its physical space for the object being hidden
Visibility:hidden
Object is hidden, unlike the display property, which retains the physical space it occupies for hidden objects.
But because of the use of Visibility:hidden, the elongated content is actually the div containing the picture, and instead of display:none after the normal. Just have been suspected is the height of the problem, unexpectedly is so simple a little content, the result of so much time and energy, alas ...
