What commands are hidden in css

There are three kinds of hiding commands in css, which are: 1. Use "display:none" to hide all content without occupying the position; 2. Use "visibility:hidden" to hide the content without occupying the position; 3. Use "overflow:hidden" to hide overflow content.

The operating environment of this tutorial: Windows7 system, HTML5&&CSS3 version, Dell G3 computer.

3 methods and attribute values ​​of hiding content in CSS

When making web pages, hiding content is also a relatively common method. Its functions generally include: Hide text/pictures, hide links, hide out-of-range content, hide pop-up layers, hide scroll bars, clear misalignment and floating, etc. You can use CSS to hide the content mentioned above. Several methods of hiding content:

1. Use display:none to hide all content

display:none can prevent all content in the webpage from being displayed, such as code, text, links, pictures, and p layers. It is the recommended way to hide content.

<p style="display:none;">我不占地儿，你看不见我；</p>

Value	Description
none	This element will not be shown.
block	This element will be displayed as a block-level element, with line breaks before and after this element.
inline	Default. This element will be displayed as an inline element with no line breaks before or after the element.
run-in	This element will appear as a block-level element or an inline element, depending on the context.
inherit	Specifies that the value of the display attribute should be inherited from the parent element.

2. Use visibility:hidden to hide content

visibility:hidden and display:none can hide content It is almost the same, but the only difference is that although it hides the content, the hidden content still occupies space. The position where the content is hidden but the space is retained will be displayed as blank on the web page.

<p style="visibility:hidden;">我占了地儿，你也看不见我；</p>

Value	Description
visible	Default value. The element is visible.
hidden	The element is invisible.
collapse	When used in a table element, this value deletes a row or column, but it does not affect the layout of the table. The space occupied by a row or column is freed for other content. If this value is used on another element, it will be rendered as "hidden".
inherit	Specifies that the value of the visibility attribute should be inherited from the parent element.

3. Use overflow:hidden to hide overflow content

overflow:hidden This method can hide a fixed area External content, it can effectively control the display area. But it should be noted that when using it, you need to define the width and height for it, otherwise it will be invalid

<p style="width:120px; height:20px; overflow:hidden;">我占的地儿太多了你就看不见我的尾巴了。。。。。</p>

There is a branch in overflow usage, overflow-x:hidden and overflow-y:hidden, x is horizontal Range, y is the vertical range, these two properties are often used when the scroll bar needs to be hidden.

Value	Description
visible	Default value. The content will not be trimmed and will be rendered outside the element box.
hidden	The content will be trimmed and the remaining content will be invisible.
scroll	The content will be trimmed, but the browser will display scroll bars to view the remaining content.
auto	If content is trimmed, the browser displays scroll bars to view the remaining content.
inherit	Specifies that the value of the overflow attribute should be inherited from the parent element.

[Recommended: "css video tutorial"]

The above is the detailed content of What commands are hidden in css. For more information, please follow other related articles on the PHP Chinese website!