The difference between Display:none and Visibility:hidden;

If you want a piece of code to not display in the foreground, the simplest way is to use the CSS Display:none, so that the contents of the bottom automatically move up or the right side of the left to fill the gap. But in special cases we just need to hide this element,

But its position can not be accounted for, then how to achieve it? Next, let's look at another CSS property visibility property.

Visibility: hides the corresponding element without crowding out the original space of the element.
display: hides the corresponding element and crowding out the original space of the element.

Take a look at the following example:

xml/html Code<divstyle="Width:100px;height:100px;background:red;visibility:hidden"></ div> <!--object is hidden, there is the corresponding space size--> <divstyle="Width:100px;height:100px;background:red;display:none"></Div > <!--object is hidden, the object does not occupy any space, and the contrast is known->

Let's look at some of the parameters of visibility and dispaly

The visibility is used to set the visible state of an element.

Grammar:

Visibility:inherit | Visible | Collapse | Hidden

Parameters:

Inherit: Inherit the visibility of a parent object

Visible: Object Visible

Hidden: Object hiding

Collapse: A row or column that is used primarily to hide a table. Hidden rows or columns can be used by other content. For other objects outside the table, the action is equivalent to hidden. IE5.5 does not yet support this property.

Description

Sets or retrieves whether the object is displayed. Unlike the display property, this property retains the physical space it occupies for hidden objects.

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

The corresponding script attribute is visibility. Please refer to the other bibliography I have written.

Display is used to set the displayed state of an element.

Grammar:

Display:block | none | inline | Compact | Marker | inline-table | List-item | Run-in | Table |table-caption | Table-cell | Table-column | Table-column-group | table-footer-

Group | Table-header-group | Table-row | Table-row-group

Parameters:

The default value of the Block:css1 block object. Add a new row after the object with this value

None:css1 hidden objects. Unlike the hidden value of the visibility property, it does not retain its physical space for objects that are hidden

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

Compact:css2 allocated 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: after and: before pseudo-elements

Inline-table:css2 table as inline object or inline container without front and back wrapping

LIST-ITEM:CSS1 Specifies the block object as a list item. And you can add optional item flags

Run-in:css2 allocated objects as block objects or inline objects based on content

Table:css2 the object as a block-element-level table

Table-caption:css2 displaying objects as table headings

Table-cell:css2 to display objects as table cells

Table-column:css2 to display objects as table columns

Table-column-group:css2 to display objects as table column groups

Table-header-group:css2 to display objects as table header groups

Table-footer-group:css2 Display objects as table footer groups

Table-row:css2 displaying objects as table rows

Table-row-group:css2 display objects as table row groups

Description

Sets or retrieves whether and how objects are displayed.

Currently IE5.5 only supports the above CSS1 parameters.

These are the official explanations given by the CSS. For these two CSS properties, many people are not clear about these two properties, especially where there is a partial overlap in functionality, and from the definition, the display state of the element and the element's visible state are conceptually different.

Visibility and display two properties have the ability to hide elements.

However, the use of the visibility property does not reduce the speed of the browser to open the Web page, that is, the visibility property control of the element although not displayed in the browser, but he is in the browsing area is present, the browser opened the Web page has downloaded this element, just do not display it.

And this element in the browser display of the page will also occupy his own size, and this position shows a blank.

When the display property is set to None, the element becomes an element that is not displayed, and the browser ignores the element when it loads the page, does not download its contents, and the browser opens faster than before setting the display property.

Summarize

With the CSS Display:none property, the width and height of the HTML element (object) will be "lost";

With the Visibility:hidden property, the HTML Element (object) is simply visually invisible (completely transparent), and the space it occupies remains there.

The difference between CSS Display:none and Visibility:hidden

Visibility:hidden is hidden, but retains its location while browsing; CSS Display:none is considered non-existent and does not load!

The overflow property value {Visible|hidden|scroll|auto} presupposes that you first limit the width and height of the div (height). Both are hidden HTML elements, there is no difference in visual effects, but in some dom operations they are still different.

CSS Display:none;

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

Visibility:hidden;

With this property, the HTML Element (object) is simply visually invisible (completely transparent), and the space it occupies still exists, that is, it still has a property value such as height and width.

The difference between Display:none and Visibility:hidden;