Most people can easily confuse CSS property display with visibility, they seem to be no different, in fact, their differences are very large.
The visibility property is used to determine whether an element is displayed or hidden, which is represented by the visibility= "Visible|hidden" (visible indicates display, hidden indicates hidden).
When visibility is set to "hidden", the element is hidden, but it still occupies its original position. Cases:
The <textarea id="runcode7764">first line of text will trigger the "hidden" and "visible" properties, noting the change in the second line. Because visibility retains the position of the element, the first line is not visible but the position is still, and the second row does not move up or down. </textarea>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
Notice that when the element is hidden, it is no longer possible to receive other events, so in the first code, when it is set to "hidden", it can no longer receive the response to the event, so it is not possible to click the first paragraph of the mouse to display the text.
On the other hand, the display property is a little different. The Visibility property is a hidden element but maintains the floating position of the element, and display is actually a floating feature of the set element.
When display is set to block, all elements in the container will be treated as a separate block, just like an element, which is placed on the page at that point. (You can actually set Display:block, so that it can work like the same.
Setting display to inline will make its behavior as inline as the element---even if it is an ordinary block element, it will also be combined to be imagedSuch an output stream.
Here's a look at the code and effects of my example:
<textarea id="runcode99478">in <span id= "Bluetext" onclick= "Toggledisplay (This)" style= "Color:blue;position:relative;cursor:hand;" > Blue </span> Text Click to see the effect. </textarea>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
Finally, display is set: None, when the element is actually removed from the page, and the element underneath it is automatically followed. (Display:none is applied at this point, the element is equivalent to vanishing, while the Visibility:hidden is only hidden, and the position is still.) ）
The display properties are block, inline, none, and use Visibility:hidden, for example:
<textarea id="runcode77452"><p>display properties are block, inline, none value and use Visibility:hidden; Debug </p> <p><span id= "Ospan" Style= "Background-color: #CFCFCF;" >this is a span</span> in a sentence.</p> <P> <input type=button value= "Inline" onclick= "OSpan.st yle.display= ' inline ' > <input type=button value= "block" onclick= "ospan.style.display= ' block '" > <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= ' ospan.style.visibility= ' Visible ' > </P> <UL> <LI> Sets the element to block and wraps it after the element. </LI> <LI> setting an element to inline will eliminate the element wrapping. </LI> <LI> Sets the element to none to hide the element content. </LI> </UL></textarea>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
At the same time, about display:inline; and float:left; the difference between the two can be read in this article:
(display refers to the state of being displayed, inline means inline, and is characterized by the previous inline element, usually the default inline element is Span,a,em,strong, etc.) Float, Float:left, is a floating form of block-level elements, and is the two states of different forms. ）
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= "text/html; 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 style= "width:300px;" >span is an inline/inline element, assigning a value to his width is ineffective. </span> <span style= "width:100px; Float:right; " The >span is an inline/inline element, giving him a width assignment 100px+float:right; You can see the width. </span> <p> This li is defined as inline/inline, set width no effect </p> <ul id= "inline" > <li>test</li> <li>test</li > </ul> <p> This li is defined as inline/inline+float:left, set width effect </p> <ul id= "float" > <li>test</ li> <li>test</li> </ul> </body> </ptml>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
Solve:
After checking the CSS manual, it was found that the hidden content is different, one is to keep the object's physical space, one is not preserved.
-------------------------------
Display:none
CSS1 hidden objects. Unlike the hidden value of the visibility property, it does not retain its physical space for objects that are hidden
Visibility:hidden
Object is hidden, and unlike the display property, this property retains the physical space it occupies for hidden objects.
But because of the use of Visibility:hidden, the elongated content is actually the div that contains the picture, and instead of display:none, it is normal. has just been suspected to be the height of the problem, unexpectedly is so simple a little content, the result with so much time and energy, alas ...
