How to distinguish display and visibility in CSS styles

Although it has been written for so long div+css code, but sometimes in the use of a CSS style properties of the time will be wrong, but also a ridiculous error.

Although it has been written for so long div+css code, but sometimes in the use of a CSS style properties of the time will be wrong, but also out of the ridiculous, a little pediatrics, here I will not expose my ugly text. Straight to the point!

Today I would like to distinguish between: The CSS style attribute display and visibility and the difference, the two seemingly the same, the essence is completely different.
First of all, visibility:
The visibility property is used to determine whether the element is displayed or hidden, represented by visibility= "Visiblehidden", visible for display, and hidden for hidden. 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)" style= "position:relative" > First line of text will trigger "hidden" and "visible" property. Note The variable </div> of the second row;
<div> because visibility retains the position of the element, the second row does not move </div>
  The effect chart is as follows:

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.
Look at display again;
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 put into the page at that point. (You can actually set the span Display:block so that it works like a div.) Setting display to inline will make it behave like an element inline---even if it is an ordinary block element such as a Div, it will be combined to image span ; The output stream like that. Finally, the display is set: None, when the element is actually removed from the page, and the element underneath it is automatically padded. Look at the code and effect of my instance:

Cases:

<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 '.");
}
}
}
</script>

<div> in <span id= "Bluetext" onclick= "Toggledisplay (This)"
Style= "Color:blue;position:relative;cursor:hand;" > Blue </span> Text on Click to view effect .</div>