文章目錄
- 1. 元素的顯示與隐藏
-
- 本質:讓一個元素在頁面中隐藏或者顯示出來
- 1.1 display 屬性 ☆☆
- 1.2 visibility 可見性
- 1.3 overflow 溢出
- 2. 綜合案例
-
- 案例:滑鼠經過顯示遮罩
1. 元素的顯示與隐藏
類似網站廣告,當我們點選關閉就不見了,但是我們重新重新整理頁面,會重新出現!
本質:讓一個元素在頁面中隐藏或者顯示出來
-
顯示隐藏display
-
顯示隐藏visibility
-
溢出顯示隐藏overflow
1.1 display 屬性 ☆☆
display 屬性用于設定一個元素應如何顯示
-
:隐藏對象display:none;
-
:除了轉換塊級元素之外,同時還有顯示元素的意思display:block;
- display 隐藏元素後,不再占有原來的位置
示例
- 此屬性在後面應用及其廣泛,搭配 JS 可以做很多的網頁特效
1.2 visibility 可見性
visibility 屬性用于指定一個元素應可見還是隐藏
-
:元素可視visibility: visible;
-
:元素隐藏visibility: hidden;
- visibility 隐藏元素後,繼續占有原來的位置
示例
- 如果隐藏元素且想要原來的位置,就用
visibility: hidden;
- 如果隐藏元素且不想要原來的位置,就用
(用處更多 重點)display: none;
1.3 overflow 溢出
overflow 屬性指定了如果内容溢出一個元素的框(超過其指定高度及寬度) 時,會發生什麼
屬性值 | 描述 |
---|---|
visible | 不剪切内容也不添加滾動條 |
hidden | 不顯示超過對象尺寸的内容,超出的部分隐藏掉 |
scroll | 不管超出内容否,總是顯示滾動條 |
auto | 超出自動顯示滾動條,不超出不顯示滾動條 |
- 一般情況下,我們都不想讓溢出的内容顯示出來,因為溢出的部分會影響布局
- 但是如果有定位的盒子,請慎用
,因為它會隐藏多餘的部分overflow:hidden
2. 綜合案例
案例:滑鼠經過顯示遮罩
- 練習元素的顯示與隐藏
- 練習元素的定位
核心原理: 原先半透明的黑色遮罩看不見, 滑鼠經過大盒子就顯示出來。遮罩的盒子不占有位置, 就需要用絕對定位 和 display 配合使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>遮罩案例</title>
<style>
.tudou {
position: relative;
width: 444px;
height: 320px;
background-color: tomato;
margin: 30px auto;
}
.tudou img {
width: 100%;
height: 100%;
}
.mask {
/* 隐藏遮罩層 */
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .4) url(images/arr.png) no-repeat center;
}
.tudou:hover .mask {
display: block;
}
</style>
</head>
<body>
<div class="tudou">
<div class="mask"></div>
<img src="images/tudou.jpg" alt="">
</div>
</body>
</html>
-
: 滑鼠經過 .tudou 盒子,讓 .mask 遮罩層顯示.tudou:hover .mask