The difference between visibility and display in JAVASCRIPT style_javascript skills

When visibility is set to "hidden", although the element is hidden, it still occupies its original position.
-------------------------------------------------- ----------------
Example:

Copy code The code is as follows:

< ;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.

Because visibility will retain the position of the element, so although the first line is invisible, the position is still there, and the content of the second line will not move up or down.

Explanation: Note that when an 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 first text with the mouse.
-------------------------------------------------- ----------------
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 on the page at that point. (You can actually set the display:block of so that it works like a

.
Setting the display to inline will make it behave like the element is inline --- even if it is a normal Block elements such as

will also be combined into an output stream like
----------------------. ----------------------------------------
Example:

Copy code The code is as follows:

onblue text Click to see the effect.

---------------------------------- --------------------------------
Finally, display is set to: none. At this time, the element actually changes from is removed from the page, the elements below it will be automatically filled in. (At this time, the element with display: none; is equivalent to disappearing, while visibility: hidden; only means hidden, but the position is still there.)
------------------ ---------------------------------------------
display attribute Debugging examples for block, inline, none values ​​and using visibility: hidden;:

Copy code The code is as follows:

The display attributes are block, inline, none values ​​and debugging using visibility: hidden;

This is a SPAN in a sentence.

< input type=button value="None" onclick="oSpan.style.display='none'">

• Setting an element to inline will eliminate element wrapping.


• Set the element to none to hide the content of the element.

"Too difficult":
At the same time, for the difference between display:inline; and float:left;, you can refer to this article:
(display refers to the display state, inline means inline, characteristics It is close to the previous inline element. Usually the default inline elements are span, a, em, strong, etc. Float means floating, and float: left is a floating form for block-level elements, which are different forms. Two states) http://www.andymao.com/andy/post/42.html
http://bbs.blueidea.com/thread-2596793-1-1.html

Copy code The code is as follows: