How to show and hide divs

visibilityHidden objects also retain the physical space occupied by the object when it is displayed, while display does not retain it. You can save the following code to see the effect:
Specific steps:
Code example:

<p style="border:1px solid #000;background:#eee">
<span style="width:200;height:200;visibility:hidden"></span>

←Object whose SS attribute is visibility:hidden

</p><br>
<p style="border:1px solid #000;background:#666">
<span style="width:200;height:200;display:none"></span>

←Objects whose SS attribute is display:none

Special Tips
Use the visibility attribute to control the hidden object and still occupy the position when it is displayed, but the display does not.

Special Note

The display attribute sets the display mode of the element. The corresponding script feature is display. The optional values ​​are none, block and inline. The description of each value is as follows:
none Hidden element , does not preserve the space when the element is displayed.
Display elements in block mode.
inline Displays elements inline.
inline-block objects appear as inline elements, but all child objects appear as block elements. Adjacent inline elements will appear on the same line, spaces are allowed.
list-item displays block elements as list objects and can add item punctuation. (Requires IE6.0+ support)
table-header-group displays the element as a table header group, equivalent to the tHead element.
table-footer-group displays the element as a table footer group, equivalent to the tFoot element.
The visibility attribute sets whether to display the element. The corresponding script feature is visibility. The optional values ​​are inherit, hidden and visible. The description of each value is as follows:
inherit inherits the visibility attribute setting of the parent element.
hidden Hides the element but retains the space it occupies.
visible Display element (default value).

The above is the detailed content of How to show and hide divs. For more information, please follow other related articles on the PHP Chinese website!