Use differences between display and visibility

This time to bring you the use of display and visibility differences, the use of display and visibility notes, the following is the actual case, together to see.

Visibility hidden objects also retain the physical space occupied by the object display, and 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" > The </span>←ss property is Visibility:hidden object </p><br>< p style= "border:1px solid #000; background: #666" >< span style= "Width:200;height:200;display:none" ></span>←ss property for Display:none objects </p>

Special Tips

Controlling the hidden object with the visibility property also occupies its position when it is displayed, while display does not.

Special Instructions

The Display property sets how elements are displayed, the corresponding script attributes are display, the optional values are none, block and inline, and the values are described as follows:

None hides the element and does not preserve space when the element is displayed.

Block blocks the way the element is displayed.

Inline displays elements in embedded mode.

The Inline-block object is displayed as an inline element, but all child objects are displayed as block elements, and adjacent inline elements are displayed on the same line, allowing spaces.

LIST-ITEM displays block elements as list objects, and you can add item punctuation. (Requires ie6.0+ support)

Table-header-group displays the element as a table header group, which is equivalent to the THEAD element.

Table-footer-group displays the element as a table footer group, which is equivalent to the TFOOT element.

The Visibility property sets whether the element is displayed, the corresponding script attribute is visibility, the optional value is inherit, hidden, and visible, and the values are described as follows:

Inherit inherits the visibility property setting of the parent element.

Hidden hides the element, but retains the space it occupies.

The visible display element (the default value).

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

CSS background-attachment use of the detailed

CSS to make ripple animations