css to implement hiding

CSS (Cascading Style Sheets) is a language used to control the style and layout of web pages. When building web pages, we often need to use CSS to define the styles of elements, such as fonts, background colors, borders, etc. There is also a magical attribute in CSS - display, which can control the display mode of elements, including hiding.

Why do we need to hide elements? There are many scenes. For example, when making a page with multiple tabs, we may want to only display the content of the currently selected tab and hide the content of other tabs first. For another example, we may need to add a close button to the page, which can hide an element when clicked, etc.

Next, we will introduce in detail several methods of hiding elements in CSS.

1. Display attribute

display is the most commonly used attribute in CSS to control the display mode of elements. By default, all elements are displayed. If you want to hide an element, you can do so by modifying the display attribute. The following are several values ​​for the display attribute:

1. none

Hide the element and remove it from the document flow, that is, it does not take up space. This means that hidden elements no longer have an impact on the page layout.

Sample code:

.hide {
  display: none;
}

2. block

Convert the element to a block-level element and display it. A block-level element occupies its own line, has a set width and height, and can accommodate other block-level elements and inline elements.

Sample code:

.show {
  display: block;
}

3. inline

Convert the element to an inline element and display it. Inline elements do not occupy a single line. The width and height are determined by the content and can only accommodate other inline elements.

Sample code:

.show {
  display: inline;
}

4. inline-block

Convert the element to an inline block-level element and display it. Inline block-level elements have the characteristics that block-level elements can set the width and height, and inline elements can accommodate other inline elements.

Sample code:

.show {
  display: inline-block;
}

2. Visibility attribute

The visibility attribute can also be used to control the display mode of elements. Different from display, after using visibility to hide an element, the element still takes up space, but is no longer displayed. The following are several values ​​for the visibility attribute:

1. visible

The element is visible and displayed according to the positioning method.

2. hidden

The element is invisible, but still takes up space. Unlike display:none, the width and height of the element are still valid.

3. collapse

For table elements, the element's border and padding will be ignored, making the table row look like there is no table.

Sample code:

.hide {
  visibility: hidden;
}

3. Opacity attribute

The opacity attribute can achieve the effect of the element gradually disappearing. The value is between 0 and 1, indicating the transparency of the element.

1. 0

Fully transparent, that is, the element is invisible.

2. 1

Fully opaque, that is, the element is completely visible.

3. 0.5

Translucent, that is, the element is partially visible and partially invisible.

When the transparency is 0, the element is not only invisible, but also does not occupy any space. But be careful when using opacity to hide elements. Although it looks hidden, the element is actually still there. If you want the element to not occupy space and be hidden, you need to combine it with other methods such as display:none or visibility:hidden.

Sample code:

.hide {
  opacity: 0;
}

Through the above three methods, elements can be hidden to achieve personalized design requirements. It should be noted that for elements that can be downloaded, such as images, it is not safe to protect intellectual property rights through hiding, and other technologies should be used to achieve protection.

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