视频资源：https://www.bilibili.com/video/BV14J4114768?from=search&seid=3842566320098741425
视频记录 250-266
CSS 高级技巧
精灵图
- why: 有效减少服务器接收和发送请求的次数，提高页面的加载速度。
- how: 针对于背景图片使用，将多个小背景图片整合到一张大图片中（大图片被称为精灵图，雪碧图）。
- 移动的距离就是图片的x和y坐标，注意网页中的坐标有所不同。
- 向下、向左移动都是负值。
字体图标
- 精灵图缺点
- 图片比较大
- 图片本身放大和缩小会失真
- 一旦图片制作完成想要更换会很复杂、
- 字体图标解决精灵图的缺点
- 展示的是图标，本质属于字体。
- 轻量级：比图像小，一旦字体加载，图标会立刻渲染，减少了服务器请求。
- 灵活性：本质是文字，可以随意改变颜色、产生阴影、透明效果、旋转等。
- 兼容性：几乎支持所有浏览器。
- 注意：无法替代精灵技术，只是对图标部分技术的提升和优化。
字体图标
- 下载网站1：icommon字库
- 下载网站2：阿里iconfont字库
字体图标的引入
- 第一步：将下载包中的fonts文件夹放在页面根目录，字体文件格式解析
- 第二步：字体声明
/* 字体声明 */
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?p4ssmb');
src: url('fonts/icomoon.eot?p4ssmb#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?p4ssmb') format('truetype'),
url('fonts/icomoon.woff?p4ssmb') format('woff'),
url('fonts/icomoon.svg?p4ssmb#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
- 第三步：使用
- 第四步：字体声明
字体图标追加：压缩包中的selection.json重新上传，选中需要的图标，重新下载压缩包，并替换原来的文件即可。
CSS用户界面样式：更改一些用户操作样式，以便提高更好的用户体验。
- 鼠标样式 cursor
<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>
- 取消表单轮廓
input, textarea {
/* 取消表单轮廓 */
outline: none;
}
<!-- 1. 取消表单轮廓 -->
<input type="text">- 防止拖拽文本域
textarea {
/* 防止拖拽文本域 */
resize: none;
}
<!-- 2. 防止拖拽文本域 -->
<textarea name="" id="" cols="30" rows="10"></textarea>- vertical-align
- 用于设置一个元素的垂直对齐方式，只针对于行内元素或者行内块元素有效，块级元素无法使用。
- 图片、表单属于行内块元素，默认的vertical-align是基线对齐。
<div class="user">
<img src="images/user.png" alt="" style="vertical-align:middle"> Jim and Kate
</div>
图片下面空隙
空隙解决方案
- 第一种：给图片添加vertical-align: middle | top | botton等（推荐）(163网站使用）
- 第二种：将图片转换为块级元素 display:block;（新浪使用）
文字溢出省略号显示
- 单行文本溢出（同时满足3个条件）
- 条件1：强制一行内显示文本：white-space:nowrap; (默认normal自动换行)
- 条件2：超出部分隐藏：overflow:hidden;
- 条件3：文字用省略号替代超出部分：text-overflow: ellipsis;
- 多行本文溢出
- 有较大兼容性问题，适合于webKit浏览器或移动端（移动端大部分是webKit内核）（腾讯案例）
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多行文本溢出显示省略号</title>
<style>
div {
width: 150px;
height: 65px;
background-color: pink;
margin: 100px auto;
overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: box;
/* 限制在一个块元素显示的文本的行数，第2行省略号 */
line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
box-orient: vertical;
}
</style>
</head>
<body>
<div>
啥也不说，此处省略一万字,啥也不说，此处省略一万字此处省略一万字
</div>
</body>
