How to hide HTML elements using CSS? Four ways to hide HTML elements

Today's web design is becoming more and more dynamic. Sometimes we may need to hide certain elements and display them only when needed. There are four ways we commonly use CSS to hide HTML elements. Each of these four techniques for displaying and hiding elements has their own advantages and disadvantages. Here are some examples.

In this article, we will use the following HTML code and CSS styles to explain 4 techniques of hiding elements.

<p>Dice used for traditional Dungeons ...</p>
<img src="dice.jpg" alt=”Photograph..." id="dice">
<p>The dice are used to determine...</p>

The basic CSS style is as follows:

img#dice { float: right; margin-left: 2em; }

visibility: hidden

img#dice { float: right; margin-left: 2em; visibility: hidden; }

##visibility: hidden is the first choice of many people when hiding an HTML element. As shown in the picture on the right, the picture is missing, but it also leaves a blank area where the original picture was. This attribute simply hides an element, but the space occupied by the element still exists.

Set

visibility: visibleCan make hidden elements visible.

opacity: 0

img#dice { float: right; margin-left: 2em; opacity: 0; }

This is a CSS3 property, set

opacity: 0 You can make an element completely transparent, creating the same effect as visibility: hidden. Compared with visibility, the advantage of opacity is that it can be transition and animate.

You can usually use the

opacity attribute to create the fade-in and fade-out effect of an element.

Setting

opacity:1 can make transparent elements visible.

position: absolute

img#dice { position: absolute; left: -1000px; }

The oldest and most standard approach is to hide the element by setting its absolute positioning . This technique takes the element out of the document flow and puts it above the normal document, and sets a large

left negative value positioning for it, so that the element is positioned outside the visible area. Neither float nor margin can affect elements with position: absolute, so they can be well hidden.

Using this technique is the best way when making linear animations of some elements.

To make the element visible again, increase the value of

left so that the element appears on the screen.

display: none

img#dice { display: none; }

##display: none

is also a very old technology, It is a compromise between position: absolute and visibility: hidden; . The element will become invisible and will no longer occupy the space of the document.

display: none

Very useful when creating an accordion effect. Set the element to

display: block

or other value to make the element visible again. In addition to the 4 methods described above, there are other ways to hide elements, especially when using CSS3. For example: you can use the

scale

attribute to reduce the size of an element until it disappears. But the scale attribute is the same as opacity: 0 and visibility: hidden. Invisible elements will take up space in the document. Related recommendations:

What are the hiding methods of HtmL elements

javascript controls html elements to show/hide implementation code_javascript Skill

The above is the detailed content of How to hide HTML elements using CSS? Four ways to hide HTML elements. For more information, please follow other related articles on the PHP Chinese website!