这是我参与「第四届青训营 」笔记创作活动的第16天。
精灵图
精灵技术目的： 为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度。
精灵图(sprites)的使用：
- 精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到张大图片中。
- 这个大图片也称为sprites精灵图或者雪碧图
- 移动背景图片位置，此时可以使用
background-position。 - 移动的距离就是这个目标图片的x和y坐标。注意网页中的坐标有所不同
- 因为一般情况下都是往上往左移动，所以数值是负值。
- 使用精灵图的时候需要精确测量，每个小背景图片的大小和位置。
精灵图缺点：
- 图片文件还是比较大的。
- 图片本身放大和缩小会失真。
- 一旦图片制作完毕想要更换非常复杂。
字体图标
字体图标使用场景：主要用于显示网页中通用、常用的一些小图标。 字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。
字体图标的优点：
- 轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求。
- 灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等。
- 兼容性：几乎支持所有的浏览器。
字体图标是一些网页常见的小图标，直接网上下载即可。
三角
div {
width: 0;
height: 0;
line-height: 0;
font-size: 0;
border: 50px solid transparent;
border-left-color: red;
}
width: 0;
height: 0;
border-color: transparent red transparent transparent;
border-style: solid;
border-width: 100px 50px 0 0;
鼠标样式
li { cursor: pointer; }
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
| 属性值 | 描述 |
|---|---|
default | 小白默认 |
pointer | 小手 |
move | 移动 |
text | 文本 |
not-allowed | 禁止 |
轮廓线outline
给表单添加outline: 0或者outline: none样式之后，就可以去掉默认的蓝色边框。
input { outline: none; }
防止拖拽文本域resize
设置文本域右下角不可以拖拽：
textarea { resize: none; }
行内块和文字垂直居中对齐
vertical-align属性使用场景：经常用于设置图片或者表单（行内块元素）和文字垂直对齐。只针对于行内元素或者行内块元素有效。
vertical-align: baseline | top | middle | bottom;
| 值 | 描述 |
|---|---|
| baseline | 默认。元素放置在父元素的基线上。 |
| top | 把元素的顶端与行中最高元素的顶端对齐 |
| middle | 把此元素放置在父元素的中部。 |
| bottom | 把元素的顶端与行中最低的元素的顶端对齐。 |
解决图片底部默认空白缝隙问题
图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。
主要解决方法有两种：
- 给图片添加
vertical-align: middle | top | bottom等。- 把图片转换为块级元素
display:block。
文本溢出显示省略号
单行文本溢出显示省略号：
/* 先强制一行内显示文本，(默认normal自动换行) */
white-space: nowrap;
/* 超出的部分隐藏 */
overflow: hidden;
/* 文字用省略号替代超出的部分 */
text-overflow: ellipsis;
多行文本溢出显示省略号： 多行文本溢出显示省略号，有较大兼容性问题，适合于webKit浏览器或移动端。
overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;
margin的巧妙运用
- 让每个盒子
margin往左侧移动-1px，可以压住相邻盒子边框。 - 鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有有定位，则功加相对定位（保留位置），如果有定位，则加
z-index)。
