The difference between display and visibility

This time I will bring you the difference between display and visibility, what are the precautions when using display and visibility, the following are practical cases, one Get up and take a look.

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

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

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

You can save the code below 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>
←SS属性为visibility:hidden的对象
< /p><br>
< p style="border:1px solid #000;background:#666">
< span style="width:200;height:200;display:none"></span>
←SS属性为display:none的对象
< /p>

Special tips

Use visibility attribute to control hiding The object still occupies the position when it is displayed, while 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 the element 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 Display 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 Inheritance The visibility attribute setting of the parent element.

hidden hides the element but retains the space it occupies.

visible display element (default).

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of the use of background-attachment in CSS

css to create ripple animation

The above is the detailed content of The difference between display and visibility. For more information, please follow other related articles on the PHP Chinese website!