【CSS】高级技巧-精灵图-字体图标-三角-常用布局技巧-初始化等

1. 精灵图 Sprites

1.1 为什么需要精灵图

• 为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（CSS Sprites、CSS 雪碧）
• 核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了

1.2 使用精灵图Sprites

• 精灵技术主要针对于背景图片使用，就是把多个小背景图片整合到一张大图片中
• 这个大图片称为 Sprites、精灵图、雪碧图
• 移动背景图片位置，此时可以使用background-position
• 移动的距离就是这个目标图片的x和y坐标 （第四象限）
• 一般情况下都是往上往左移动，所以数值都是负值
• 使用精灵图时需要精确测量，每个小背景图片的大小和位置

1.3 示例

width: 100px; /*测量盒子大小*/
height: 112px; 
backgroud: url(images/index.png) no-repeat -327px -142px; /*测量盒子位置*/

2.字体图标 iconfont

2.1 为什么需要字体图标

使用场景：主要用于显示网页中通用、常用的一些小图标

• 精灵图的缺点：

1. 图片文件比较大
2. 图片本身放大和缩小会失真
3. 一旦图片制作完毕想要更换非常复杂

字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。

• 字体图标的优点

1. 轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求
2. 灵活性：本质其实是文字，可以随意改变颜色、产生阴影、透明效果、旋转等
3. 兼容性：几乎支持所有的浏览器

• 字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化

1. 如果遇到一些结构和样式比较简单的小图标，用字体图标
2. 如果遇到一些结构和样式复杂一点的小图片，就用精灵图

2.2 步骤

2.2.1 下载

icomoon.io
www.iconfont.cn

2.2.2 引入

1. 把fonts文件夹放入页面根目录下
2. 在CSS样式中全局声明字体
   复制压缩包里style.css里面的代码到css文件中

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?3u46ev');
  src:  url('fonts/icomoon.eot?3u46ev#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?3u46ev') format('truetype'),
    url('fonts/icomoon.woff?3u46ev') format('woff'),
    url('fonts/icomoon.svg?3u46ev#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

3. 打开demo.html 复制需要的图标（小方框）或者前面的代码加\粘贴到需要的地方
4. 声明字体

font-family: 'icomoon';

2.2.3 追加

上传压缩包中的selection.json，选中想要的新图标，从新下载压缩包，并替换原来的文件即可

3. CSS三角

div {
    width: 0;
    height: 0;
    line-height: 0; /*为了兼容性*/
    font-size: 0;
    border: 10px solid transparent; 
    border-top-color: pink;  /*箭头向下的三角形*/
}

子绝父相 做 小三角

4. CSS用户界面样式

4.1 更改用户的鼠标样式 cursor

选择器 {
    cursor: default; /*默认*/
    cursor: pointer; /*小手*/
    cursor: move;   /*移动*/
    cursor: text;   /*文本光标*/
    cursor: not-allowed; /*禁止*/
}

4.2取消表单轮廓 outline

给表单添加

outline: 0;
outline: none;

可以去掉默认的蓝色边框

4.3防止拖拽文本域 resize

textarea {
    resize: none;
}

5. vertical-align 属性应用

用于设置图片或表单（行内块元素）和文字垂直对齐 middle

vertical-align: baseline; /*默认，元素放置在父元素的基线上*/
vertical-align: top;     /*把元素的顶端于行中最高元素的顶端对齐*/
vertical-align: middle;  /*把此元素放置在父元素的中部*/
vertical-align: bottom;  /*把元素的顶端于行中最低的元素的顶端对齐*/

解决图片底部默认空白缝隙问题

图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐

• 解决方法

1. 给图片添加 vertical-align: middle|top|bottom;
2. 把图片转换成块级元素 display: block;

6. 溢出的文字省略号显示

6.1 单行文本溢出显示省略号

white-space: nowrap;  /*1.先强制一行内显示文本（默认：normal 自动换行）*/ 
overflow: hidden;     /*2.超出的部分隐藏*/
text-overflow: ellipsis; /*文字用省略号代替超出的部分*/

6.2 多行文本溢出显示省略号

适合于webkit浏览器或移动端

overflow: hidden;
text-overflow: ellipsis; 
display: -webkit-box;  /*弹性伸缩盒子模型显示*/
-webkit-line-clamp: 2;   /*限制在一个块元素显示的文本的行数*/
-webkit-box-orinent: vertical; /*设置或检索伸缩盒对象的子元素的排列方式*/

• 推荐让后台人员设置，操作更简单

7. 常见布局技巧

7.1 margin负值的运用

• 让每个盒子margin: -1px; 正好压住相邻盒子边框
• 鼠标经过某个盒子时，提高当前盒子的层级即可（如果没有定位，则加相对定位，如果有定位，则加z-index）

7.2 文字环绕浮动元素

7.3 行内块的巧妙运用

7.4 CSS三角强化

width: 0;
height: 0;
border-color: transparent red transparent transparent;
border-style: solid;
border-width: 22px 8px 0 0;

8. CSS初始化