021 CSS高级特性
Posted juncaoit
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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溢出
属性
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>
效果：
三：
以上是关于021 CSS高级特性的主要内容，如果未能解决你的问题，请参考以下文章
iText7高级教程之html2pdf——2.使用CSS定义样式
iText7高级教程之html2pdf——2.使用CSS定义样式