Which property is used to hide in CSS
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?
How many lines will I knock?
How many lines will I knock?
How many lines will I knock?
How many lines will I knock?
How many lines will I knock?
How many lines will I knock?
How many lines will I knock?
How many lines will I knock?
How many lines will I knock?
How many lines will I knock?
How many lines will I knock?
How many lines will I knock?
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?
How many lines will I knock?
How many lines will I knock?
How many lines will I knock?
How many lines will I knock?
How many lines will I knock?
How many lines will I knock?
How many lines will I knock?
How many lines will I knock?
How many lines will I knock?
How many lines will I knock?
How many lines will I knock?
How many lines will I knock?
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.
