4 Common ways to hide HTML elements using CSS

Source: Internet
Author: User

Today's web design is becoming more dynamic, and we often need to hide certain elements and display them at certain times. We can usually use 4 methods to hide and display elements.

The 4 techniques for displaying and hiding elements each have their own drawbacks, as illustrated below.

In this article, we will use the following HTML code and CSS styles to explain the techniques of 4 hidden 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: hiddenis the first choice for many people to hide an HTML element. As shown in the image on the right, the picture is missing, but there is no space left in the original picture. This property simply hides an element, but the space occupied by the element exists.

Settings visibility: visible can make hidden elements visible.

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

This is a CSS3 property that allows opacity: 0 an element to become completely transparent and thus produce the visibility: hidden same effect. opacityand visibility compared to its advantage is that it can be transition and animate .

You can usually use opacity attributes to make the fade effect of an element.

Settings opacity:1 can make transparent elements visible.

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

The oldest and most standard practice is to set the absolute positioning of elements to hide elements. This technique allows elements to move out of the document stream, above the normal document, and set a large negative position for the element to be left positioned outside the visible area. floatand margin Neither position: absolute can affect the elements, so they are well hidden.

Using this technique is the best way to make linear animations of some elements.

For the element to become visible again, you can increase left the value so that the element appears on the screen.

Display:none
img#dice { display: none; }                             

display: noneis also a very old technology, it is position: absolute a visibility: hidden; compromise method, and the elements will become invisible and will no longer occupy the space of the document.

display: noneUseful when making accordion effects.

Setting an element to display: block or another value can 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 scale attributes to reduce the size of an element until it disappears. However scale opacity: 0 visibility: hidden , as with properties, invisible elements occupy the space of the document.

In the next article, we'll add several more advanced methods of hiding elements that will only work in modern browsers.

4 Common ways to hide HTML elements using CSS

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.