The difference between display and visibility in CSS properties

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", the visible representation of the display, and the hidden representation of the hidden. When 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" >
The first line of text will trigger the "hidden" and "visible" properties, noting the change in the second line. </div><div> because visibility retains the position of the element, the second row does not move .</div>

The 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 second row does not move.

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, like the <div> element, which is placed on the page at that point. (You can actually set the <span> display:block so that it can work like <div>.) Setting display to inline will make its behavior as inline as the element---even if it is an ordinary block element such as <DIV>, it will also be combined to image <span> that output stream. Finally, display is set: None, when the element is actually removed from the page, and the element underneath it is automatically padded. Here's a look at the code and effects of my example:

Cases:

<script language= "JavaScript" >
function Toggledisplay (Me) {
if (me.style.display== "block") {
me.style.display= "inline";
Alert ("The text is now: ' inline '.");
}
else {
if (me.style.display== "inline") {
Me.style.display= "None";
Alert ("The text is now: ' None '.) Automatically re-displays after 3 seconds. ");
Window.settimeout ("bluetext.style.display= ' block ';", +, "JavaScript");
}
else {
me.style.display= "Block";
Alert ("The text is now: ' Block '.");
}
}
}
</script>

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

Effect:

InClick on the blue text to see the effect.

The difference between display and visibility in CSS properties