（九）CSS高级技巧
1、精灵图
网页中有很多小的背景图片，如果每加载一张就与服务器通信一次，就会造成较大的请求压力，降低网页的加载速度。
精灵图原理：
将网页中的一些小背景图整合到一张大图中；
使用时利用 background-position 将大图中要用的小图移动到盒子上作为背景；
由于background-position规定沿x轴向左移动是负值，沿y轴向上移动是负值，所以属性值一般为负。
2、字体图标 iconfont
用字体图标来做结构样式比较简单的图标，可以方便更改大小、颜色等样式，使用起来更灵活；
它是以图标的形式展示，但本质是文字。
（复杂一些的还是用精灵图）
使用步骤：
- 从网站上下载字体图标的文件；
- 将文件中的fonts文件夹复制到当前的页面目录中；
- 将style.css文件中的字体声明复制到页面文档的CSS<style>标签里；
- 在html的主体body中，添加一个span标签，然后将网站上的小图标复制到span标签中；
- 在CSS中给span设置字体 font-family: 'icomoon'；同时也可以设置字体大小和颜色。
3、CSS三角
一个div或span盒子，将其宽度和高度都设为0，然后设置出有宽度的边框，这样四个边的边框都呈现出的是三角形；
如果只需要其中一个方向的三角形，就将边框颜色设为transport，需要留下的那个三角形的颜色设置成其他颜色。
4、CSS用户界面样式
就是在CSS中设置用户的一些操作样式：
鼠标样式属性 cursor
| 属性值 | 描述 |
| default | 默认，小白箭头 |
| pointer | 小手（点击链接） |
| move | 移动十字架 |
| text | 文本 |
| not-allowed | 禁止 |
表单轮廓线属性 outline
input { outline: none; } 或 input { outline: none; } 可以去掉点击表单时默认的蓝色边框。
防止表单文本域被拖拽放大
textarea { resize: none; }
5、vertical-align 属性
根据水平线在一行文字上的位置，规定从上到下顶线（最高元素的顶端）、中线、基线、底线（最低元素的底端）；
vertical-align 属性：
| 属性值 | 描述 |
| baseline | 默认，元素底端放在父元素的基线上 |
| top | 元素的顶端与行中的顶线对齐 |
| middle | 元素放在父元素的中部 |
| bottom | 元素的底端与行中的底线对齐 |
实现行内块和文字垂直居中对齐
给行内块元素（图片、文本域等）设置 vertical-align: middle;
解决图片底部默认的空白缝隙
因为图片是行内块元素，默认是与行内文字的基线对齐，所以底部会有基线与底线之间的缝隙；
解决方法：
- 给图片添加 vertical-align: middle / top / bottom;（提倡）
- 将图片转换为块级元素 display: block;
6、溢出的文字用省略号代替
单行文本
div {
/* 1.先强制让文本在一行上显示 */
/* 默认是自动换行 white-space: normal; */
white-space: nowrap;
/*2. 然后隐藏溢出的部分 */
overflow: hidden;
/* 3.用省略号代替溢出的文字 */
text-overflow: ellipsis;
}多行文本（兼容性问题，只适合webKit浏览器或移动端）
div {
overflow: hidden;
text-overflow: ellipsis;
/* 以弹性伸缩盒子模型来显示 */
display: -webkit-box;
/* 限制文本在块元素内显示的行数 */
-webkit-line-clamp: 2;
/* 设置伸缩盒子的子元素的排列方式 */
-webkit-box-orient: vertical;
}
7、布局技巧
（1）margin负值：
多个盒子向左浮动时，让每个盒子margin-left = -1px;（若边框为1px），就可以压住相邻盒子的边框。
若盒子使用margin负值后，在鼠标经过设置特殊的边框时，被压住的边框就无法设置；
解决：如果盒子没有定位，就在鼠标经过的样式中添加相对定位 position: relative;
如果盒子已经有定位了，就利用 z-index = 1; 提高层级。
（2）文字围绕浮动：
浮动不会压住文字的特性；
旁边的元素添加浮动，文字用标准流就可以实现围绕的效果。
（3）行内块：
实现页面跳转的模块，1、2、3...用行内块盒子（链接）来做，相邻盒子之间有自带的边距，还方便实现水平居中。
（4）CSS三角强化——小直角三角形：
只设置上边框和右边框，下、左边框不要，就有两个直角三角形；
然后通过改变边框的宽度，来改变直角三角形的边长。
8、CSS初始化
是指在文档开头重设浏览器的样式（reset）；
不同浏览器对于标签的默认值不同，为了HTML文档在不同浏览器的兼容性，需要对CSS初始化；
如 * { padding: 0; margin: 0; } 清除所有标签默认的内外边距等。
（十）H5C3新增特性
1、H5新增
（1）语义化标签
<header>头部标签、<nav>导航标签、<article>内容标签、<section>定义文档某个区域、<aside>侧边栏标签、<footer>尾部标签；
语义化标准主要针对搜索引擎，更喜欢在移动端使用；
在IE9中，需要把这些标签元素转换为块级元素。
（2）多媒体标签：
视频标签： < video src = "文件地址" ...> </video>
| 属性 | 属性值 | 描述 |
| autoplay | autoplay | 视频自动播放 |
| controls | controls | 显示播放控件 |
| width / height | 数字px | 设置播放器宽、高度 |
| loop | loop | 循环播放 |
| poster | 图片地址 | 等待加载是的画面图片 |
| muted | muted | 静音播放 |
谷歌浏览器禁用了自动播放的属性，可以添加 muted 属性实现自动播放；
不同浏览器支持的格式不同，视频格式尽量使用mp4。
音频标签： < audio src = "文件地址" ...> </audio>
属性autoplay、controls、loop、muted等与视频标签的相同；
音频格式尽量使用mp3。
（3）表单input类型（type的属性值）
（4）表单属性
| 属性 | 属性值 | 描述 |
| required | required | 表单内容不能为空（search类型） |
| placeholder | 提示文本 | 直接显示的提示信息（search类型） |
| multiple | multiple | 可以选择多个文件提交（文件域 file类型） |
| autofocus | autofocus | 页面加载后光标自动聚焦到表单上 |
| autocomplete | off / on(默认) | 输入时显示出之前输入过的值（search类型，需要有name属性并成功提交过） |
/*CSS可以修改提示文字的颜色*/
input::placeholder {
color: ...;
}
2、CSS3新增
（1）属性选择器
根据元素属性的某些特点来选择元素，与类选择器、伪类选择器一样权重都为10：
| 选择符 | 描述 |
| 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 元素 |
（2）结构伪类选择器
根据文档结构来选择元素，常用于选择父级元素下的子元素：
| 选择符 | 描述 |
| E e:first-child | 选择父元素E中的第一个子元素e |
| E e:last-child | 选择父元素E中的最后一个子元素e |
| E e:nth-child(n) | 选择父元素E中的第n个子元素e |
括号里的 n 可以是数字、关键字和公式：
数字：从1开始计算子元素的排序，如果数字为0或者超出了子元素的个数就会自动忽略；
关键字：even 偶数、odd 奇数；
公式：如2n、2n+1、-n+5(前5个)等，其中n从0开始，每次递增1带入公式。
| 选择符 | 描述 |
| E e:first-of-type | 选择父元素E中指定元素类型e的第一个子元素 |
| E e:last-of-type | 选择父元素E中指定元素类型e的最后一个子元素 |
| E e:nth-of-type(n) | 选择父元素E中指定元素类型e的第n个子元素 |
-child 和 -of-type 的用法类似，但匹配时的区别为：
child 是先对父元素的所有子元素进行排序，找到要选择的第n个子元素，再看该子元素的类型是否与选择符中的e匹配，若不匹配将不选择；
of-type 是先找到选择符中指定e类型的子元素，对它们进行排序，然后再从中选择第n个。
（3）伪元素选择器
利用CSS创建新标签元素，不用在HTML中添加元素，从而简化HTML结构。
| 选择符 | 描述 |
| E::before | 在元素E内部的最前面插入子元素 |
| E::after | 在元素E内部的最后面插入子元素 |
伪元素选择器与标签选择器一样权重为1；
它创建的是行内元素，且必须有 content 属性。
应用场景：
添加字体图标 —— content = '小图标或图标代码'；
清除浮动 —— 利用after伪元素在父盒子内部的后面添加清除浮动的标签；
双伪元素before和after在前后都添加清除标签。（实质都是额外标签法）
（4）盒子模型属性box-sizing
属性值有：
content-box —— 默认，内边距和边框会撑大盒子，盒子大小 = width + padding + border；
border-box —— 内边距和边框不会撑大盒子，盒子大小 = width（padding+border不超过width）；
（5）其他
滤镜属性： filter: 函数();
图片模糊处理 —— filter: blur(5px); 数值越大图片越模糊。
calc函数：
在CSS属性值中执行一些计算，如：
width: calc(100%-80px);
// 设置盒子的宽度总是比它父盒子宽度少80px
calc函数括号里可以进行 +、-、*、/ 运算。
（6）过渡
使元素从一种样式变换到另一种样式的过渡效果，经常和 :hover 鼠标经过一起搭配使用。
transition: 变换的属性1 花费时间 运动曲线 开始时间, ... ;
| 属性值 | 描述 |
| 变化的属性 | 宽高度、背景颜色等等，若所有属性都变化就写 all |
| 花费时间 | 数字 + 单位s |
| 运动曲线 | 可省略，默认 ease(逐渐减速)，还有linear(匀速)、ease-in/out(加速/减速)、ease-in-out(先加速后减速) |
| 开始时间 | 可省略，设置延迟触发时间，数字 + 单位s |
（7）2D转换
转换（transform 属性）：实现元素的位移、旋转、缩放等效果；
特点是添加transform后也不会影响其他盒子的位置 ，但对于行内标签无效；
可以与过渡transition搭配，做出鼠标经过时的动画效果。
位移： transform: translate(x, y+单位px);
translateX(n);
translateY(n);
当x、y是百分比时，代表相对于自身宽度、高度的数值。
旋转： transform: rotate(度数+单位deg);
正值代表顺时针旋转，并且默认以元素的中心点为旋转中心，可以通过设置转换中心来改变。
（下拉小三角符号，可以用正方形边框，然后旋转做出来）
缩放： transform: scale(x, y);
x、y只是数字，不加单位，代表元素本身宽度、高度的倍数；
可以只写一个数字，使宽高度缩放相同的倍数；
缩放的变化也是默认以元素的中心点为中心，可以通过设置转换中心来改变。
设置转换中心： transform-origin: x y;
x、y可以是像素值、百分比或者方位名词。
transform 的综合写法： transform: translate() rotate() scale()...;
属性值的顺序会影响转换的效果；
所以有位移translate转换时，要把它写在最前面。
（8）动画
先定义（类似于 类选择器）：
@keyframes 动画名称{
/* 动画序列 开始状态 */
0% { 样式... }
/* 可以加任意的百分比，设置中间的状态 */
/* 结束状态 */
100% { 样式... }
}/* 另一种写法，from等同于0%，to等同于100% */
@keyframes 动画名称{
from { 样式... }
to { 样式... }
}再使用，在要加动画效果的元素样式中调用动画属性：
div {
/* 调用动画 */
animation-name: 动画名称;
/* 持续时间 */
animation-duration: 持续时间s;
/* 还有很多其他的动画属性 */
}
动画属性的简写：
animation: 动画名称(必写) 持续时间(必写) 运动曲线 何时开始 播放次数 是否反方向 动画起始或结束状态;
不包含animation-play-state，它一般与鼠标经过h配合使用。
animation-timing-function 还有一个属性值为 steps(n)，代表动画分n步变化。
（9）3D转换
位移： transform: translate3d(x, y, z+单位px);
translateX(n);
translateY(n);
translateZ(n);
Z轴方向向外时为正值，向里时为负值；
translateZ后面一般用数字加px单位。
透视： perspective: 数字+px;
其中的数值表示视距，视距越小，元素显示的越大；
透视属性要写在被观察元素的父盒子上面；
在透视值确定不变的情况下，改变translateZ越大，元素显示的越大。
旋转： transform: rotate3d(x, y, z+单位deg); ——x、y、z用0或1表示是否选中，同时选中则用矢量45度表示。
rotateX(度数+deg);
rotateY(度数+deg);
rotateZ(度数+deg);
同时加上透视perspective，才能实现3d旋转的效果；
3D呈现： transform-style: flat; ——默认子元素不开启3d空间；
preserve ——子元素开启3d空间；
也是写在被观察元素的父盒子上面。
10.11
634
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
