The hiding and displaying of CSS elements

Show and Hide

1. Introduction:

Display: Make paragraph travel inner box

Visibility: property specifies whether the element is visible.

2. Display Properties

value	Description
None	This element is not displayed.
Block	This element is displayed as a block-level element with a newline character before and after this element.
Inline	Default. This element is displayed as an inline element with no line break before or after the element.
Inline-block	Inline block element. (CSS2.1 new value)
List-item	This element is displayed as a list.
Run-in	This element is displayed as a block-level element or inline element, depending on the context.
Compact	There is a value compact in CSS, but it has been removed from CSS2.1 due to a lack of broad support.
Marker	The CSS has a value of marker, but it has been removed from the CSS2.1 due to a lack of broad support.
table	<table> ) with a newline character before and after the table.
inline-table	<table> ), there are no line breaks before or after the table.
table-row-group	).
table-header-group	).
table-footer-group	).
table-row	< Span class= "Td-span" style= "min-height:10px;" This element is displayed as a table row (similar to <TR> ).
table-column-group	).
table-column	)
table-cell	and <TH> )
Table-caption	This element is displayed as a table header (like <caption>)
Inherit	Specifies that the value of the display property should be inherited from the parent element.

3. Visibility Properties

value	Description
Visible	The default value. The element is visible.
Hidden	The element is not visible.
Collapse	When used in a TABLE element, this value can delete one row or column, but it does not affect the layout of the table. The space occupied by rows or columns is left for other content to use. If this value is used on other elements, it is rendered as "hidden".
Inherit	Specifies that the value of the visibility property should be inherited from the parent element.

4, "Display:none" and "Visibility:hidden"

(1) Display:none: After the element is hidden, the original position is not occupied

(2) Visibility:hidden: After the element is hidden, it occupies the original position

5. Example

  h1{          visibility:hidden;//Hide occupy element space          display:none;//Hide not occupy space      }  p{          display:inline;//change to inline element      }  h2{          display:block;//change block-level elements      }

Related recommendations:

A simple way to explain the center layout of CSS elements