Shulou(Shulou.com)05/31 Report--

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

Show and hide elements 1) display (display)

Display sets or retrieves whether and how objects are displayed.

Display: none Hidden objects, in contrast, display:block not only converts to block-level elements, but also means to display elements.

Features: after being hidden, the position is no longer retained.

Title .dv1 {width: 50px; height: 50px; background-color: blue; display: none;} .dv2 {width: 50px; height: 50px; background-color: red;}

2) visibility (visibility)

Sets or retrieves whether the object is displayed.

Visible: object visual

Hidden: object hidin

Features: after hiding, continue to retain the original position.

Title .dv1 {width: 50px; height: 50px; background-color: blue; visibility: hidden;} .dv2 {width: 50px; height: 50px; background-color: red;}

3) overflow (overflow)

Retrieves or sets how to manage content when the content of an object exceeds its specified height and width.

Visible: do not cut content or add scroll bars (default).

Auto: exceeds the automatic display scroll bar, does not exceed the non-display scroll bar.

Hidden: content that exceeds the size of the object is not displayed, and the excess is hidden.

Scroll: the scroll bar is always displayed regardless of whether the content is exceeded or not.

Title div {width: 100px; height: 100px; background-color: red; float: left; margin-left: 20px;} .dv1 {overflow: visible;} .dv2 {overflow: auto;} .dv3 {overflow: hidden } .dv4 {overflow: scroll } code sea infinite code The sea is boundless, the code sea is boundless.

On "css how to achieve element display and hiding" this article is shared here, 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 out 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.