十六、CSS高级技巧
1.精灵图（精灵技术）
精灵图的作用：
图片精灵技术的作用就是为了减轻服务器负载，提高网页加载速度，将网页需要多个小图片整合成一张大图上。原先需访问多次服务器获取图片，现只获取一张图片即可。
精灵图的使用：
- 精灵技术主要针对与背景图片使用。就是把多个小背景图片整合到一张大图片中。
- 这个大图片也称为 sprites 精灵图或者雪碧图
- 移动背景图片位置，此时可以使用background-position。
- 小盒子与背景图片默认左上角对齐，要显示想要的图片只需要根据小图片在背景图片中的位置去移动背景图片就好。
2.字体图标
子图图标的产生：
以前用精灵图，但是精灵图有如下缺点：
- 图片文件还是比较大的
- 图片本身放大和缩小会失真
- 一旦图片制作完毕想要更换非常复杂
而字体图标（iconfont) 可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。
字体图标优点：
- 轻量级，一个图标字体比一些列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求。
- 灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等
- 兼容性：几乎之车所有的浏览器，请放心使用。
总结
- 如果遇到一些结构和样式比较简单的小图标，就用字体图标。
- 如果遇到一些 结构样式复杂一点的小图片，就用精灵图。
字体图标的下载：
icomoon.io 国外服务器，网速慢
www.iconfont.cn 阿里妈妈，免费且国内
3.CSS三角
CSS三角的做法：
- 如果盒子没有大小，只有边框，怎其边框就是一个个的在其区域内的等腰直角三角形。
- 把其他三个边框变成透明的，就得到了一个三角。
4.用户界面
更改用户鼠标样式 cursor：
cusor -- 光标
| 属性值 | 描述 |
|---|---|
| default | 小白箭头（默认） |
| pointer | 小手 |
| move | 移动 |
| text | 文本 |
| not-allowed | 禁止 |
取消表单轮廓：
outline: 0; 或者 outline: none;
防止文本域拖拽：
resize: none;
5.其他
行内块和文字的对齐方式vertical-align
文字的几条线：
我们一般用vertical-align来设置图片或者表单（行内块元素—）和文字垂直对齐。
| 值 | 描述 |
|---|---|
| baseline | 默认。元素放置在父元素的基线上。 |
| top | 把元素的顶端于行中最高元素的顶端对齐。 |
| middle | 把此元素放置在父元素的中部。 |
| bottom | 把元素的顶端与行中最低元素的顶端对齐。 |
解决图片底部与盒子之间的空白缝隙
vertical-align: bottom;
或者 display: block;
单行文字溢出省略号显示：
必须满足三个条件：
- 先强制一行内显示文本 white-space: nowrap; (默认是normal 即自动换行)
- 超出的部分隐藏 overflow: hidden;
- 文字用省略号替代超出的部分 text-overflow: ellipsis;
多行文字溢出省略号显示：
必须满足五个条件
- overflow: hidden;
- text-overflow: ellipsis;
- 弹性伸缩盒子显示 display: -webkit-box;
- 限制在一个块元素显示的文本行数 -webkit-line-clamp： 2；
- 设置或检索伸缩对象的子元素的排列方式 -webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
webkit-line-clamp: 2;
webkit-box-orient: vertical;
6.常见布局技巧
margin负值应用
应用：将相邻盒子的边框重叠从而使四周都有边框的相邻盒子边框宽度相同
问题：由于边框重叠，用hover时边框显示会不全
解决：hover时加一个相对定位或者用z-index提高其高度。
行内块元素的巧妙应用
只要在父亲盒子内条件text-align：center，盒子内的所有行内块元素都会居中对齐。
页码布局：
CSS三角强化
通过三个边框或者两个边框，再通过改变边框的宽度就可以得到任意的自己想要的直角三角形。
从而得到斜线和尖度不同的指向上或者指向下的三角形。
十七、CSS3
1.CSS3新增选择器
属性选择器
属性选择器可以根据元素特定属性来选择元素。这样就可以不借助于类或者id选择器
| 选择符 | 描述 |
|---|---|
| E[att] | 选择具有att属性的E元素 |
| E[att="val"] | 选择具有att属性并且属性值等于val的E元素 |
| E[att^="val"] | 匹配具有att属性且值以val开头的E元素 |
| E[att$="val"] | 匹配具有att属性且值以val结尾的E元素 |
| E[att*="val"] | 匹配具有att属性且值中还有val的E元素 |
后三个长与calss相结合
当同一类标签有相同的属性又有不同的属性时，可以用这个与class来解决
例：
<div class="d1"></div>
<div class="d2"></div>
E[att^="d"] 就可以选中d1 和 d2
结构伪类选择器
结构伪类选择器主要依据文档结构来选择元素，常用于根据父级选择器里的元素
| E:first-child | 匹配父元素中的第一个元素E |
| E:last-child | 匹配父元素中的最后一个元素E |
| E:nth-child(n) | 匹配父元素中的第n个元素E |
| E:first-of-type | 指定类型E的第一个 |
| E:last-of-type | 指定类型E的最后一个 |
| E:nth-of-type(n) | 指定类型E的第n个 |
more：E:nth-child(n)选择某个父元素的一个或多个特定的子元素
- n可以是数字，关键词和公式
- n如果是数字，就是选择第n个子元素，里面数字从开始
- n可以是关键字，even是偶数，odd是奇数（常用于表格相邻变色）
- n可以是公式， 常见的公式如下（如果n是公式，，则从开始计算，但是第个元素或者超出了元素的个数会被忽略---变量是n，n从零开始递增，直到公式值超出元素个数或小于1）
E:nth-child 和 E:nth-of-type的区别
E:nth-chile的编号顺序是把父元素的所有元素都编上号，如果第n个子元素不是E，则不选择，所以如果有其他类型的子元素会影响选择。常用只含li的列表等等
而E:nth-of-tyoe是给类型是E的子元素编号，所以其他类型的子元素不会影响选择。
伪元素选择器
伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。
| 选择符 | 描述 |
|---|---|
| ::before | 在元素内部的前面插入内容 |
| ::after | 在元素内部的后面插入内容 |
注意：
- before和after创建一个元素，但是属于行内元素（转行内块要加display）
- 新创建的这个元素在文档数中式找不到的，所以我们成为伪元素
- 语法：element::before{}
- before和after必须有content属性（元素内的字，当然，可以为空）
- before在父元素内容的前面创建元素，after在父元素内容的后面插入元素
- 伪元素选择器和标签选择器一样，权重为1
2.伪元素选择器的使用场景
-
配合字体图标
-
仿土豆半透明遮罩效果
-
清除浮动
算是额外标签法的升级优化
.clearfix::after{ content:''; display:block; height:0; clear:both; visibility:hidden; }
3.CSS3盒子模型
CSS3中可以通过box-sizing来指定盒子模型，有两个值：content-box 和 border-box
content-box是默认值，盒子大小为width + padding + border
而box-sizing:border-box 定义盒子的大小为width，padding和border都不会撑大盒子，会向盒子内部扩展。
4.CSS3的其他特性
滤镜 filter
css属性将模糊或颜色偏移等图形效果应用于元素
语法： filter:函数()；
常用： bulr() 函数，表示模糊处理，数值越大越模糊，数值单位是px像素
calc 函数
定义： calc() 此CSS函数让你在声明CSS属性值时执行一些计算
例：width: calc(100%-80px);
运算符为 + - * /
过渡（重点）
- 过度（transition）是CSS3中具有颠覆性的特征之一，我们一颗在不使用Flash动画huoJavaScript的情况下，当元素从一种样式转变为另一种样式时为元素添加效果。
- 过渡动画：是从一个状态渐渐的过渡到另一种状态，可以让页面更好看，更动感十足，虽然低版本浏览器不支持，但是不会影响页面布局。
- 我们现在经常和 hover 一起搭配使用
- 谁做过度给谁加，也就是常给子盒子加。
语法： transition:要过度的属性 花费时间 运动曲线 何时开始
- 属性：想要变化的CSS属性。比如：宽度高度，背景颜色，内外边距等都可以。如果想要让所有的属性都变化过渡，写一个all就可以。
- 花费时间：单位是秒（必须写单位）不如0.5s
- 运动曲线：默认是ease（可以省略）
- 何时开始：单位是秒（必须写单位）可以设置延时触发时间，默认是0s
加多个属性： 如果要变两个属性可以在一个transition中用，隔开或者直接加all
运动曲线：
十八、转换
1.2D转换
转换(transform)是CSS3中具有颠覆性的特征之一，可以实现元素的位移，旋转，伸缩等效果。
- 移动：translate
- 旋转：rotate
- 缩放：scale
translate
算上translate，我们移动一个元素就可以用margin position transform三种方法
语法：transform: translate(x, y);
transform:translateX(x);
transform:translateY(y);
- translate最大的优点：不会影响到其他元素的位置（可以看成图层较高）并且会保留原来的位置，类似于相对定位。
- translate中的百分比单位是相对于自身元素而言的。
- 对行内标签没有效果
应用：让一个盒子水平居中对齐
以前：加绝对定位，top和left都定位到50%，然后再用margin挤一半的盒子的长和宽过去。
现在，依然使用绝对定位，但是后边就用transform:translate(50%, 50%)就好了，就不用再计算长和宽的一半是多少了。
rotate
2D旋转指的是让元素再2维平面内顺时针旋转或者逆时针旋转。
语法：transform:rotate(度数);
- rotate里面跟度数，单位是deg
- 角度为正时，顺时针；负时，逆时针
- 默认旋转的中心时元素的中心点
应用：CSS三角
实心三角和小尖角都可以通过rotate来加工而得
并且可以制作一个鼠标经过，小尖角翻转的效果
设置旋转中心： transform-origin
语法：transform-origin:(x y);
- 注意后面的参数x和y是用空格隔开的
- x y默认旋转的中心点是元素的中心点(50% 50%)
- 还可以给x y设置像素或者方位名词(top bottom left right center)
scale
缩放，顾名思义，就是可以放大和缩小。只要给元素添加上了这个属性就能控制它放大还是缩小。
语法：transform:scale(x, y);
注意：
- 注意其中x，y用逗号分隔 （x是宽，y是高）
- transform:scale(1, 1); 宽和高都放大了一倍，相当于没有放大
- transform:scale(2); 只写一个参数，则第二个参数和第一个参数一样（等比例缩放）
- scale最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子。
- 设置缩放中心也是用 transform-origin:(x y);
优点：
- 不会影响其他盒子，而且可以设置缩放的中心点
2D转换的综合写法：
- 同时使用多个转换，其格式为：transform:translate() rotate() scale();
- 其顺序会影响转换的效果（先旋转会改变坐标方向）
- 当我们同时有位移和其他属性的时候，记得要将位移放在最前（防止因为顺序问题影响结果） 。
