css中 display属性和visibility的区别

 

display Property Values

---

ValueDescriptionnoneThe element will generate no box at allblockThe element will generate a block box (a line break before and after the element)inlineThe element will generate an inline box (no line break before or after the element). This is defaultinline-blockThe element will generate a block box, laid out as an inline boxinline-tableThe element will generate an inline box (like <table>, with no line break before or after)list-itemThe element will generate a block box, and an inline box for the list markerrun-inThe element will generate a block or inline box, depending on contexttableThe element will behave like a table (like <table>, with a line break before and after)table-captionThe element will behave like a table caption (like <caption>)table-cellThe element will behave like a table celltable-columnThe element will behave like a table columntable-column-groupThe element will behave like a table column group (like <colgroup>)table-footer-groupThe element will behave like a table footer row grouptable-header-groupThe element will behave like a table header row grouptable-rowThe element will behave like a table rowtable-row-groupThe element will behave like a table row groupinheritSpecifies that the value of the display property should be inherited from the parent element

 

visibility Property Values

---

ValueDescriptionvisibleThe element is visible. This is defaulthiddenThe element is invisible (but still takes up space)collapseOnly 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"

inheritSpecifies 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”.