css is not visible-Front-end Q&A-php.cn

CSS can not only make web pages beautiful, but also achieve many interesting interactive effects. However, in CSS, there are some styles that are invisible but are also very important. This article will explore invisible styles in CSS and their applications.

1. display:none

display:none is one of the most common invisible styles in CSS. It allows elements to completely disappear without taking up any space. Specifically, when display:none is used, the element will not be rendered, nor will it occupy any space, so no trace of it will be visible on the page.

This style is often used to control the visibility of web pages. For example, there are some functions in the web page that need to be displayed under specific conditions. In this case, the display attribute of the element can be controlled through JS so that it is displayed when specific conditions are met and hidden when they are not.

2. visibility:hidden

visibility:hidden is somewhat similar to display:none. They can both make an element invisible. However, the difference between visibility:hidden and display:none is that although the visibility:hidden element is invisible, it still occupies space, so there will be an invisible but existing element on the page occupying the corresponding position.

This style is sometimes used to control effects related to CSS animations. For example, when implementing a fade-in and fade-out animation, to delay loading some elements, you can first use visibility:hidden to hide them, and then change their visibility property to visible when they need to be displayed, so that the animation effect can be achieved.

3. Opacity:0

opacity:0 is another invisible style. It makes the element completely transparent and takes up no space, but still exists. Unlike display:none and visibility:hidden, this style makes the element transparent but still retains its size and position information.

This style is very common when implementing some animation effects. For example, to achieve a fade-out effect from opaque to transparent, you can first set the opacity attribute of the element to 1, and then dynamically change its opacity value from 1 to 0 through JS, thereby achieving the fade-out effect.

4. height:0;width:0

height:0;width:0 is an invisible but very useful style in CSS. It can turn elements into an invisible, silent existence. Different from the styles introduced above, this style does not just make the element invisible, but also completely erases the space occupied by the element.

This style is very useful when achieving some specific effects. For example, when implementing some indicators or small icons, you can first define an empty

element, and then set its height and width to 0, so that it becomes an invisible small box. When you need to display indicators or icons, just fill in the corresponding content.

5. position:absolute;top:-9999px;left:-9999px

position:absolute;top:-9999px;left:-9999px This is the most mysterious invisible style in CSS , which completely hides the element and no trace of it can be seen even in the HTML source code.

There are many usage scenarios for this style. For example, when implementing a floating pop-up box in some web pages, you can use this style to hide the pop-up box first, and then display it when the user clicks a button or triggers an event.

The above are some common invisible styles and their applications in CSS. Although these styles are invisible, they play a very important role in web development and bring us more design and interaction flexibility.

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