An explanation of the differences between display and visibility two attributes in Div

Display and visibility attribute differences in P

The display and visibility properties differ considerably in P, although both the visibility and display properties can achieve the purpose of hiding page elements, but they differ in how they respond to normal document flow

This section describes the difference between display and visibility in p, where 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, although they can all achieve the purpose of hiding the page element. But they differ in how they respond to normal document flow.

Display and visibility attribute differences in P

Visibility Properties:

Determines whether the element is displayed or hidden;
Visibility= "Visible|hidden", visible display, hidden hidden.

When visibility is set to "hidden", the element is hidden, but it still occupies its original position.

For example:

<scriptlanguagescriptlanguage= "JavaScript" > Functiontogglevisibility (Me)  {  if (me.style.visibility = = "hidden")  {  me.style.visibility= "visible";  }  else  {  me.style.visibility= "hidden";  }  }  </script>  <ponclickponclick= "togglevisibility (This)" style= "position:relative" > First line of text will trigger " Hidden and visible properties, note the change in the second row.  </p> <p> Because visibility retains the position of the element, the second row does not move .</p>

See the first line: due to the effects of "hidden" and "visible". Because visibility retains the position of the element, the second row does not move.
Notice that when the element is hidden, it can no longer receive other events, so when the first line of code becomes "hidden", it can no longer receive the response to the event, so it can not be clicked by the mouse to display the first paragraph of text.

Display Properties:

It's 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.

Block
When display is set to block, all elements in the container will be treated as a separate block, like the <p> element, which is placed on the page at that point. (You can actually set the <span> display:block so that it can work like <p>.)

Inline
Setting display to inline will make its behavior as inline as the element---even if it is an ordinary block element such as <P>, it will also be combined to image <span> that output stream.

None
Finally, display is set: None, when the element is actually removed from the page, and the element underneath it is automatically padded.

For example:

Here's a look at the code and effects of my example:
Cases:

<scriptlanguagescriptlanguage= "JavaScript" > Functiontoggledisplay (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>  <p> in <spanidspanid= "Bluetext" onclick= "Toggledisplay (This)"  style= "Color:blue ;p Osition:relative;cursor:hand; " > Blue </span> Text Click to see the effect .</p>