Detailed explanation of the difference between display and visibility

visibilityHidden Objects also retain the physical space occupied by the object when it is displayed, while display is not retained.

vilibility：hidden(hidden)、visible(display) style="vislbility:hidden"

display：none(hidden)、block (Display) style="display:none"

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">

←SSAttribute is the object of visibility:hidden

< ; /p>

< p style="border:1px solid #000;background:#666">

< span style="width:200; height:200;display:none">

←Object whose SS attribute is display:none

< /p>

Special Tips

Use the visibility attribute to control that the hidden object still occupies 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 hides the element and does not retain the space when the element is displayed.

Display elements in block mode.

inline Displays elements inline.

inline-block objects are displayed as inline elements, but all child objects are displayed as block elements, and adjacent inline elements will be displayed 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 tableheading group, which is 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 Inheritance 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 Detailed explanation of the difference between display and visibility. For more information, please follow other related articles on the PHP Chinese website!