The difference between display:none; and visibility:hidden;_html/css_WEB-ITnose

如果想让某一段代码在前台不显示，最简单的方法是用css的display:none即可，这样下边的内容就自动上移或右侧的左移来填补这个空隙。但特殊情况下我们只需要隐藏这个元素，

但它的位置不能被占了，那该怎么实现呢？接下来我们来看css的另外一个属性Visibility属性。

visibility: 隐藏对应的元素但不挤占该元素原来的空间。 display: 隐藏对应的元素并且挤占该元素原来的空间。

来看看下面的这个例子：

XML/HTML代码

Let’s look at some parameters of visibility and display

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

Syntax:

visibility: inherit | visible | collapse | hidden

Parameters:

inherit: Inherit the visibility of the previous parent object

visible: Object visible

hidden: Object hidden

collapse: Mainly used to hide table rows or columns. Hidden rows or columns can be used by other content. For other objects outside the table, its function is equivalent to hidden. IE5.5 does not yet support this property.

Description:

Set or retrieve whether to display the object. Unlike the display property, this property reserves the physical space that a hidden object occupies.

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

The corresponding script feature of is visibility. Please see other books I have written.

display is used to set the display state of the element.

Syntax:

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

Parameters:

block : CSS1 Default value for block objects. Use this value to add a new line after the object

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

inline: CSS1 Default value for inline objects. Use this value to delete rows from the object

compact: CSS2: Assign the object as a block object or an inline object based on the content

marker: CSS2: Specify the content before or after the container object. To use this parameter, the object must be used together with the :after and :before pseudo-elements

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

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

run-in: CSS2: Assign the object as a block object or an inline object based on the content

table: CSS2: Display the object as a table at the block element level

table-caption: CSS2: Display the object as a table title

table-cell: CSS2: Display the object as a table cell

table-column: CSS2: Display the object as a table Column display

table-column-group: CSS2: Display the object as a table column group

table-header-group: CSS2: Display the object as a table header group

table- footer-group: CSS2: Display the object as a table footer group

table-row: CSS2: Display the object as a table row

table-row-group: CSS2: Display the object as a table row group

Description:

Set or retrieve whether and how the object is displayed.

Currently IE5.5 only supports the above CSS1 parameters.

The above is the official explanation given by CSS. For these two css attributes, many people can't distinguish between these two attributes, especially their partially overlapping functions, and from the definition, the display state of the element and the visible state of the element are conceptually The difference is not obvious.

Both the visibility and display attributes have the function of hiding elements.

But using the visibility attribute does not reduce the speed of the browser opening the web page. That is to say, although the element controlled by the visibility attribute is not displayed in the browser, it exists in the browsing area, and the browser opens the web page. This element has been downloaded, but it is not displayed.

And this element also occupies its own size position in the page displayed by the browser, and this position is only blank.

When the display attribute is set to none, this element becomes a non-displayed element. The browser will ignore this element when loading the web page and will not download its content. The browser will open faster than Be quick before setting the display attribute.

Summary

After using the CSS display:none attribute, the width, height and other attribute values of the HTML element (object) will be " Lost";

After using the visibility:hidden attribute, the HTML element (object) is only visually invisible (completely transparent), and the spatial position it occupies still exists.

The difference between CSS display:none and visibility:hidden

visibility:hidden is hidden, but the position is retained when browsing; CSS display:none is regarded as not existing, and Not loading!

Overflow attribute value {visible|hidden|scroll|auto} The premise is to first limit the width (width) and height (height) of the DIV. Both hide HTML elements and there is no difference in visual effects, but they are still different in some DOM operations.

CSS display:none;

After using this attribute, the width, height and other attribute values of the HTML element (object) will be "lost";

visibility:hidden;

After using this attribute, the HTML element (object) is only visually invisible (completely transparent), but the spatial position it occupies still exists, that is to say, it still has attribute values such as height and width.