css中 display属性和visibility的区别

 

display Property Values

---

Value	Description
none	The element will generate no box at all
block	The element will generate a block box (a line break before and after the element)
inline	The element will generate an inline box (no line break before or after the element). This is default
inline-block	The element will generate a block box, laid out as an inline box
inline-table	The element will generate an inline box (like <table>, with no line break before or after)
list-item	The element will generate a block box, and an inline box for the list marker
run-in	The element will generate a block or inline box, depending on context
table	The element will behave like a table (like <table>, with a line break before and after)
table-caption	The element will behave like a table caption (like <caption>)
table-cell	The element will behave like a table cell
table-column	The element will behave like a table column
table-column-group	The element will behave like a table column group (like <colgroup>)
table-footer-group	The element will behave like a table footer row group
table-header-group	The element will behave like a table header row group
table-row	The element will behave like a table row
table-row-group	The element will behave like a table row group
inherit	Specifies that the value of the display property should be inherited from the parent element

 

visibility Property Values

---

Value	Description
visible	The element is visible. This is default
hidden	The element is invisible (but still takes up space)
collapse	Only for table elements. collapse removes a row or column, but it does not affect the table layout. The space taken up by the row or column will be available for other content. If collapse is used on other elements, it renders as "hidden"
inherit	Specifies that the value of the visibility property should be inherited from the parent element

We can know from above:

visibility: hidden hides the element, but it still takes up space in the layout.

and

display: none removes the element completely from the document. It does not take up any space, even though the HTML for it is still in the source code.

Notice: if the display property is not explicitly set, it defaults to the display type the element normally has.

You also can refer here to see how they look “Set visibility: hidden on the image” and “Set display: none on the image”.