What are the ways to hide elements in css

Method: 1. Set the "display:none" statement; 2. Set the "visibility:hidden" statement; 3. Set the "opacity:0" statement; 4. Set the box model attribute to 0; 5. Use "position:absolute;top:-9999px;" statement.

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

How to hide elements in css

display:none

Setting the display of an element to none is the most commonly used hidden element Methods.

.hide {
    display:none;
}

After setting the element to display:none, the element will disappear completely on the page, and the space originally occupied by the element will be occupied by other elements, which means it will cause the browser to reflow and redraw. .

visibility:hidden

Setting the visibility of an element to hidden is also a commonly used method of hiding elements. The difference from display:none is that after the element disappears from the page, the space it occupies remains. will be retained, so it will only cause the browser to redraw but not reflow.

.hidden{
   visibility:hidden
}

visibility:hidden is suitable for scenarios where you do not want the page layout to change after the element is hidden

opacity:0

The opacity attribute I believe everyone knows that represents the element Transparency, and after setting the transparency of an element to 0, the element is also hidden in the eyes of our users. This is a method of hiding elements.

.transparent {
     opacity:0;
}

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.

Set the box model attributes such as height and width to 0

This is a rather strange technique I summarized. Simply put, it is to set the margin, border, padding, height and width of the element. The attributes that affect the element box model are set to 0. If there are sub-elements or content within the element, its overflow: hidden should also be set to hide its sub-elements. This is a trick.

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

This method is neither practical nor may have some problems. But some page effects we usually use may be completed in this way, such as jquery's slideUp animation, which sets the element's overflow: hidden, and then continuously sets the element's height and margin-top through a timer. , margin-bottom, border-top, border-bottom, padding-top, padding-bottom are 0, thereby achieving the slideUp effect.

position: absolute, set the element to be hidden

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

position: absolute, the main principle of setting the element to be hidden is to set the top and left of the element to a large enough negative number , making it invisible on the screen.

Recommended learning: "css video tutorial"

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