一:元素的显示与影藏
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>
效果:
三:垂直居中
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>
效果: