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

This article mainly introduces the css hidden elements of what methods, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian with you to understand.

One way for css to hide elements: use the opacity attribute

The opacity property means to retrieve or set the opacity of an object when its transparency is zero, it visually disappears, but it still occupies that position and has an effect on the layout of the page. It will also respond to user interaction. The background and element content of an element with an opacity attribute will also change.

.hide {

Opacity:0

}

Description: we can use the opacity property to achieve some great animation effects.

Note: this property is compatible with browsers above IE9, and IE8 and earlier versions support alternative filter attributes, such as filter:Alpha (opacity=50).

Css's second way to hide elements: use the display attribute

The display attribute is the real hidden element. When the display attribute of the element is none, the element will disappear from vision, and even the box model will not be generated. It will not occupy any place on the page, not only that, but even its child elements will disappear from the box model.

.hide {

Display:none

}

Description: any animation interaction you add to him and its child elements will not work.

The third way for css to hide elements: use the visibility attribute

The visibility attribute is similar to the opacity attribute. When the value of the attribute is hidden, the element will be hidden, occupy its own position, and have an effect on the layout of the web page. The only difference from opacity is that it does not respond to any user interaction. In addition, elements are also hidden in screen reading software.

.hide {

Visibility:hidden

}

Description: this property can also achieve animation, as long as its initial and end states are not the same. This ensures that the transition animation between visibility state switches can be time-smooth.

Css's fourth way to hide elements: use the position attribute

The meaning of the position attribute is to move the element out of the flow of the document out of the visual area, adding the attribute without affecting the layout and keeping the element operational. After applying this attribute, it is mainly through the control direction (top,left,right,bottom) to reach a certain value and leave the current page.

.hide {

Position:absolute

Top:-9999px

Left:-9999px

}

Note: avoid using this method to hide any element that can gain focus, because if you do, it will result in an unpredictable focus switch when the user gives that element focus. This method is often used when creating custom check boxes and radio buttons.

Thank you for reading this article carefully. I hope the article "what are the ways to hide the elements of css" shared by the editor will be helpful to you? at the same time, I also hope that you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

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.