How to hide div in css

How to hide divs in css: 1. Hide divs through "display:none"; 2. Hide divs through "visibility:hidden"; 3. Hide divs through "opacity:0".

The operating environment of this article: windows7 system, HTML5&&CSS3 version, DELL G3 computer

How to hide div in css?

Three ways to hide Div in CSS

The display and visibility attributes in CSS can hide and show html elements including div layers

One:

display:none|block
display:none

Hide the html of the file. To be precise, the element is clear in the browser and does not occupy screen space. If there are other elements under it, it will be moved to the space area

display:block

Show hidden html elements

If another element occupies the space, it will move down,

The space will be occupied by the original element again

Two:

visibility:hidden|visible
visibility:hidden

Hide the element, really hide it, but it still occupies that space

visibility:visible

Let the element display

When the visibility attribute of an element is set to the collapse value, For general elements, its behavior is the same as hidden.

1.In chrome, there is no difference between using the collapse value and using hidden.

2. In firefox, opera and IE, there is no difference between using the collapse value and using display: none.

Three:

opacity:0

opacity attribute I believe everyone knows the transparency of the element, and after setting the transparency of the element to 0, the element is also hidden in the eyes of our users, which is considered a A way to hide elements. One thing this method has in common with visibility:hidden is that the element still occupies space after being hidden, but we all know that after setting the transparency to 0, the element is just invisible, and it still exists on the page.

So display and visibility control whether the html element exists and whether it is displayed respectively

The display attribute defines whether the element exists or not

And the visibility attribute only controls the Whether the element is displayed actually still exists

The opacity element is hidden, but it still exists on the page

[Recommended learning: css video tutorial]

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