021 CSS高级特性

一：元素的显示与影藏

1.比较常见的单词

　　dispaly，visibility，overflow

2.display案例

　　如果影藏了，这个元素就看不见了，然后也不保留位置

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         div {
 8             width: 200px;
 9             height: 100px;
10             background-color: pink;
11             /*display: none;*/
12         }
13     </style>
14 </head>
15 <body>
16     <div></div>
17     <h3>123</h3>
18 </body>
19 </html>

　　效果：

　　影藏：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         div {
 8             width: 200px;
 9             height: 100px;
10             background-color: pink;
11             display: none;
12         }
13     </style>
14 </head>
15 <body>
16     <div></div>
17     <h3>123</h3>
18 </body>
19 </html>

　　效果：

3.visibility

　　参数有

　　inherit

　　visible

　　hidden

4.visibility案例

　　影藏之后，位置会留下来。

　　显示案例：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         div {
 8             width: 200px;
 9             height: 100px;
10             background-color: pink;
11             visibility: visible;
12             /*visibility: hidden;*/
13         }
14     </style>
15 </head>
16 <body>
17     <div></div>
18     <h3>123</h3>
19 </body>
20 </html>

　　效果：

　　影藏案例：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         div {
 8             width: 200px;
 9             height: 100px;
10             background-color: pink;
11             /*visibility: visible;*/
12             visibility: hidden;
13         }
14     </style>
15 </head>
16 <body>
17     <div></div>
18     <h3>123</h3>
19 </body>
20 </html>

　　效果：

5.实践

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         a {
 8             display: block;
 9             width: 445px;
10             height: 320px;
11             margin: 50px;
12             position: relative;
13         }
14         .mask {
15             display: none; /*先影藏*/
16             width: 100%;
17             height: 100%;
18             background: rgba(0,0,0,0.4) url(51.png) no-repeat center;
19             position: absolute;
20             top: 0;
21             left: 0;
22         }
23         a:hover .mask{
24             /*鼠标经过a的时候，里面的mask显示*/
25             display: block;
26         }
27     </style>
28 </head>
29 <body>
30     <a href="#">
31         <img src="237.png" width="445" height="320">
32         <div class="mask"></div>
33     </a>
34 </body>
35 </html>

　　效果：

　　鼠标经过：

6.overflow

猜你喜欢