visibility属性用于指定一个元素应可见还是隐藏。
visibility: visible;
元素可见visibility: hidden;
元素隐藏
visibility隐藏元素后,继续占有原来的位置。
说明:visibility和display的最大的区别是:visibility隐藏元素后继续保留原来的位置,而display隐藏元素后不再保留原来的位置。
所以,如果隐藏元素后想要保留原来的位置,就使用visibility: hidden;
如果隐藏元素后不想要原来的位置,就用display: none;
(在实际中这种用法更多)
示例:两个盒子,隐藏其中一个盒子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
visibility: hidden;
width: 200px;
height: 200px;
background-color: pink;
}
.box2 {
width: 200px;
height: 200px;
background-color: purple;
}
</style>
</head>
<body>
<div class="box1">盒子1</div>
<div class="box2">盒子2</div>
</body>
</html>