Div display and hide

Visibility hidden objects also reserve the physical space occupied by the objects displayed, while display does not. You can save the following code to see the effect:
Procedure:
Sample Code:

<Div style = "border: 1px solid #000; background: # eee">
<Span style = "width: 200; height: 200; visibility: hidden"> </span>
Objects with the visibility property: hidden
</Div> <br>
<Div style = "border: 1px solid #000; background: #666">
<Span style = "width: 200; height: 200; display: none"> </span>
Objects whose feature is display: none
</Div>

Note
The visibility attribute is used to control the position of the hidden object while the display is not.

Note

The display attribute sets the display mode of the element. The corresponding script features display. Optional values include none, block, and inline. The values are described as follows:
None hides the element and does not reserve the space when the element is displayed.
Block display element.
Displays elements in inline.
The inline-block object is displayed as an embedded element, but all sub-objects are displayed as block elements. Adjacent embedded elements are displayed in the same line, with spaces allowed.
List-item displays block elements as list objects and can add project punctuation points. (IE6.0 + supported)
Table-header-group displays elements as table title groups, which are equivalent to tHead elements.
Table-footer-group displays an element as a table footer group, which is equivalent to a tFoot element.
The visibility attribute sets whether to display elements. The corresponding script features are visibility. The optional values are inherit, hidden, and visible. The values are described as follows:
Inherit inherits the visibility attribute settings of the parent element.
Hidden elements are hidden, but the occupied space is retained.
Visible display element (default ).