原文：https://blog.csdn.net/z_x_qiang/article/details/82765990
1.鼠标样式属性:
1.1 cursor: default 默认的鼠标样式
1.2 cursor:pointer 小手的样子
1.3 cursor：text 勾选文本的样式；
1.4 cursor：move 拖动的样式；
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
ul li:nth-child(1){
cursor: default;
}
ul li:nth-child(2){
cursor: pointer;
}
ul li:nth-child(3){
cursor: text;
}
ul li:nth-child(4){
cursor: move;
}
</style>
</head>
<body>
<ul>
<li>默认</li>
<li>小手</li>
<li>文本</li>
<li>拖动</li>
</ul>
</body>
2.轮廓 outline
比如input默认有一脸色的轮廓线；
和border（边框）很像；
一般情况下都是去掉这种样式的；
input{
outline: 0;/*去除轮廓线*/
}
3.文本区域 textarea
默认是可以拖动改变文本域大小的，在实际开发中是去掉这个属性的；
resize:none;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
textarea{
resize:none
}
</style>
</head>
<body>
<textarea name="" rows="30" cols="10"></textarea>
</body>
</html>
4.垂直对齐
vertical-align ：垂直对齐属性，但是对于块元素是无效的；
有baseline 、top、 middle、bottom 四种对齐方式；
只有对行内元素和行内块才有效，必须保证在一行显示的才行；
控制文字和图片垂直关系；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
img{
vertical-align: middle;
}
textarea{
vertical-align: middle;
}
</style>
</head>
<body>
<img src="img/dongman.gif" />一个gif图片
<hr />
<textarea name="" rows="30" cols="10"></textarea>文本输入区域
</body>
</html>
5.空白缝隙问题：
图片和表单等行内块元素的底线会和父盒子的基线对齐；所以在有些浏览器上回有缝隙；
解决方法：
1.可以显示转换成块元素；
2.默认是vertical-align:baseline；但是这种有缝隙，所以该成top midden bottm都可以解决缝隙问题；
6.文字溢出的处理方案：
6.1 自动换行
work-break：break-all 允许才分单词进行换行；
keep-all 必须是带有连字符才能换行；
6.2 一行显示
while-space：nomal 默认是这样；
while-space：nowrap 强制一行显示；
6.3 省略显示
1.首先要一行显示；强制的 while-space：nowrap；
2.隐藏超出的部分 overflow: hidden;
3.设置省略号 text-overflow: ellipsis;
网友评论