显示与隐藏元素
-
- 本质
-
- display
- visibility
- overflow
本质
让一个元素在页面隐藏或者显示出来
display
display用来设置一个元素如何进行显示
display:none ;隐藏元素
display:block;除了转换块元素之外，也用来显示元素
display隐藏元素后，不在占有原来的位置。
visibility
visibility:visiable;元素可视；
visibility:hidden;元素隐藏；
visibility隐藏元素后，继续占有原来的位置。
如果隐藏元素想要原来的位置，就用
visibitily:hidden
如果隐藏元素不想要原来的位置，就用
display:none
(display用处更多)
overflow
默认：visible
scroll:滚动条
auto:在需要的时候增加滚动条（溢出时才显示滚动条）
hidden:溢出隐藏
一般情况下，我们都会把溢出的部分隐藏，因为溢出的部分会影响布局。
但是如果有定位的盒子，慎用overflow:hidden 因为它会隐藏多余的部分
(定位盒子，故意超出的，如若使用hidden,会隐藏)
案例：显示与隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.div1{
display: none;
height: 100px;
width: 100px;
background-color: red;
}
.div2{
height: 444px;
width: 320px;
background-color: blue;
margin: 30px auto;
position: relative;
}
.div2 img{
width: 100%;
height: 100%;
}
.mask{
width: 100%;
height: 100%;
background: rgba(0,0,0,.4) url("水蜜桃.png") no-repeat center center;
position: absolute;
top: 0;
left: 0;
display: none;
}
.div2:hover .mask{
display: block;
}
</style>
<body>
<div class="div1"></div>
<div class="div2" >
<div class="mask">
</div>
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=501511919,1655485510&fm=26&gp=0.jpg" alt="">
</div>
</body>
</html>
![ajax初次实践，为博客增加点赞功能- 后端django[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)