Solve the difference between display and visibility in CSS_Basic Tutorial

Most people easily confuse the CSS properties display and visibility. They seem to be the same, but in fact they are very different.
The visibility attribute is used to determine whether the element is displayed or hidden, which is represented by visibility="visible|hidden" (visible means displayed, hidden means hidden).
When visibility is set to "hidden", although the element is hidden, it still occupies its original position. Example:

<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)" style="position:relative">The first line of text will trigger the "hidden" and "visible" attributes. Pay attention to the changes in the second line. </div> <div> Because visibility retains the position of the element, although the first line is invisible, the position is still there, and the content of the second line will not move up or down. </div>
[Ctrl A Select all Note:If you need to introduce external Js, you need to refresh to execute]

Note that when the element is hidden, it can no longer receive other events. , so in the first piece of code, when it is set to "hidden", it can no longer receive response events, so it cannot be displayed by clicking the mouse on the first piece of text.
On the other hand, the display attribute is a little different. The visibility attribute hides the element but maintains its floating position, while display actually sets the floating characteristics of the element.
When display is set to block, all elements in the container will be treated as a single block, just like the

element, which will be placed into the page at that point. (You can actually set the display:block of so that it works like

.
Setting the display to inline will make it behave like the element is inline --- even if it is a normal block element like

, It will also be combined into an output stream like .
Look at the code and effects of my example below:

<script language="JavaScript"> function toggleDisplay(me){ if (me.style.display=="block"){ me.style.display="inline"; alert("文本现在是：'inline'."); } else { if (me.style.display=="inline"){ me.style.display="none"; alert("文本现在是:'none'. 3秒钟后自动重新显示。"); window.setTimeout("blueText.style.display='block';",3000,"JavaScript"); } else { me.style.display="block"; alert("文本现在是:'block'."); } } } </script> <div>Click on the <span id="blueText" onclick="toggleDisplay(this)" style="color:blue;position:relative;cursor:hand;">blue</span> text to see the effect. <br><input onclick="runEx('runcode99478')" type="button" value="Run code"> <input onclick="doCopy('runcode99478')" type="button" value="Copy code"> <input onclick="doSave(runcode99478)" type="button" value="Save code">[Ctrl A Select all Note:<a href="/article/23421.htm" title="View specific details" target="_blank">If you need to introduce external Js, you need to refresh it to execute</a>]</div> <br>Finally, the display is set: none, then the element is actually removed from the page is removed, the elements below it will be automatically filled in. (At this time, the element applying display: none; is equivalent to disappearing, while visibility: hidden; only means hidden, but the position is still there.) <br>The display attributes are block, inline, none values ​​and the case of using visibility: hidden; Debugging example: <br><div class="htmlarea"> <textarea id="runcode77452"> <h1>The display attributes are block, inline, none values ​​and debugging using visibility: hidden;</h1> <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.style.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>Set the element to block, which will cause a new line after the element. </li> <li>Set an element to inline, which will eliminate element wrapping. </li> <li>Set the element to none to hide the content of the element. </li> </ul>
[Ctrl A Select all Note:If you need to introduce external Js, you need to refresh it before it can be executed]

At the same time, about the difference between display:inline; and float:left; You can refer to this article:
(display refers to the display state, inline means inline, which is characterized by being close to the previous inline element. Usually the default inline elements include span, a, em, strong, etc. And float It represents float, float:left, which is the floating form for block-level elements and is two states of different forms.)
http://www.andymao.com/andy/post/42.html
http://bbs.blueidea.com/thread-2596793-1-1.html

<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>l <span style="width:300px;">span is an inline/inline element, and assigning a width to it has no effect. </span> <span style="width:100px; float:right;">span is an inline/inline element, assign a width of 100px float:right; you can see that there is a width. </span> <div> <p>This li is defined as inline/inline, and setting the width has no effect</p> <ul id="inline"> <li>test</li> <li>test</li> </ul> </div> <div> <p>This li is defined as inline/inline float:left, and setting the width has an effect</p> <ul id="float"> <li>test</li> <li>test</li> </ul> </div>
[Ctrl A Select all Note:If you need to introduce external Js, you need to refresh it before it can be executed]

Solution:
After checking the CSS manual, I found that the hidden content turned out to be there The difference is that one retains the physical space of the object and the other does not.
----------------------------------
display:none
CSS1 Hidden object. Unlike the hidden value of the visibility attribute, it does not reserve its physical space for the hidden object

visibility:hidden
Object hiding, unlike the display attribute, this attribute reserves the physical space it occupies for the hidden object space.

But because visibility:hidden is used, the elongated content is actually the DIV containing the image; but after using display:none, it becomes normal. I had always suspected that it was a problem with the high settings, but I didn

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Css uses js expression to achieve effects_Experience exchangeNext article：Css uses js expression to achieve effects_Experience exchange

Related articles

See more

• Summary of what you must pay attention to about Border when writing CSS
• How to realize multi-style selection and real-time switching of styles_Experience exchange
• Detailed usage analysis of marquee
• CSS标题线（删除线贯穿线效果）实现
• CSS3中优雅降级和渐进增强的区别