Shulou(Shulou.com)06/03 Report--

This article will explain in detail how to hide elements in css. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

Way: 1, set "display:none" statement; 2, set "visibility:hidden" statement; 3, set "opacity:0" statement; 4, set box model attribute to 0; 5, use "position:absolute;top:-9999px;" statement.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

The way css hides elements

Display:none

Setting the display of an element to none is the most common way to hide elements.

.hide {display:none;}

When the element is set to display:none, the element will disappear completely on the page, and the space occupied by the element will be occupied by other elements, which means that it will cause the browser to rearrange and redraw.

Visibility:hidden

Setting the visibility of an element to hidden is also a common way to hide elements. The difference with display:none is that the space occupied by an element remains after the page disappears, so it will only cause the browser to redraw rather than rearrange it.

.hidden {visibility:hidden}

Visibility:hidden is suitable for scenarios where you do not want the page layout to change after the elements are hidden.

Opacity:0

I believe everyone knows that the opacity attribute represents 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 a way to hide the element.

.transparent {opacity:0;}

One thing that this method and visibility:hidden have in common is that the element still occupies space after it is hidden, but we all know that when the transparency is set to 0, the element is just invisible and it is still on the page.

Set the box model property such as height,width to 0

This is a bizarre skill that I summed up. To put it simply, set the properties of the element's margin,border,padding,height and width and other influence element box model to 0. If there are child elements or content in the element, you should also set its overflow:hidden to hide its child elements. This is a kind of magic trick.

.hiddenBox {margin:0; border:0; padding:0; height:0; width:0; overflow:hidden;}

This approach is not practical, and there may be some problems. But usually we use some page effects may be completed in this way, such as jquery slideUp animation, it is to set the overflow:hidden of the element, and then through the timer, constantly set the height,margin-top,margin-bottom,border-top,border-bottom,padding-top,padding-bottom of the element to 0, so as to achieve the effect of slideUp.

Position: absolute, setting element hiding

Span {position: absolute; top:-9999px; left:-9999px;}

Position: absolute, the main principle of setting element hiding is by setting the element's top and left to negative numbers large enough to make it invisible on the screen.

This is the end of this article on "how to hide elements in css". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.