Home  >  Article  >  Web Front-end  >  How to hide css elements

How to hide css elements

coldplay.xixi
coldplay.xixiOriginal
2021-04-16 16:05:204519browse

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. .

How to hide css elements

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article:How to hide css textNext article:How to hide css text