The difference between display and visibility in CSS properties

CSS most people can easily confuse CSS properties display and 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 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 style= "Position:relative" >
The first line of text will trigger the "hidden" and "visible" attributes, noting the change in the second row. </div><div> because visibility retains the position of the element, the second row does not move .</div>

Effect:
The first line of text will trigger the "hidden" and "visible" attributes, noting the change in the second row. Because visibility retains the position of the element, the second row does not move.

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. 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"
Style= "Color:blue;position:relative;cursor:hand;" > Blue </span> Text on Click to view effect .</div>

Effect:
Click on the blue text to see the effect.