界面样式
所谓的界面样式，就是更改一些用户的操作样式，进而提供更好的用户体验。
其中说一下常用的三种。
- 更改用户的鼠标样式。
- 表单的轮廓。
- 防止表单域拖拽
鼠标样式 cursor
有很多属性，就聊一下常用的几个：
| 属性 | 描述 |
|---|---|
| default | 默认 |
| pointer | 小手 |
| move | 移动 |
| text | 文本 |
| not-allowed | 禁止 |
演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试文档</title>
</head>
<body>
<li style="cursor:default;">这是一个默认</li>
<hr>
<li style="cursor:pointer;">这是一个小手</li>
<hr>
<li style="cursor: move;">这是一个可以移动</li>
<hr>
<li style="cursor: text;} ">这是一个文本</li>
<hr>
<li style=" cursor: not-allowed;} ">这是一个禁止</li>
</body>
</html>
轮廓线 outline
先演示情况：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试文档</title>
</head>
<body>
<input type="text">
<input type="text">
</body>
</html>
发现我用使用鼠标移动上去的时候发现其边框颜色变了，在开发中其中会将其取消。
然后我们看一下outline的属性；
看出其三个设置，其实很像是border的设置了，其实除了属性名不一样，其里面的写的属性值几乎一样。所以不在截图，取消这个轮廓线很吉安的。
outline:none;/*一般写这个。*/
/*或者*/
outline-style:none;
演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试文档</title>
<style>
input{
outline: none;
}
</style>
</head>
<body>
<div>
<input type="text">
<input type="text">
</div>
</body>
</html>
防止拖拽文本域 resize
先看官方文档：
比如有些标签textarea定义后可以拖拽。哪怕你定义了高度，所以
resize:none;
演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试文档</title>
<style>
input textarea{
outline: none;
}
#t2{
resize: none;
}
</style>
</head>
<body>
<div>
<input type="text">
<textarea id="t1" rows="10" cols="10"></textarea>
<textarea id="t2" rows="10" cols="10"></textarea>
</div>
</body>
</html>
实现行内块和文字垂直居中
很多时候比如文字和图片在一个盒子里面，需要垂直居中的时候就需要vertical-align。
官方解释：用于设置一个元素的垂直对齐方式，但是它针对于行内元素或者行内元素有效。
其中常用的有以下几个：
| 属性值 | 描述 |
|---|---|
| baseline | 默认，元素放置在父类元素的基线上。 |
| top | 把元素的顶端于行内中最高元素的顶端对齐。 |
| middle | 把此元素放在父元素的中部。 |
| bottom | 把元素的顶端与行中最低的元素的顶端对齐。 |
现在理解以下这几个线：
简单看一下所谓底线和基线有什么区别。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试文档</title>
<style>
div{
width: 600px;
height: 200px;
border: 1px solid black;
}
img{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div>
<img src="jpg/ys.png">这是芭芭拉
</div>
</body>
</html>
可以看出文本是从底线开始的，而图片是从基线开始的。
如果中间对齐呢？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试文档</title>
<style>
div{
width: 600px;
height: 100px;
border: 1px solid black;
}
img{
width: 100px;
height: 100px;
}
.d1{
<!-- 可见文字高度设置没有用，只能对齐文字而已，但是前面有图片了却没有达到自己想要效果-->
line-height: 100px;
}
.d2{
vertical-align: middle;
}
</style>
</head>
<body>
<div class="d1">
<img src="jpg/ys.png">这是芭芭拉
</div>
<hr>
<div >
<img class="d2" src="jpg/ys.png">这是芭芭拉
</div>
<hr>
<img class="d2" src="jpg/ys.png"> <em>这是芭芭拉</em>
</body>
</html>
所以图片，表单都属行内块元素，默认的vertical-align是基线对齐。
取消图片空白缝隙
图片底层会有一个空白缝隙，原因是行内块元素会和文本的基线对齐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试文档</title>
<style>
div{
border: 1px solid black;
}
img{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="d1">
<img src="jpg/ys.png" />
</div>
</body>
</html>
解决方式：
- 直接在父类加一个和图片一样的大小。
- 给图片添加vertical-align：midller|top|bottom等（提倡使用）。
- 将图片转变为块级元素：display:block
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试文档</title>
<style>
div{
border: 1px solid black;
}
img{
width: 100px;
height: 100px;
}
.d1{
width: 100px;
height: 100px;
}
.img1{
vertical-align:top
}
.img2{
display: block;
}
</style>
</head>
<body>
<div class="d1">
<img src="jpg/ys.png" />
</div>
<hr>
<div >
<img class="img1" src="jpg/ys.png" />
</div>
<hr>
<div >
<img class="img2" src="jpg/ys.png" />
</div>
</body>
</html>
1067
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
