顯示與隐藏元素
-
- 本質
-
- 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=)