- 能够使用精灵图
- 能够使用字体图标
- 能够写出CSS三角
- 能够写出常见的CSS用户界面样式
- 能够说出常见的布局技巧
1. 精灵图
- 为什么需要精灵图？
一个网页中往往会应用很多小的背景图作为修饰，当网页中图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。
因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）。
精灵技术的目的
有效地减少服务器接收和发送请求的次数，提高页面的加载速度。
1.2 精灵图（sprites)的使用
使用精灵图核心：
- 精灵技术主要针对背景图片使用。就是把多个小背景图片整合到一张大图片中。
- 这个大图也称为sprites精灵图或者雪碧图
- 移动背景图片位置，此时可以使用background-position。
- 移动的距离就是这个目标图片的X和Y坐标。注意网页中的坐标有所不同。
- 因为一般情况下都是往上往左移动，所以数值是负值。
- 使用精灵图的时候需要精准测量，每个小背景图片的大小和位置。
使用精灵图核心总结： - 精灵图主要针对于小的背景图片使用。
- 主要借助于背景位置来实现—background-position.
- 一般情况下精灵图都是负值。（
2. 字体图标
2.1 字体图标的产生
字体图标使用场景：主要用于显示网页中通用、常用的一些小图标。
精灵图是有诸多优点的，但是缺点很明显。
- 图片文件比较大。
- 图片本身放大缩小会失真
- 一旦图片制作完毕想要更换非常复杂。
通过字体图标（iconfont)技术，可以很好地解决以上问题。
字体图标可以为前端工程师提供一种高效地图标使用方式，展示的是图标，本质属于字体。
2.2 字体图标的优点
- 轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求。
- 灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等。
- 兼容性：几乎支持所有的浏览器，请放心使用。
注意：字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化。
总结：
- 如果遇到一些结构和样式比较简单的小图标，就用字体图标。
- 如果遇到一些结构和样式复杂一点的小图片，就用精灵图。
2.3字体图标的使用
字体图标是一些网页常见的小图标，我们直接网上下载即可。因此使用可以分为：
- 字体图标的下载
-
字体图标的引入（引入到我们html页面中）
-
打开css文件
- 复制开头文件到被引入的html文件中，注意文件路径
- 字体图标的追加（以后添加新的小图标）
可以将selection.json上传到icomoon当中，就可以在保留已有字体图标的基础上进行添加。
字体图标的下载
- icomoon字库 http://icomoon.io
成立于2011年，推出了第一个自定义图标生成器，它允许用户选择所需要的图标，使它们成一字型。该字库内容种类繁多，非常全面，唯一遗憾就是国外服务器，打开网速慢。 - 阿里 iconfont字库 http://www.iconfont.cn
包含了淘宝图标和阿里妈妈图标库。可以使用AI制作图标上传生成。
3. 等腰三角形
- 设置width:0；heigt:0;
- 设置边框，大小为所需三角形的高，颜色设置为透明：transparent
- 根据所需三角形的方向覆盖设置边框，颜色。
4. CSS用户界面样式
4.0 什么是界面样式
所谓界面样式，就是更改一些用户操作样式，以便提高更好的用户体验。
- 更改用户的鼠标样式
- 表单轮廓
- 防止文本域拖拽
4.1 鼠标样式cursor
li { cursor:pointer;}
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
- default : 小白 默认
- pointer : 小手
- move : 移动
- text : 文本
- not-allowed : 禁止
4.2 轮廓线 outline
给表单添加outline:0;或者outline:none;样式之后，就可以去掉默认的蓝色边框。
input{ outline: none; }
4.3 防止文本域拖拽
用<textarea>标签的表单域默认右下角可以拖拽表单域，这时候需要添加
resize:none
就可以防止文本域的拖拽了；同时它也有轮廓线，也可以用outline:none；去掉。
注意：文本域标签
<textarea name="" id="" cols="30" rows="10"></textarea>
尽量放在一行书写，如果转行，文本域就会出现空白行。
5. vertical-align 属性应用
CSS的vertical-align属性使用场景：经常用于设置图片或者表单（行内块元素）和文字垂直对齐。
官方解释：用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。
语法：
vertical-align : baseline | top | middle | bottom
- baseline : 默认。元素放置在父元素的基线上。
- top : 把元素的顶端与行中最高的元素的顶端对齐。
- middle : 把此元素放置在父元素的中部。
-
bottom : 把元素的顶端与行中最低的元素的顶端对齐。
5.2 解决图片底部默认空白缝隙问题
bug:图片底侧会有一个空白缝隙，原因是行内块元素会和文字基线对齐。
主要解决方法有两种：
- 给图片添加vertical-align：middle|top|bottom等。（提倡使用）
- 把图片转换为块级元素：display:block;
6. 溢出的文字省略号显示
- 单行文本溢出显示省略号
- 多行文本溢出显示省略号
6.1 单行文本溢出显示省略号--必须满足三个条件
- 先强制一行内显示文本
white-space:nowrap;(默认 normal 自动换行） - 超出的部分隐藏
overflow:hidden; - 文字用省略号替代超出的部分
text-overflow:ellipsis;
6.2 多行文本溢出显示省略号
多行文本溢出显示省略号，有较大兼容性问题，适合于webkit浏览器或移动端（移动端大部分是wbkit内核）
overflow:hidden;
text-overflow:ellipsis;
/*弹性伸缩盒子模型显示*/
display:-webkit-box;
/*限制在一个块元素显示的文本的行数*/
-webkit-line-clamp: 2;
/*设置或检索伸缩盒对象的子元素排列方式*/
-webkit-box-orient:vertical;
更推荐让后台人员来做这个效果，因为后台人员可以设置显示多少个字，操作更简单。
7. 常见布局技巧
巧妙利用一个技术更快更好的布局：
- margin负值的运用
- 文字围绕浮动元素
- 行内块的巧妙运用
- css三角强化
7.1 margin负值的运用
- 让每个盒子margin往左侧移动 -1px 正好压住相邻盒子边框
- 鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有定位，则加相对定位（保留位置），如果有定位，则加z-index)
7.2 文字围绕浮动元素
利用浮动文字会围绕元素的原理，在盒子中直接添加文字，然后给对应的图片等块元素添加浮动，文字就会自动围绕元素。
7.3 行内块巧妙运用
行内块元素可以设置text-align来进行居中显示。
7.4 三角巧妙运用
当我们需要做出一个直角三角形，同样可以用边框来实现：
- 给其他边框透明，所需方向边框颜色
- 样式设置为solid
-
将上/下边框调大，左右边框调小
例：
直角三角形
.box1{
width: 0;
height: 0;
/*把上边框宽度调大*/
/*border-top: 100px solid transparent;*/
/*border-right: 50px solid skyblue;*/
/*左边和下边的边框宽度设置为0*/
/*1. 只保留右边的边框有颜色*/
border-color: transparent red transparent transparent;
/*2. 样式都是solid*/
border-style: solid;
/*3. 上边框宽度要大，右边框 宽度稍小， 其余边框改为0*/
border-width: 100px 50px 0 0;
}
同时也可以只设置上边框和右边框，同样可行，如下：
border-top: 100px solid transparent;
border-right: 50px solid skyblue;
8. 初始化
不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对html文本呈现的差异，照顾浏览器的兼容，我们需要对CSS初始化。
简单理解：CSS初始化是指重设浏览器的样式。（也称为CSS reset)
每个网页都必须首先进行CSS初始化。
这里我们以 京东CSS初始化代码为例。
Unicode编码字体：
把中文字体的名称用相应的Unicode编码来替代，这样就可以有效的避免浏览器解释CSS代码时候出现乱码的问题。
比如：
黑体\9ED1\4F53
宋体\5B8B\4F53
微软雅黑\5FAE\8F6F\96C5\9ED1
