Which property is used to hide in CSS 03/28 Update SLTechnology News&Howtos

Which property is used to hide in CSS

2025-03-28 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

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

This article mainly introduces the relevant knowledge of "which attributes are used for hiding in CSS". The editor shows you the operation process through actual cases. The method of operation is simple and fast, and it is practical. I hope that this article "which attributes are used for hiding in CSS" can help you solve the problem.

For hiding the three attributes: 1, visibility, when the attribute value is "hidden", the position of the hidden element itself; 2, display, when the value is "none", but not the position of the hidden element itself; 3, overflow, when the value is "hidden", you can hide the content beyond the box.

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

Properties and values used to hide in CSS

Visibility:hidden hides the element itself and occupies a place in the web page

Display:none hides the element itself and does not occupy a place in the web page (commonly used)

Overflow:hidden hides the content beyond the box (excess content is hidden but does not occupy space)

Sample 1:display:none does not occupy a position to hide

Hidden element * {/ * remove the default margins of the page * / padding: 0; margin: 0;} .box1 {width: 200px; height: 200px; float: left; background-color: orange; margin: 50px 50px; / * default display, not hidden * / display: block } / * Mouse over box1 to hide box1 * / .box1: hover {display: none;} .box4 {float: left; width: 200px; height: 200px; background-color: pink; margin: 50px 50px;}

Box1

Display: none

Ordinary

Example 2:visibility:hidden, occupies a place to hide

Hidden element * {/ * remove the default margins of the page * / padding: 0; margin: 0;} .box2 {float: left; width: 200px; height: 200px; background-color: skyblue; margin: 50px 50px } / * Mouse over box2 to hide box2 * / .box2: hover {visibility: hidden;} .box4 {float: left; width: 200px; height: 200px; background-color: pink; margin: 50px 50px;}

Box2

Visibility: hidden

Ordinary

The sample 3:overflow:hidden hides the contents beyond the box

Hidden element * {/ * remove the default margins of the page * / padding: 0; margin: 0;} .box3 {float: left; width: 200px; height: 200px; background-color: pink; margin: 50px 50px;} .box4 {float: left; width: 200px Height: 200px; background-color: pink; margin: 50px 50px: hidden;}

Box3

The content is beyond

How many lines will I knock?

Box4

Overflow: the content of hidden; exceeds, and the excess part is hidden.

How many lines will I knock?

This is the end of the content about "which attributes are used to hide in CSS". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.