Visibility:hidden and display:none

visibility:hidden and display:none The difference between

1、 Inherit ：

display It's not inheritance , and visibility Is an inherited property .

Of descendant elements visibility Attribute if it exists , Will not inherit ; If it does not exist , Will inherit from the parent element visibility Value .

The parent element visibility by hidden But the child element visibility by visble, Then the child elements are still visible , Subelement visibility If the attribute does not exist, the child element is not visible . And the parent element display Property set to none after , All child elements are invisible .

2、 Space ：

Set up display: none after , The element appears as if it does not exist , But it still exists in the document object model ; Set up visibility:hidden after , The space occupied by this element will be occupied by blank .

3、 Rendering ：

Whether to re render after changing the value of page related attributes ：display: none Rendering ,visibility:hidden No rendering .