Display: none; and visibility: hidden;, visibilityhidden

Display: none; and visibility: hidden;, visibilityhidden

If you want to disable the display of a piece of code on the front end, you can simply use the display: none of css, in this way, the content below is automatically moved up or left on the right side to fill this gap. However, in special cases, we only need to hide this element,

But its location cannot be occupied. How can this problem be achieved? Next we will look at another css attribute Visibility.

Visibility:Hides the corresponding element but does not occupy the original space of the element.
Display:Hide the corresponding element and occupy the original space of the element.

 

Let's take a look at the following example:

XML/HTML code <divstyle = "width: 100px; height: 100px; background: red; visibility: hidden"> </div> <! -- After the object is hidden, it also occupies the corresponding space --> <divstyle = "width: 100px; height: 100px; background: red; display: none"> </div> <! -- After the object is hidden, the object does not occupy any space. After comparison, we will know -->

The following describes some parameters of visibility and dispaly.

Visibility is used to set the visible state of an element.

Syntax:

Visibility: inherit | visible | collapse | hidden

Parameters:

Inherit: inherits the visibility of the previous parent object

Visible: visible to objects

Hidden: object hiding

Collapse: used to hide rows or columns of a table. Hidden rows or columns can be used by other content. For other objects outside the table, the function is equivalent to hidden. IE5.5 does not support this attribute.

Note:

Sets or retrieves whether an object is displayed. Unlike the display property, this property retains the physical space occupied by hidden objects.

If you want the object to be visible, its parent object must also be visible.

The corresponding script feature is visibility. For more information, see my other bibliography.

Display is used to set the display status of elements.

Syntax:

Display: block | none | inline | compact | marker | inline-table | list-item | run-in | table-caption | table-cell | table-column- group | table-footer-

Group | table-header-group | table-row-group

Parameters:

Block: the default value of CSS1. Add a new line after using this value as the object

None: CSS1 hidden object. Unlike the hidden value of the visibility attribute, it does not reserve its physical space for hidden objects.

Inline: the default value of CSS1 inline object. Use this value to delete rows from an object.

Compact: CSS2 allocates objects as block objects or Inline objects based on content.

Marker: CSS2 specifies the content before or after the container object. To use this parameter, the object must be used with the: after and: before pseudo elements.

Inline-table: CSS2 displays the table as an inline object or an inline container without line breaks

List-item: CSS1 specifies a block object as a list item. You can also add optional project logos.

Run-in: CSS2 assigns an object as a block object or an inline object based on content.

Table: CSS2 displays objects as block element-level tables.

Table-caption: CSS2 displays objects as table titles

Table-cell: CSS2 displays objects as table cells.

Table-column: CSS2 displays objects as table columns

Table-column-group: CSS2 displays objects as table column groups.

Table-header-group: CSS2 displays objects as table title groups.

Table-footer-group: CSS2 displays objects as table footer groups.

Table-row: CSS2 displays objects as table rows.

Table-row-group: CSS2 displays objects as table row groups.

Note:

Sets or retrieves whether and how objects are displayed.

Currently, IE5.5 only supports the above CSS1 parameters.

The above is the official explanation provided by CSS. For these two css attributes, many people do not know the two attributes, especially when some of their functions overlap. In terms of definition, the conceptual differences between the display state of an element and the visible state of an element are not obvious.

Both visibility and display have the function of hiding elements.

However, using the visibility attribute does not reduce the speed at which the browser opens the webpage. That is to say, although the elements controlled by the visibility attribute are not displayed in the browser, they exist in the browser area, this element has been downloaded when the browser opens the webpage, but it is not displayed.

In addition, this element also occupies its own size position on the page displayed by the browser, and this position is blank.

When the display attribute is set to none, this element becomes an element that is not displayed. When loading a webpage, the browser ignores this element and does not download its content, the browser opens faster than before setting the display attribute.

Summary

When the CSS display: none attribute is used, various attribute values, such as the width and height of the HTML element (object), will be "lost ";

After the visibility: Den den attribute is used, the HTML element (object) is invisible visually (completely transparent), and the space occupied by the element still exists.

Difference between CSS display: none and visibility: hidden

Visibility: hidden, but its position is retained during browsing. CSS display: none is regarded as nonexistent and not loaded!

Overflow attribute value {visible | hidden | scroll | auto} is required only when the width and height of the DIV are limited ). The two are hidden HTML elements, which have no difference in visual effects, but they are still different in some DOM operations.

CSS display: none;

When this attribute is used, various attribute values, such as the width and height of the HTML element (object), will be "lost ";

Visibility: hidden;

After this attribute is used, the HTML element (object) is only visually invisible (completely transparent), and the space occupied by it still exists, that is to say, it still has attribute values such as height and width.