在开发中 , 经常需要使用到 元素的显示 与 隐藏 ,
控制 元素的 显示 与 隐藏 的样式有如下三种 :
为标签元素设置
display: none
可以 隐藏该元素 ;
如果想要 显示该对象 , 为该元素设置
display: block
即可 ;
设置 display: block
可以显示元素 , 同时该样式还可以将元素转为块元素 ;
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用 diaplay 显示 / 隐藏元素</title>
<style>
.one {
/* 显示元素 / 转为块元素 */
display: block;
width: 200px;
height: 200px;
background-color: pink;
}
.two {
width: 300px;
height: 300px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>
</html>
显示效果 :
使用 display 隐藏元素 , 该元素就会从标准流中脱离 , 后面的元素会顶上 ;
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用 diaplay 显示 / 隐藏元素</title>
<style>
.one {
/* 隐藏元素 */
display: none;
width: 200px;
height: 200px;
background-color: pink;
}
.two {
width: 300px;
height: 300px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>
</html>
显示效果 :
进入调试模式 , 可以看到 , 该元素在界面中还在 , 只是隐藏了 ;
visibility 的属性值 默认为 inherit , 继承自父元素 , 一般默认都是可见的 ; 一般情况下父元素设置不可见 , 子元素也同时不可见 ;
visibility 设置属性值 visible , 表示该元素是可见的 ;
visibility 设置属性值 hidden , 表示该元素是隐藏的 ;
visibility 显示对象 , 为其设置 visible 属性值即可 , 一般对象默认也是显示的 ;
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用 visibility 显示 / 隐藏元素</title>
<style>
.one {
/* 显示元素 */
visibility: visible;
width: 200px;
height: 200px;
background-color: pink;
}
.two {
width: 300px;
height: 300px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>
</html>
显示效果 :
visibility 隐藏对象 , 但是位置仍然保留 , 后续元素无法将其原来的位置覆盖 ;
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用 visibility 显示 / 隐藏元素</title>
<style>
.one {
/* 隐藏元素 */
visibility: hidden;
width: 200px;
height: 200px;
background-color: pink;
}
.two {
width: 300px;
height: 300px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>
</html>
执行结果 :
overflow 只能对超出部分隐藏代码 ;
overflow 可设置的值 :
效果参考 【CSS】清除浮动 ② ( 清除浮动 - 父级元素设置 overflow 样式 | overflow 属性样式效果 | 溢出隐藏效果 | 垂直进度条效果 | 水平垂直进度条效果 ) 博客 ;