元素的显示与隐藏
CSS中有三个显示和隐藏常见分别是 display visibility 和 overflow。
display 显示
display 设置或检索对象是否及如何显示。
display : none 隐藏对象
相反的是 display:block 除了转换为块级元素之外,同时还有显示元素的意思。
特点: 隐藏之后,不再保留位置。
visibility 可见性
设置或检索是否显示对象。
visible : 对象可视
hidden : 对象隐藏
特点: 隐藏之后,继续保留原有位置。
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
/* 显示元素 */
/* display: block; */
/* 隐藏元素,不占位置 */
/* display: none; */
/* 显示元素 */
/* visibility: visible; */
/* 隐藏元素但是占据位置 */
visibility: hidden;
}
p {
width: 100px;
height: 100px;
background-color: purple;
}
</style>
</head>
<body>
<div></div>
<p>测试一下测试一下测试一下测试一下测试一下测试一下</p>
</body>