文本隐藏、垂直居中
文本隐藏
文本隐藏的必要三行代码：
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;其实第三行代码是可以省略的，在实际的操作过程中犯了一个错误就是省略了第二行代码（overflow:hidden;），一时想不开啊，写了一三行代码，查效果，看不到想要的效果，来回倒腾text-overflow的属性值一会clip一会ellipsis，但是文字一直超格单行显示，后面又去改white-space的属性值，仍旧看不到想要的效果。最后打开了教学视屏看到关键处豁然开朗。有些累，但感觉不错。
垂直居中
vertical-align，为的是处理图片和表格等行内块元素与文字的对齐方式用的属性值有baseline、top、bottom、middle.
鼠标样式
cursor是用来改变鼠标样式的，常见的四个属性值是：default、point、move、text四个
下面是上面三个知识点的应用：
<!doctype html>
<html lang="zh-CN">
<head>
<title>显示与隐藏</title>
<meta charset="utf-8" />
<style>
*{
margin: 0;
padding: 0;
}
img{
width:20px;
}
p{
display:block;
background:rgba(255,0,0,.3) ;
width:300px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.cursora{
cursor:default;
}
.cursora img{
vertical-align:baseline;
}
.cursorb{
cursor:pointer;
}
.cursorb img{
vertical-align:top;
}
.cursorc{
cursor:text;
}
.cursorc img{
vertical-align:middle;
}
.cursord{
cursor:move;
}
.cursord img{
vertical-align:bottom;
}
.outline{
outline:none;
}
.resize{
width:120px;
height:80px;
/*resize:none;*/
outline:#0ff solid 1px;
}
</style>
</head>
<body>
<p class="cursora">这是<img src="img/3.jpg">小白张雨生唐吉可得 尼贝尔马兰红个包的张雨生唐吉可得 尼贝尔马兰红个包的 张雨生唐吉可得 尼贝尔马兰红个包的</p>
<p class="cursorb">这是<img src="img/2.jpg">小手 张雨生唐吉可得 尼贝尔马兰红个包的张雨生唐吉可得 尼贝尔马兰红个包的张雨生唐吉可得 尼贝尔马兰红个包的</p>
<p class="cursorc">这是<img src="img/3.jpg">文本张雨生唐吉可得 尼贝尔马兰红个包的张雨生唐吉可得 尼贝尔马兰红个包的张雨生唐吉可得 尼贝尔马兰红个包的 </p>
<p class="cursord">这是<img src="img/2.jpg">移动张雨生唐吉可得 尼贝尔马兰红个包的张雨生唐吉可得 尼贝尔马兰红个包的张雨生唐吉可得 尼贝尔马兰红个包的 </p>
<input type="text" class="outline" />
<textarea class="resize">bodycolor</textarea>
</body>
</html>
415
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
