021 CSS高級特性

時間 2019-12-04

標籤 css 高級特性欄目 CSS 简体版

原文原文鏈接

一：元素的顯示與影藏html

1.比較常見的單詞ide

　　dispaly，visibility，overflow優化

2.display案例url

　　若是影藏了，這個元素就看不見了，而後也不保留位置spa

 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>

　　效果：3d

　　影藏：code

 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>

　　效果：orm

3.visibilityhtm

　　參數有blog

　　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溢出

　　屬性

　　visible

　　auto

　　hidden：溢出影藏

　　scroll：無論超出沒超出都顯示滾動條

7.案例

 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: 200px;
10             border: 1px solid red;
11             /*overflow: scroll;*/
12             overflow: visible;
13         }
14     </style>
15 </head>
16 <body>
17     <div>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div>
18 </body>
19 </html>

　　效果：

二：用戶界面樣式

1.鼠標樣式curcor

　　屬性

　　defalt

　　pointer：小手

　　text：變成選擇

　　move：移動的，十字架

2.案例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         li {
 8             cursor: move;
 9         }
10     </style>    
11 </head>
12 <body>
13     <ul>
14         <li>11111111111</li>
15         <li>22222222222</li>
16         <li>333333333</li>
17     </ul>
18 </body>
19 </html>

3.輪廓outline

　　屬性

　　outline-color　

　　outline-style

　　outline-width

4.案例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         input {
 8             
 9         }
10     </style>    
11 </head>
12 <body>
13     <input type="text">
14 </body>
15 </html>

　　效果：

　　去除輪廓：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         input {
 8             outline: none;
 9         }
10     </style>    
11 </head>
12 <body>
13     <input type="text">
14 </body>
15 </html>

　　效果：

　　優化：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         input {
 8             outline: none;
 9             border: 1px solid #ccc;
10             width: 200px;
11             height: 25px;
12             background: url(resize.png) no-repeat 160px center;
13         }
14     </style>    
15 </head>
16 <body>
17     <input type="text">
18 </body>
19 </html>

　　效果：

5.textarea去掉拖拽

　　案例：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8     <textarea name="" id="" cols="60" rows="10"></textarea>
 9 </body>
10 </html>

　　效果：

　　去除案例：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         textarea {
 8             resize: none;
 9         }
10     </style>
11 </head>
12 <body>
13     <textarea name="" id="" cols="60" rows="10"></textarea>
14 </body>
15 </html>

　　效果：

三：垂直居中

1.vertical-align

　　屬性值

　　baseline：默認，文字和圖片基線對齊

　　sub

　　super

　　top

　　text-top

　　middle　　

　　bottom　　

　　text-bottom

2.和基線對齊

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8     <div>
 9         my pictureg
10         <img src="237.png" alt="">
11     </div>
12 </body>
13 </html>

　　效果：

3. 居中

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         img {
 8             vertical-align: middle;
 9         }
10     </style>
11 </head>
12 <body>
13     <div>
14         my pictureg
15         <img src="237.png" alt="">
16     </div>
17 </body>
18 </html>

4.去除圖片底側的空白縫隙

　　由於圖片會和基線對齊

　　解決方式：

　　vertical-align：top

　　display:block

　　案例：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         img {
 8             vertical-align: top;
 9         }
10         div {
11             border: 1px solid red;
12         }
13     </style>
14 </head>
15 <body>
16     <div>
17         my pictureg
18         <img src="237.png" alt="">
19     </div>
20 </body>
21 </html>

　　效果：

四：溢出文字隱藏

1.white-space

　　強制一行顯示內容

　　normal：默認方式

　　nowrap：強制在一行顯示文本，直到文字結束或者遭遇br換行

2.案例

 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: 20px;
10             border: 1px solid red;
11             white-space: nowrap;
12         }
13     </style>
14 
15 </head>
16 <body>
17     <div>諾不移，情不變，纔不會，用一輩子，繞一圈<br>
18     諾不移，情不變，纔不會，用一輩子，繞一圈</div>
19 </body>
20 </html>

3.效果

4.文字溢出

　　超出能夠影藏：overflow：hideden

　　還能夠使用text-overflow

　　屬性有：

　　clip：簡單的裁切

　　ellipsis：省略號，須要配合使用

5.案例

　　下面一行都不能少。

11             text-overflow: ellipsis;
12             white-space: nowrap;
13             overflow: hidden;

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         div {
 8             width: 215px;
 9             height: 20px;
10             border: 1px solid red;
11             text-overflow: ellipsis;
12             white-space: nowrap;
13             overflow: hidden;
14         }
15     </style>
16 
17 </head>
18 <body>
19     <div>諾不移，情不變，纔不會，用一輩子，繞一圈<br>
20     諾不移，情不變，纔不會，用一輩子，繞一圈</div>
21 </body>
22 </html>

　　效果：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。