Summarize some common CSS hidden properties

CSS hidden attributes refer to hiding certain HTML elements or content through CSS style sheets during the process of web design and development so that they are not displayed on the web page. This hiding method is generally used for web page interaction, beautification and privacy protection.

Common CSS hidden properties include display, visibility, opacity, overflow, clip, etc.

1. display attribute

The display attribute is used to set the display mode of elements in the web page. Common values ​​include block, inline, none, etc. Among them, none means that the element is not displayed in the web page at all, which is equivalent to hiding the element. Using display:none to hide an element can prevent the element from occupying space in the layout and does not affect the layout position of other elements. Therefore, it is a simple and effective hiding method.

For example:

<div style="display:none;">  
    这段内容会被隐藏起来  
</div>

2. visibility attribute

The visibility attribute is used to set the visibility of elements in the web page. Common values ​​​​are visible and hidden. . Among them, hidden means that although the element is not displayed in the web page, it still exists, so it takes up space in the layout. Compared with display:none, using visibility:hidden to hide elements does not affect the layout position of other elements, but the space occupied will cause white space on the page.

For example:

<div style="visibility:hidden;">  
    这段内容在网页中不可见，但依然存在  
</div>

3. opacity attribute

The opacity attribute is used to set the transparency of the element, with a value ranging from 0 to 1. Among them, 0 means completely transparent and 1 means completely opaque. Setting the transparency of an element to 0 makes the element completely invisible on the web page, which is equivalent to hiding the element.

For example:

<div style="opacity:0;">  
    这段内容会被完全透明，不可见 
</div>

4. overflow attribute

The overflow attribute is used to set the processing method of an element when the content exceeds its boundaries. Common values ​​​​are visible, hidden, auto, scroll. Among them, hidden means that the part of the content that exceeds the boundary is hidden.

For example:

<div style="width:100px;height:100px;overflow:hidden;">  
    这段内容超出了元素的边界，但被隐藏起来  
</div>

5. clip attribute

The clip attribute is used to clip the visible part of the element, and is often used to achieve CSS masking effects. The clip attribute value is a rectangular area, consisting of four values: top, right, bottom, and left, which in turn represent the upper, right, lower, and left boundaries of the rectangular area. Only the part of the clipped element content within this rectangular area is visible, and the rest is hidden.

For example:

<div style="width:100px;height:100px;clip:rect(0px, 50px, 50px, 0px);">  
    这段内容被剪裁，并只显示了矩形区域内的一部分  
</div>

Summary:

CSS hidden attributes are a common technique in web design and development. By hiding certain HTML elements or content, various functions can be achieved. a different effect. Common CSS hidden properties include display, visibility, opacity, overflow, clip, etc., which can be used flexibly according to specific needs. At the same time, you need to be careful when using CSS hidden attributes to avoid negative impacts on the SEO and accessibility of web pages.

The above is the detailed content of Summarize some common CSS hidden properties. For more information, please follow other related articles on the PHP Chinese website!