目录内容
21 用户界面优化
更改一些用户操作样式，提高用户体验，包括：
- 更改用户的鼠标样式
- 去掉表单轮廓
- 防止表单域拖拽
行内元素或者 行内块元素 的垂直对齐方式- 溢出文字用 ... 代替
- 清除盒子边框重叠
- 文字围绕浮动元素
- 利用 行内块元素 进行布局
- 三角形的拓展
21.1 鼠标样式 cursor：pointer;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>
<li style="cursor: not-allowed;">我是鼠标 禁止 样式</li>
</ul>
</body>
</html>
21.2 去掉表单轮廓 outline：none
去掉默认的蓝色边框：
input {outline: none; }
21.3 防止表单域拖拽 resize：none
<head>
<style>
textarea {
outline: none;
resize: none;
}
</style>
</head>
<body>
<textarea name="" id="" cols="30" rows="10"></textarea>
/*在一行写完，否则文字开头有空格 */
</body>
21.4 垂直对齐 Vertical-align
设置 行内元素 或者 行内块元素 的垂直对齐方式
vertical-align : baseline | top | middle | bottom
应用例子1：图片和文字挨在一起时，可以对图片设置 vertical-align: middle;
应用例子2：消除图片下面的空隙（原本是基线对齐）
方法1: 对图片设置 vertical-align: bottom;
方法2: 对图片设置 display: block;
21.5 溢出文字用...代替
21.5.1 单行文本
具体步骤如下：
/*1．强制一行内显示所有文本*/
white-space: nowrap;(默认normal自动换行)
/*2．隐藏超出边框的文字*/
overflow: hidden;
/*3．省略号替代超出的部分*/
text-overflow: ellipsis;
21.5.2 多行文本
此处有较大兼容性问题，适合于webkit浏览器或移动端（移动端大部分是webkit内核），具体步骤如下：
overflow: hidden;
text-overflow: ellipsis;
/*盒子模型转化为弹性伸缩盒子模型*/
display: -webkit-box;
/*块元素中显示省略号的行数*/
-webkit-line-clamp: 2;
/*盒子里所有子元素的排列方式为垂直居中*/
-webkit-box-orient: vertical;
注意：要将盒子高度改成显示省略号处的高度。
21.6 清除盒子边框重叠
当多个盒子在一行内，并且每一个盒子都有边框时，就会发生边框重叠。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul li {
list-style: none; /* 去掉li前面的小圆点 */
float: left;
width: 300px;
height: 300px;
background-color: pink;
border: 1px solid black;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
我们定义5个盒子，这5个盒子都在周围加上一个1像素的边框。
结果，中间的边框为两像素：
我们想要所有的框都为1像素，可以对 li 设置 margin：-1px，把所有的框都左移了1个像素。
21.7 文字围绕浮动元素
针对下图效果，可以对图片设置左浮动（浮动不会遮挡文字）进行制作：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
\* {
margin: 0;
padding: 0;
}
.dahezi {
width: 300px;
height: 80px;
background-color: antiquewhite;
margin: 0 auto;
}
.tupian {
float: left;
}
</style>
</head>
<body>
<div class="dahezi">
<div class="tupian"><img src="images/山.jpg" alt="图片加载不出来" width="120px"></div>
较真丨频繁做核酸引发喉癌鼻咽癌剧增？假的，一次说清三大忧虑
</div>
</body>
我们在一个大盒子中放置了一张图片和一段文字，当图片不加浮动时：
当时当我们给图片这个盒子加上浮动，图片就不占位置了（脱标），这样文字就会向上移，但是由于浮动不会遮挡下面的文字，就会产生文字环绕效果：
21.8 利用行内块元素进行布局
如果想要实现这种效果：
我们可以使用 行内块元素 这种简化方法进行布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
a{
display: inline-block;
width: 20px;
height: 20px;
background-color: pink;
border:1px solid #333;
border-radius: 2px;
text-decoration: none;
text-align: center;
line-height: 20px;
}
</style>
</head>
<body>
<a href="#" class="yemian1">1</a>
<a href="#" class="yemian2">2</a>
<a href="#" class="yemian3">3</a>
<a href="#" class="yemian4">4</a>
<a href="#" class="yemian5">5</a>
<a href="#" class="yemian6">6</a>
<a href="#" class="yemian7">7</a>
<a href="#" class="yemian8">8</a>
<a href="#" class="yemian9">9</a>
<a href="#" class="yemian10">10</a>
</body>
</html>
定义10个盒子，最后都靠左显示：
但是我们想要将所有的盒子都居中对齐，只需要在父级添加：
body {
text-align: center;
}
注意：text-align：center;可以让所有的行内元素或者行内块元素进行居中对齐
21.9 三角形的拓展
制作这种三角形的方法：
div {
width: 0;
height: 0;
border-color: transparent red transparent transparent;
border-style: solid;
border-width: 50px 100px 0 0;
}
制作梯形的方法：上面的三角形右边再放一个矩形
22 css初始化！
为何需要进行初始化？
不同浏览器对于一开始的效果是不同的，如：有的链接一开始有斜体，有的没有，有的背景为灰色，有的为黑色等。我们需要将这些固定下来。清除浏览器给某些元素的预定义样式。
<style>
/* 把所有的标签的内外边距清零 */
* {
margin: 0;
padding: 0;
}
/* 将默认为斜体的文字变为正常 */
em,
i {
font-style: normal;
}
/* 去掉li的小圆点 */
li {
list-style: none;
}
img {
/* border:0;照顾低版本浏览器，如果图片外边包含了链接会有边框的问题 */
border: 0;
/* 取消图片底侧有空白缝隙的问题 */
vertical-align: middle;
}
/* 当我们鼠标经过按钮时，鼠标样式会变成小手 */
button {
cursor: pointer;
}
/* 改变链接的颜色，去除链接的下划线 */
a {
color: #666;
text-decoration: none;
}
/* 在鼠标经过链接时，链接改变颜色 */
a:hover {
color: :#c81623;
}
/* 声明整个页面的背景和字体 */
body {
/* 字体抗锯齿，当字体放大时，不会产生锯齿 */
-webkit-font-smoothing: antialiased;
background-color: #fff;
font: 12px/1.5 Microsoft YaHei, HeiTi SC, tahoma, arial;
color: #666;
}
/* 清除浮动 */
.clearfix:after {
visibility: hidden;
clear: both;
display: block;
content: ".";
height: 0;
}
</style>
注意：所有的html文档一开始都需要进行初始化!