前端之HTML，CSS（九）
CSS高级技巧
CSS用户界面样式
用户界面样式指更改用户操作样式，如更改用户的鼠标样式、表单轮廓等。
鼠标样式cursor
cursor属性具有属性值有：default、pointer、move、text。四种属性值对应鼠标样式为：白色箭头、白色小手、四向箭头、文本键入。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>元素显示与隐藏-测试</title>
</head>
<body>
<ul>
<li style="cursor: default;">
箭头
</li>
<li style="cursor: pointer;">
白色小手
</li>
<li style="cursor: move;">
四向箭头
</li>
<li style="cursor: text;">
文本键入
</li>
</ul>
</body>
</html>
自行查看效果
轮廓线
表单控件在进行文本输入时，表单外边框会变为蓝色，可以使用outline属性对边框进行设置，一般设置取消外边框，即取消轮廓线，outline：none；
取消前
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轮廓线-测试</title>
</head>
<body>
<input type="text" name="">
</body>
</html>
效果
取消后
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轮廓线-测试</title>
<style type="text/css">
input {
outline: none;
}
</style>
</head>
<body>
<input type="text" name="">
</body>
</html>
效果
防止文本域拖拽问题：用textarea设定文本域时，文本域右下角存在阴影小三角，鼠标按住小三角可以拖拽文本域使其大小变化，取消文本域拖拽使用resize属性。
取消文本域拖拽
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轮廓线-测试</title>
<style type="text/css">
textarea {
resize: none; /*取消文本域拖拽*/
outline: none; /*取消轮廓线*/
}
</style>
</head>
<body>
<textarea> </textarea>
</body>
</html>
效果
文字与图片垂直对齐
英文中存在四线三格书写方式，网页中文字也存在这种形式，按照英文书写格式一般字母都是以第三线为基准对齐，按照网页称为四线由上至下为：顶线（top line）、中线（middle line）、基线（base line）、底线（bottom line）。即网页文字和图片均按照基线对齐，但是文字书写中英文g，j，y等会超出基线，不超出底线。对于图片和文字位于一个带边框父盒子中，图片会存在白色缝隙问题。解决方法：改变vertical-align属性的默认属性值baseline，可以设置为top、middle、bottom改变垂直对齐方式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轮廓线-测试</title>
<style type="text/css">
div {
width: 100%;
border: 2px solid red;
}
</style>
</head>
<body>
<div>
<img src="data:images/tb.jpg">my name is snow.
</div>
</body>
</html>
问题
解决方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轮廓线-测试</title>
<style type="text/css">
div {
width: 100%;
border: 2px solid red;
}
div img {
vertical-align: bottom;
}
</style>
</head>
<body>
<div>
<img src="data:images/tb.jpg">my name is snow.
</div>
</body>
</html>
效果
