visibility
CSS visibility Property
The visibility property is used to specify the element that should be visible or hidden to the user.
It has the following values: visible, hidden and collapses.
When the element is set to “hidden”, the content of that tag becomes fully transparent, but it will display the place of it. But the descendant elements of the hidden element can be visible if visibility:visible is applied to them.
If the value of the visibility property is set to “collapse”, it can be used in Flexbox.
Some browsers do not use “collapse” value.
| 类目 | 类目 |
|---|---|
| Initial Value | visible |
| Applies to | All elements. |
| Inherited | Yes. |
| Animatable | Yes. |
| Version | CSS2 |
| DOM Syntax | Object.style.visibility = “collapse”; |
Syntax
Syntax
visibility: visible | hidden | collapse | initial | inherit;
Example of the visibility property with the “hidden” value:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
visibility: hidden;
}
</style>
</head>
<body>
<h2>Visibility property example.</h2>
<div>Here is some text for example.</div>
<p>Text, which will not be displayed in browser.</p>
<div>
You see space above this sentence, but actually there is some text, which has visibility property with hidden value.
</div>
</body>
</html>
Result
Example of the visibility property with the “visible” and “hidden” values:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.test1 {
visibility: visible;
}
.test2 {
visibility: hidden;
}
</style>
</head>
<body>
<h2>Visibility property example</h2>
<p class="test1">Lorem Ipsum is simply dummy text.</p>
<p class="test2">Lorem Ipsum is simply dummy text.</p>
<p>The space above is a hidden text.</p>
</body>
</html>
Example of the visibility property with the “collapse” value:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.collapse {
visibility: collapse;
}
table {
border: 2px solid #666;
}
td {
border: 1px solid #ccc;
}
</style>
</head>
<body>
<h2>Visibility property example</h2>
<p>Here the "collapse" value is applied.</p>
<table>
<tr>
<td>10</td>
<td class="collapse">100</td>
<td>1000</td>
</tr>
<tr>
<td>20</td>
<td>200</td>
<td>2000</td>
</tr>
<tr class="collapse">
<td>30</td>
<td>300</td>
<td>3000</td>
</tr>
<tr>
<td>40</td>
<td>400</td>
<td>4000</td>
</tr>
</table>
</body>
</html>
Values
Values
| Value | Description | Play it |
|---|---|---|
| visible | In this case the tag is visible. This is the default value of this property. | Play it » |
| hidden | This value only visually hides the elements. | Play it » |
| collapse | Used with particular table elements (rows, row groups, columns, column groups) to remove entire rows or columns. This value has the same meaning as “hidden” when used with other elements. | Play it » |
| initial | Makes the property use its default value. | Play it » |
| inherit | Inherits the property from its parents element. |