What are the properties of css to hide and show elements?

The implementation attributes are: 1. display attribute, when the value is "none", the element is hidden, and when it is "block", the element is displayed; 2. visibility attribute, when the value is "hidden", the element is hidden, and it is "visible" When displaying elements; 3. overflow attribute; 4. opacity attribute.

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

Displaying and hiding of elements

Essence: Let an element be hidden or displayed on the page.

css can realize the attributes of hiding and displaying elements

1: display attribute

• display: none; Hidden objects

• display: block;In addition to converting to block-level elements, there are The meaning of display elements

Note: After display hides an element, it no longer occupies its original position

2.visibility attribute

• visibility: visible; The element is visible

• ##visibility: hidden; The element is hidden

Note: After visibility hides the element, it will continue to occupy the original position

3.overflow attribute (showing and hiding of overflow content)

overflow: visible | hidden | scroll | auto

1 , the specific description of the attribute value is shown in the following table:

Attribute valueDescriptionvisibleDoes not cut the content and does not add scroll barshiddenHide the excess partscrollThe scroll bar will be displayed regardless of whether the content exceeds the limit. autoThe scroll bar will be displayed only when the content exceeds the limit. If the content does not exceed the limit, the scroll bar will be displayed. Do not display

4, opacity attribute

• opacity: 0; Hide Element

• opacity: 1; Display element

The opacity property means to retrieve or set the opacity of the object. When its transparency is 0, it disappears visually; but it still occupies that position and affects the layout of the web page.

Note: For elements with the opacity attribute added, their background and element content will also change accordingly.

(Learning video sharing:

css video tutorial)

The above is the detailed content of What are the properties of css to hide and show elements?. For more information, please follow other related articles on the PHP Chinese website!