How to hide css elements

How to hide css elements: 1. The opacity attribute means to set the transparency of an element; 2. Visibility sets its value to hidden to hide our elements; 3. The display attribute truly hides the element according to the meaning of the word. .

The operating environment of this tutorial: windows7 system, css3 version, DELL G3 computer.

How to hide css elements:

1. Opacity

The opacity attribute means to set the transparency of an element. It is not designed to change the bounding box of an element. This means that setting opacity to 0 only visually hides the element. The element itself still occupies its own position and contributes to the layout of the web page.

css code:

.hide {
  opacity: 0;
}

2. Visibility

Set its value to hidden will hide our element. Like the opacity attribute, hidden elements will still have an effect on our web page layout.

.hide {
   visibility: hidden;
}

3. Display

The display attribute truly hides the element according to the meaning of the word. Setting the display property to none ensures that the element is not visible and not even the box model is generated. Using this attribute, hidden elements do not occupy any space.

.hide {
   display: none;
}

Recommended related tutorials: CSS video tutorial

The above is the detailed content of How to hide css elements. For more information, please follow other related articles on the PHP Chinese website!