【待定】、CSS3 详细版

郁子大约 34 分钟约 10189 字

（一）Introduction

1.预处理器(pre-processor)

按照特定的规则编写样式，预处理器会将该样式文件编译成正常规则编写的 CSS 文件
如：less/sass、cssNext 插件
- cssNext 插件是用来实现一些未来标准的样式，暂未完全在各大浏览器中实现

2.后处理器(post-processor)

按照正常规则编写 CSS 文件，后处理器会将该样式文件按照caniuseopen in new window网站的浏览器兼容情况，自动补齐相应的带前缀样式
- -webkit-、-moz-、-o-、-ms-
如：autoprefixer 插件

3.postCss 工具

一种用 JS 实现的 CSS 的抽象语法树(AST, Abstract Syntax Tree)
功能：postCss + 插件（充分体现扩展性）
cssNext 插件和 autoprefixer 插件都是基于 postCss 的 AST 开发的

（二）Selectors

1.关系模式

E + F ：下一个满足条件的兄弟元素节点
E ~ F ：满足条件的所有兄弟（同级）元素节点

2.属性选择器

E[attr~='val'] ：元素 E 有属性 attr 且该属性仅有独立属性值 val 的元素节点（将 attr 类比 class 属性理解）
- 'val'、'val val1'
E[attr|='val'] ：元素 E 有属性 attr 且该属性包含属性值以 val 开头或 val-开头
- 'val'、'val-test'
E[attr^='val'] ：元素 E 有属性 attr 且该属性包含属性值以 val 开头
- 'val'、'valtest'、'val-test'
E[attr$='val'] ：元素 E 有属性 attr 且该属性包含属性值以 val 结尾
- 'testval'
E[attr*='val'] ：元素 E 有属性 attr 且该属性包含属性值含有 val 字符串（无论数量和位置）
- 'testvaltest'、'val'、'valtest'、'testval'、'valvaltest'

3.伪元素选择器

E::placeholder ：只能改变 input 框占位文本的颜色
E::selection ：改变文本选中后的文字颜色、背景颜色、文字阴影

4.伪类选择器

被选中的元素的一种状态

E:not(s) ：选中不符合条件的所有元素节点
- 列表项除了最后一个元素都加上底边框：li:not(:last-of-type)
:root ：选中根标签，在 html 文件中等同于 html 选择器
- 在 xml 等其他文件就不一定是 html
E:target ：选中 a 标签绑定的锚点值
- 选中 id 值等同于 location.hash 值的元素节点
E:first-child ：选中第一个元素 E，计数时考虑其他同级元素
E:last-child ：选中最后一个元素 E，计数时考虑其他同级元素
E:only-child ：选中独生子元素 E，计数时考虑其他同级元素
E:nth-child(n) ：选中第 n(n>=1) 个子元素 E，计数时考虑其他同级元素
E:nth-last-child(n) ：选中第 n(n>=1) 个且是最后一个的子元素 E，计数时考虑其他同级元素
E:first-of-type ：选中第一个和元素 E 同类型的子元素，计数时不考虑其他同级元素
E:last-of-type ：选中最后一个和元素 E 同类型的子元素，计数时不考虑其他同级元素
E:only-of-type ：选中仅有一个和元素 E 同类型的子元素，计数时不考虑其他同级元素
- 可以有其他类型的，但是元素 E 同类型的只能有一个
E:nth-of-type(n) ：选中第 n(n>=1) 个和元素 E 同类型的子元素，计数时不考虑其他同级元素
E:nth-of-last-type(n) ：选中第 n(n>=1) 个且是最后一个的和元素 E 同类型的子元素，计数时不考虑其他同级元素
E:empty ：选中没有内容或只有注释的元素 E
E:checked ：选中处于勾选状态的表单元素 E
E:enabled ：选中非禁用的元素 E
E:disabled ：选中禁用状态的元素 E
E:read-only ：选中只读状态的元素 E
E:read-write ：选中非只读状态的元素 E

（三）Border & Background

1.边框圆角 `border-radius`

div {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  position: absolute;
  left: calc(50% - 50px);
  top: calc(50% - 50px);

  border-radius: 10px; /* 简写1:四个角等幅度 */

  border-radius: 10px 20px; /* 左上右下 右上左下 */
  border-radius: 10px 20px 30px; /* 左上 右上左下 右下 */
  border-radius: 10px 20px 30px 40px; /* 左上 右上 右下 左下 */

  border-top-left-radius: 10px; /* 左上 */
  border-top-right-radius: 20px; /* 右上 */
  border-bottom-right-radius: 30px; /* 右下 */
  border-bottom-left-radius: 40px; /* 左下 */

  border-top-left-radius: 10px 10px; /* 左上（椭圆长半径/水平方向 椭圆短半径/垂直方向） */
  border-top-right-radius: 20px 20px; /* 右上（椭圆长半径/水平方向 椭圆短半径/垂直方向） */
  border-bottom-right-radius: 30px 30px; /* 右下（椭圆长半径/水平方向 椭圆短半径/垂直方向） */
  border-bottom-left-radius: 40px 40px; /* 左下（椭圆长半径/水平方向 椭圆短半径/垂直方向） */

  border-radius: 10px 20px 30px 40px / 10px 20px 30px 40px; /* 水平/垂直 */
}

2.边框阴影 `box-shadow`

外阴影：box-shadow: 水平偏移量垂直偏移量边框模糊度边框扩散度阴影颜色值;
- 边框模糊度：基于边框线往其两侧模糊
内阴影：box-shadow: inset 水平偏移量垂直偏移量边框模糊度边框扩散度阴影颜色值;

/* 多阴影 */
box-shadow:
  inset 0px 0px 10px #fff,
  3px 0px 10px #f0f,
  0px -3px 10px #0ff,
  -3px 0px 10px #00f,
  0px 3px 10px #ff0;

3.边框图片 `border-image`

支持图片填充和渐变填充

border-image-source: linear-gradient(red, yellow);
border-image-slice: 10;
border-image-repeat: stretch;
border-image-outset: 100px;
border-image-width: 50px;

1）`border-image-slice` 截取

属性值为数字或百分比 border-image-slice: 100
四个值对应 top、right、bottom、left 分割线
将边框分割为九宫格，图片/渐变将平均分配到 1-8 格，中心第 9 格不填充
默认值为 100%【病态填充】
- 此时 top 在边框底部，right 在边框左侧，bottom 在边框顶部，left 在边框右侧
- 即边框右上角对应 top、right 的夹角，此时变为全图，以此类推
- 所以 5、6、7、8 四个格子没有对应的填充区域，自动填充空白，仅有四个角有边框填充
属性值加上 fill 表示将内容区也填充 border-image-slice: 100 100 fill;
- 一般不设置，效果和直接设置背景图片是一样的

2）`border-image-outset` 延伸

不能填负值
表示填充区域自边框线往外延伸的值

3）`border-image-width` 填充宽度

表示图片/渐变占边框区域的宽度
默认值 1，占填充区域的 1 倍宽 => 1 * 100px（宽度）
值为 auto 时，取 slice 属性值再加上 px

border-image-slice: 100;
border-image-width: auto;

=> border-image-width: 100px;

4）`border-image-repeat` 重复

设置的是 5、6、7、8 四个格子如何填充
- stretch ：默认值，填充内容不够时拉伸
- repeat ：填充内容不够时重复平铺，平铺的内容平均填充在格子的左右两边
- round ：填充内容不够时重复平铺，当格子宽度不足平铺填充元素的宽度时内容拉伸，格子宽度成平铺填充元素倍数时内容平铺
- space ：填充内容不够时重复平铺，当格子宽度不足平铺填充元素的宽度时用间隙填充，格子宽度成平铺填充元素倍数时内容平铺
可以填两个属性值，表示水平和垂直方向上的重复状态 border-image-repeat: round stretch;

4.背景图片 `background-image`

可以引入多张背景图片
- background-image: url(), url();
- 一般用于第一个 url 较大的图片（请求）未加载出来时，显示第二个 url 较小的图片（本地）
可以填充渐变
- background-image: linear-gradient(red, yellow);
- background-image: radial-gradient(red, yellow);

5.背景起始填充位置 `background-origin`

border-box ：从 border 左上角开始向内往右下角填充
padding-box ：从 padding 左上角开始向内往右下角填充（默认值）
content-box ：从 content 左上角开始向内往右下角填充

6.背景填充区域 `background-position`

相对 origin
origin 左上角即 position 的原点 (0, 0)

7.背景填充剪切 `background-clip`

设置背景填充区域到哪里截止
border-box ：填充到 border 右下角（默认值）
padding-box ：填充到 padding 右下角
content-box ：填充到 content 右下角
text ：用文字区域反切背景图片
- webkit 特有属性，需加前缀 -webkit-background-clip: text;
- 搭配 -webkit-text-fill-color: transparent; 使用

div {
  background-clip: text;
  -webkit-background-clip: text;
  text-fill-color: transparent;
  -webkit-text-fill-color: transparent;
}

8.背景填充重复 `background-repeat`

repeat ：填充内容不够时重复平铺
no-repeat ：填充内容不够时留白
repeat-x ：横向填充内容不够时重复平铺，纵向留白（相当于纵向 no-repeat）
repeat-y ：纵向填充内容不够时重复平铺，横向留白（相当于横向 no-repeat）
round ：填充内容不够时重复平铺，当容器宽度不足平铺填充元素的宽度时内容拉伸，容器宽度成平铺填充元素倍数时内容平铺
space ：填充内容不够时重复平铺，当容器宽度不足平铺填充元素的宽度时用间隙填充，容器宽度成平铺填充元素倍数时内容平铺
可以填两个属性值，表示水平和垂直方向上的重复状态 background-repeat: round space;
- 只能在 round 和 space 两个值之间组合

9.背景填充定位 `background-attachment`

设置当内容溢出容器形成滚动时背景图片相对什么元素定位
scroll ：默认值，相对容器定位，即内容滚动时，背景图片不动；容器滚动时，背景图片随之滚动
local ：相对内容定位，即内容滚动时，背景图片随之滚动
fixed ：相对视口定位，可视区域始终不动，背景图片也不动，但当前容器离开视口时，背景图片超出部分隐藏

10.背景填充尺寸 `background-size`

cover ：仅用一个元素填充背景，保持填充元素比例，放大以充满背景，溢出部分隐藏
contain ：仅用一个元素填充背景，保持填充元素比例，放大使元素最长边充满背景，未充满区域有可能出现平铺或留白

11.渐变

MDN 详细文档open in new window

linear-gradient([方向], 颜色值1 [边界1], 颜色值2 [边界2], 颜色值3 [边界3], ...) ：线性渐变
- 方向，可缺省，默认 to bottom，也可以设置为角度 0deg
- 如有设置边界 1，则从开始到边界 1 填充颜色值 1，剩余区域填充颜色值 2，以此类推
- 如有设置边界 2，则从开始到边界 1 填充颜色值 1，到边界 2 填充颜色值 2，以此类推
radial-gradient([方向], 颜色值1 [边界1], 颜色值2 [边界2], 颜色值3 [边界3], ...) ：径向渐变/放射性渐变
- 方向，可缺省，设置径向开始的圆心，默认 circle at center，也可以设置为椭圆 ellipse at 200px 10px
  - [ellipse] closet-side at 50px 50px ：放射到最短边截止
  - [ellipse] closet-corner at 50px 50px ：放射到最短边的边角截止
  - [ellipse] farthest-side at 50px 50px ：放射到最长边截止
  - [ellipse] farthest-corner at 50px 50px ：放射到最长边的边角截止
- 如有设置边界 1，则从开始到边界 1 填充颜色值 1，剩余区域填充颜色值 2，以此类推
- 如有设置边界 2，则从开始到边界 1 填充颜色值 1，到边界 2 填充颜色值 2，以此类推
- 边界值可以是百分比

（四）Text

1.文字阴影 `text-shadow`

1）效果

浮雕效果：右下黑色阴影，左上白色阴影

div {
  color: #ddd;
  text-shadow:
    1px 1px #000,
    -1px -1px #fff;
}

镂刻效果：右下白色阴影，左上黑色阴影（也可以去掉白色阴影）

div {
  color: #ddd;
  text-shadow:
    -1px -1px #000,
    1px 1px #fff;
}

霓虹灯效果：多层模糊阴影叠加

div {
  color: #ddd;
  text-shadow:
    0px 0px 10px #0f0,
    0px 0px 20px #0f0,
    0px 0px 30px #0f0;
}

2）搭配

如果配合 background-clip: text; 使用，文字会变成背景的一部分，此时文字阴影在文字的上方
- 给文字阴影添加 alpha 通道
如果配合 -webkit-text-stroke: 1px red; 使用，可以给文字加一圈描边，仅限于 webkit 内核的浏览器
- 也可用 canvas 的 stoke 属性实现

div {
  color: transparent;
  font-family: simsun;
  -webkit-text-stroke: 1px red;
}

2.自定义字体 `@font-face`

浏览器按照 MIME 协议中定义的映射，根据文件扩展名自动调用映射后的应用程序打开解析相应格式的字体文件

字体格式	使用系统	文件扩展名
TrueType	微软、苹果	.ttf（默认）
OpenType	微软、Adobe	.opt
Woff		.woff（未来趋势）
	IE	.eot
	HTML5	.svg

@font-face {
  font-family: "diyfont";
  src: url("diyfont.eot"); /* IE9+ */
  src:
    url("diyfont.eot?#iefix") format("embedded-opentype"),
    /* IE6-IE8 */ url("diyfont.woff") format("woff") /* chrome、firefox */,
    url("diyfont.ttf") format("truetype"),
    /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url("diyfont.svg#fontname") format("svg"); /* iOS 4.1- */
}

3.部分文本属性

tab-size ：定义文本内容中制表符的长度
word-break ：定义换行规则
- normal ：允许换行
- keep-all ：CJK 文本不允许在字符内换行，非 CJK 文本同 normal
- break-all ：非 CJK 文本允许在任意字符内换行（使连续英文字符断行）
- break-word ：同 break-all，没有断行破发点的词必须保持为一个整体（单词不断行）
word-wrap/overflow-wrap ：定义内容超出边界时的换行规则
- normal ：允许撑开或溢出边界
- break-word ：同 word-break: break-word;，内容将在边界内换行，没有断行破发点的词必须保持为一个整体（单词不断行）
text-align ：
- justify ：内容两端对齐，对于强制打断的行及最后一行不做处理
- start ：内容对齐开始边界
- end ：内容对齐结束边界
- match-parent ：同 inherit，只是该值继承的 start 或 end 关键字是针对父母的 direction 值并计算的，计算值可以是 left 和 right
- justify-all ：同 justify，最后一行也会两端对齐
text-align-last ：定义块内文本内容被强制打断的行和最后一行的对齐方式
- auto ：无特殊对齐方式
- left ：内容左对齐
- center ：内容居中对齐
- right ：内容右对齐
- justify ：内容两端对齐
- start ：内容对齐开始边界
- end ：内容对齐结束边界
word-spacing ：定义单词之间的额外间隙
letter-spacing ：定义字符之间的额外间隙
text-indent ：定义块内文本内容的缩进
- <length> ：用长度值指定文本的缩进（可以为负值）
- <percentage> ：用百分比指定文本的缩进（可以为负值）
- each-line ：定义缩进作用在块容器的第一行或者内部的每个强制换行的首行，软换行不受影响
- hanging ：反向所有被缩进作用的行
text-size-adjust ：定义移动端页面中元素文本的大小如何调整
- auto ：文本大小根据设备尺寸进行调整
- none ：文本大小不会根据设备尺寸进行调整
- <percentage> ：用百分比来指定文本大小在设备尺寸不同的情况下如何调整

4.多列

columns ：设置或检索对象的列数和每列的宽度（复合属性）
column-width ：设置或检索对象每列的宽度
- 最好不要设置
- 一般用于某一列定宽，且父元素宽度不变
column-count ：设置或检索对象的列数
- 多元素排列时，会确保元素最高的列数最大，剩余元素再排在新的一列
column-gap ：设置或检索对象的列与列之间的间隙
column-rule ：设置或检索对象的列与列之间的边框（复合属性）
column-rule-width ：设置或检索对象的列与列之间的边框厚度
column-rule-style ：设置或检索对象的列与列之间的边框样式
column-rule-color ：设置或检索对象的列与列之间的边框颜色
column-span ：设置或检索对象元素是否横跨所有列
column-fill ：设置或检索对象所有列的高度是否统一
column-break-before ：设置或检索对象之前是否断行
column-break-after ：设置或检索对象之后是否断行
column-break-inside ：设置或检索对象内部是否断行

（五）Box

1.IE6 混杂模式盒模型

1）计算方式

原（W3C 标准盒模型）：
- boxWidth = width + border * 2 + padding * 2;
现（怪异盒模型）：
- boxWidth = width;
- contentWidth = width - border * 2 - padding * 2;

2）触发方式

box-sizing: border-box;

*,
*::before,
*::after {
  box-sizing: border-box;
}

3）适用场景

宽度不固定（百分比），但是内边距固定
宽度 100% 的输入框，因自带 border 会超出容器宽度
宽度为用户自定义
宽度根据后端传的参数确定

2.其他属性

overflow ：定义横纵向溢出规则
- 复合属性（overflow-x、 overflow-y）
  - 只要其中一个定义为非 visible，另一个将从 visible 自动设置为 auto
- clip ：溢出隐藏，且不出现滚动条
resize ：定义区域是否允许用户缩放或自定义调整大小（触发重排重绘，少用）
- 必须配合 overflow: scroll; 使用
- both ：横纵轴都可调整
- vertical ：纵轴可调整
- horizontal ：横轴可调整

3.flex 布局

flex/inline-flex 区别同 block/inline-block
主轴自左向右时，交叉轴对齐方式：
- 单行元素：align-items
- 多行元素：align-content
优先级：align-content > align-self > align-items

1）伸 `flex-grow`

当主轴方向还有剩余空间时，盒子会按照该属性的比例瓜分空间分配给子元素

flex-grow: 0;：默认值，不参与分配
flex-grow: 1;：按 1:1:1 分配剩余空间

2）缩 `flex-shrink`

元素不换行时启动压缩
flex-shrink: 0;：不参与压缩
flex-shrink: 1;：默认值，按 1:1:1 压缩子元素
子元素宽度不相等时的计算公式（无边框线时）
- 计算溢出宽度：所有子元素宽度和 - 容器宽度 = overflowWidth
- 计算子元素宽度及占比加权值：（各子元素宽度 * 各子元素所占压缩比例）之和
- 按照压缩比例分配 overflowWidth：（子元素宽度 * 子元素所占压缩比例） / 加权值 * 溢出宽度

<div class="wrapper">
  <div class="content">1</div>
  <div class="content">2</div>
  <div class="content">3</div>
</div>

* {
  margin: 0;
  padding: 0;
}
.wrapper {
  width: 600px;
  height: 600px;
  border: 1px solid #000;
  display: flex;
}
.content {
  width: 200px;
  height: 100px;
}
.content:nth-of-child(3) {
  width: 400px;
  flex-shrink: 3;
}
/*
1.容器宽度：600px 子元素宽度和：200+200+400=800px 溢出宽度：200px
2.按照压缩比例1:1:3计算加权值：200px * 1 + 200px * 1 + 400px * 3 = 1600px
3.分配溢出宽度：
  200px * 1 / 1600px * 200px = 25px => 元素1压缩25px => 压缩后宽度 200px - 25px = 175px
  200px * 1 / 1600px * 200px = 25px => 元素2压缩25px => 压缩后宽度 200px - 25px = 175px
  400px * 3 / 1600px * 200px = 150px => 元素3压缩150px => 压缩后宽度 200px - 150px = 50px
*/

子元素宽度不相等时的计算公式（有边框线时）
- 计算溢出宽度：所有子元素宽度和 - 容器宽度 = overflowWidth
- 计算子元素宽度及占比加权值：（各子元素内容区的宽度 * 各子元素所占压缩比例）之和
- 按照压缩比例分配 overflowWidth：（子元素内容区的宽度 * 子元素所占压缩比例） / 加权值 * 溢出宽度

<div class="wrapper">
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
</div>

* {
  margin: 0;
  padding: 0;
}
.wrapper {
  width: 600px;
  height: 600px;
  border: 1px solid #000;
  display: flex;
}
.content {
  width: 200px;
  height: 100px;
  box-sizing: border-box;
  /* border: 1px solid #f00; */
  padding: 0 100px; /* 测试没有内容区 */
  background-color: #f0f;
  flex-shrink: 1;
}
.content:nth-of-child(2) {
  background-color: #ff0;
}
.content:nth-of-child(3) {
  width: 400px;
  flex-shrink: 3;
  background-color: #0ff;
}
/*
1.容器宽度：600px 子元素宽度和：200+200+400=800px 溢出宽度：200px
2.按照压缩比例1:1:3计算加权值：0px * 1 + 0px * 1 + 400px * 3 = 1200px
3.分配溢出宽度：
  0px * 1 / 1200px * 200px = 0px => 元素1不压缩 => 压缩后宽度 200px
  0px * 1 / 1200px * 200px = 0px => 元素2不压缩 => 压缩后宽度 200px
  400px * 3 / 1200px * 200px = 200px => 元素3压缩200px => 压缩后宽度 200px - 200px = 0px（内容区域，只剩padding）
*/

总结

不管是 W3C 标准盒模型还是 IE 怪异盒模型

不管有 border 还是无 border

加权值计算公式都是 （各子元素内容区的宽度 * 各子元素所占压缩比例）之和

3）`flex-basis`

权重高于 width
- 默认值 auto，数值按 width 计算
当设置 width 且值小于 flex-basis 或者只设置 flex-basis 时
- flex-basis 设置的其实是元素的最小宽度
当设置 width 且值大于 flex-basis 时
- flex-basis 设置的是元素的最小宽度， width 设置的是元素的最大宽度
basis < realWidth < width

注意

被不换行内容撑开的容器（长英文单词），不参与压缩

设置 word-break: break-word; 打破换行规则，则该元素可以参与压缩

（六）Transition & Animation

1.过渡 `transition`

transition-property ：过渡的属性，必须是数值类属性或 all
transition-duration ：过渡的时间，多少时间内完成过渡效果
transition-timing-function ：过渡的时间函数，表示运动状态的曲线
transition-delay ：过渡的延迟，过多长时间再进行过渡

2.三次-贝塞尔曲线 `cubic-bezier`

1）运动状态曲线 s-t 曲线

曲线上某个点的斜率即运动的速度：v = s / t
计算曲线上某个点 P(x, y) 的斜率：
- 取其一左一右极限相邻的两个点 P₁(x1, y1), P₂(x2, y2)
- 求斜率：ΔP = (y2 - y1) / (x2 - x1)
斜率为正，速度为正，运动方向相同
斜率为负，速度为负，运动方向相反

2）贝塞尔曲线

二次贝塞尔曲线：起点 + 终点 + 控制点 * 1
三次贝塞尔曲线：起点 + 终点 + 控制点 * 2
n 次贝塞尔曲线：起点 + 终点 + 控制点 * (n - 1)
起点 P₀(0, 0)，终点 P₃(1, 1)
B(t) = P₀(1 - t)³ + 3P₁t(1 - t)² + 3P₂t²(1 - t) + P₃t³ ,t ∈ [0,1]
cubic-bezier(x1, y1, x2, y2) ：0 < x1,x2 < 1

3.动画 `animation`

0% => from, 100% => to
多个关键帧会并行执行

1）`animation-iteration-count`

设置动画的循环次数
- 默认值 1
- 可以设为 infinite 无限循环
- 动画开始后无论视觉效果是否循环都算作 1 次动画，delay 只在动画开始前执行

2）`animation-play-state: paused;`

控制动画暂停，不推荐使用

3）`animation-fill-mode`

设置对象动画时间之后的状态
- none ：不设置状态
- forwards ：设置对象状态为动画结束时的状态（最后一帧），不设置动画开始前的状态
- backwards ：设置对象状态为动画开始时的状态（第一帧），不设置动画结束后的状态
- both ：设置对象状态为动画结束或开始时的状态

4）`animation-timing-function`

定义 CSS 动画在每一动画周期中执行的节奏
steps(动画完成步数, 步数开始位置)
- end ：保留当前帧状态，直到这段动画时间结束
  - 最后一帧执行时，刚好在保留倒数第一帧的状态，所以此时看不到最后一帧的效果
  - 需要在步数后面加上 forwards(非 infinite) 或者动画本身是 infinite 才能看到最后一帧效果
- start ：保留下一帧状态，直到这段动画时间结束
  - 第一帧执行时，刚好在保留第二帧的状态，所以此时看不到第一帧的效果
  - 不好弥补，所以该属性不常用
- 特殊值：
  - steps(1, start) === step-start
  - steps(1, end) === step-end

div {
  animation: change-color 4s steps(1, end) forwards;
  animation: change-color 4s steps(1, start);
}

4.变换 `transform`

1）rotate

90deg = 0.25turn
元素坐标轴基于自身，当元素旋转时，旋转坐标轴也变化
- 旋转顺序不同，即使旋转过程一样，结果也不一样

2）rotate3d

矢量：有方向的度量长度的量
向量：无方向的度量长度的量
transform: rotate3d(x, y, z, angle)
- x、y、z 具体值不重要，三者比值（矢量方向）重要，根据这三个值在空间坐标系中绘制出一个矢量
- 以该矢量为轴旋转 angle 个角度

3）scale

0 < 值 < 1 压缩，1 < 值延伸
scale(x, y) ：x、y 轴均伸缩
scaleX() ：只伸缩 x 轴
scaleY() ：只伸缩 y 轴
scaleZ() ：只伸缩 z 轴
scale3d ：类似 rotate3d

注意

伸缩的不是元素本身，而是参照的坐标轴刻度，元素大小不变

scale 可以叠加操作：transform: scale(0.5, 0.5) scale(3, 3);，相当于 transform: scale(1.5, 1.5);

伸缩后旋转，坐标轴会跟着旋转，但旋转前原先伸缩的影响会继续保留

4）skew

skew(x deg, y deg) ：沿 x、y 轴倾斜
skewX() ：沿 x 轴倾斜
skewY() ：沿 y 轴倾斜

注意

skew 倾斜的是坐标轴，对后续变换有影响

skew 倾斜时坐标轴刻度也伸缩了

5.平移 `translate`

平移距离相对于元素本身，可利用此完成自身宽高不确定的元素居中定位

div {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, 50%);
}

6.景深 `perspective`

默认值 none ，取值范围：[1, +∞)（px）
设置人眼距离屏幕的空间纵深（有立体感）
当 z 轴移动距离超过景深设置的距离（浏览器有几像素误差）时，元素将看不到（消失）
- 离眼睛越近元素越大
视线看到的元素都是元素在屏幕上的投影

警告

景深要设置到父元素上，子元素才能起作用

通常设置到 body 上（800px）

1）景深与 translateZ

当景深不变，元素往 z 轴正方向（靠近眼睛）移动时，眼睛看到的元素在屏幕上的投影越大，所以元素变大
当景深不变，元素往 z 轴负方向（远离眼睛）移动时，眼睛看到的元素在屏幕上的投影越小，所以元素变小
当景深变小（眼睛靠近屏幕），元素往 z 轴负方形（远离眼睛）移动时，眼睛看到的元素在屏幕上的投影越小，所以元素变小
当元素就在屏幕上（没有 z 轴移动）时，无论景深变大变小，看到的元素在屏幕上的投影都是元素本身，所以元素不变化

2）`perspective-origin`

默认值： center center
配合 perspective 和 rotate 以及 onmousemove 事件，可以实现鼠标移动元素跟着旋转的效果
空间变换中心 perspective-origin： 100px 100px 100px; ，只关注三轴比例

3）`transform: perspective()`功能函数

需要加到元素自身，且应在所有 transform 功能函数的最前方，否则有些浏览器不识别
相当于多只眼睛单独看多个元素
此时无法设置 perspective-origin
可以与父级设置的景深叠加

4）`transform-style`

flat ：指定子元素位于此元素所在平面内
preserve-3d ：指定子元素定位在三维空间内，将创建局部堆叠上下文

警告

要添加到需要 3d 变换的元素的直接父级上

5）3d 变换三件套

设置 perspective 或 transform-style 之后，body 会变成定位元素的参照物元素，所以需要确保 body 从:root 继承了高度

:root,body {
  height: 100%;
}
body {
  perspective: 800px
  perspective-origin: 300px 300px;
  transform-style: preserve-3d;
}

6）`backface-visibility`

是否允许元素背面显示在视野中
默认值：visible

7.矩阵 `matrix`

矩阵是 transform 选中的计算规则，最适合得出图形变换规律
根据传入的不同数值，得出不同的变换规律

1）笛卡尔积计算公式

矩阵 2 有多少列，结果就有多少列
矩阵 1 的每一行按位和矩阵 2 每一列按位相乘后相加，作为结果集的一列
只关注矩阵前两行
- x、y 是图像上被操作的点
- a、b、c、d、e、f是填入的参数，经过计算后图像上的点能变换到新的位置

| a c e |   | x |   | ax + cy + e |
| b d f | * | y | = | bx + dy + f |
| 0 0 1 |   | 1 |   | 0  + 0  + 1 |

2）平面变换 translate2d

matrix(1, 0, 0, 1, e, f); === translate(x, y);

| 1 0 e |   | x |   | x + e |
| 0 1 f | * | y | = | y + f |
| 0 0 1 |   | 1 |   | 1     |

matrix(a, 0, 0, d, 0, 0); === scale(x, y);

| a 0 0 |   | x |   | ax |
| 0 d 0 | * | y | = | dy |
| 0 0 1 |   | 1 |   | 1  |

matrix(cos(θ), sin(θ), -sin(θ), cos(θ), 0, 0); === rotate(θ);

| cos(θ) -sin(θ) 0 |   | x |   | cos(θ)x - sin(θ)y |
| sin(θ) cos(θ)  0 | * | y | = | sin(θ)x + cos(θ)y |
| 0      0       1 |   | 1 |   | 1                 |

3）立体变换 translate3d

4*4 矩阵
缩放：matrix(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, x, y, z, 1); === scale3d(x, y, z);
平移：matrix(x, 0, 0, 0, 0, y, 0, 0, 0, 0, z, 0, 0, 0, 0, 1); === translate3d(x, y, z);

（七）显示器的成像原理

1.屏幕 `screen`

1）空间混色法

三个成色材料在一个像素点中接近并排排列，不是叠加，利用视觉无法识别颜色值细微差别的特点，形成颜色

2）像素

像素是屏幕成像的基本单位，像素的基本单位是像点
红、绿、蓝三个像点（色点）经过空间混色法形成一个像素点
像素是一个相对单位

3）像素排列

不同公司出品的设备像素排列方式可能不同
- 类型 1：类似“品”字形（初代）
- 类型 2：柱状并排排列，栅格形（索尼、松下）
点距：像素 1 中的红色像点到相邻的像素 2 中的红色像点的距离
- 用于描述像素大小（像素呈现的细腻程度）：小 => 细腻

CRT 显示屏
- 虽已过时，但其求点距的方法的是几乎所有屏幕都通用的
- 电子束（符合波粒二象性，会散射）打在荫罩层（校正光束的轨迹）上的荧光粉上，荧光粉本身不亮，接收到电子束的照射后才亮，照射一下就亮一下
- 电子束照射时间越长，荧光粉越亮，荧光粉的排列方式即像点的排列方式
- 多个像素点在屏幕上成像

LCD 液晶屏
- 利用液晶材料经高温或磁场可成固态也可成液态的特点制成，可控制光的偏折
- 部分光穿过玻璃板投射到有滤光片的平面上，滤出的光经空间混色法在屏幕上成像
- LED 是特殊的液晶屏

2.像素 `px`

1）物理像素

设备出厂时的像素大小
dpi ：一英寸所能容纳的像素点数
- 1 inch = 2.54cm
  - 一般的清晰屏幕：96dpi
  - 更清晰的屏幕：200-400dpi
  - ios ratino 有 360dpi
- 最早用于表示打印机设备的像素大小
  - 像素点即打印机的墨点，有时能达到 600dpi
  - 表示打印机在一英寸的屏幕里面可以打印多少个墨点
ppi ：一英寸所能容纳的像素点数（点距数）
- 可与 dpi 通用

2）参照像素

背景：不同设备 dpi 不同，同样的 CSS 代码呈现的样式不同，需要一个统一的单位
制定标杆：对于 96dpi 的屏幕，以一臂之遥的视角去看，显示出的具体大小
- 约等于 1 / 96 * 英寸
- 各设备向其靠拢（保持宽高比）
也称 CSS 像素，即编程像素/逻辑像素
CSS 编程的逻辑像素方式，也被称为逻辑屏
- CSS 中的 px 是虚拟值
- 根据不同设备的 dpr 转换为物理像素

3）设备像素比

dpr = 物理像素 / CSS像素
设计稿.psd 一般按照 iPhone6（ratino 屏）的物理像素作为标准提供图片尺寸
- iPhone6 的 dpr 为 2，所以 CSS 设定时应 /2

4）分辨率

多为 1920 * 1080
固定宽高下展示的像素点数，不易直观看出好坏，10 寸不如 2 寸清晰
- 所以清晰度不看分辨率，看 dpi

3.显卡 `GPU`

1）`CPU`

适合处理基于逻辑的数学运算（与或非）

2）`GPU`

适合处理高精度的浮点数运算
家用类
- 用于显卡图像绘制
- 基础绘制单位是多边形
专业类
- 专业绘图领域显卡
- 基础绘制单位是点

4.布局 `Layout`

1）浏览器渲染顺序

2）触发重排的操作 `reflow`

改变窗口大小
改变文字大小
改变内容、输入框输入文字
激活伪类，如 :hover
操作 class 属性
脚本操作 DOM（增删改查）
计算 offsetWidth 和 offsetHeight
设置 style 属性

3）触发重绘的操作 `repaint`

只改变某个元素的背景色、文字颜色、边框颜色等不影响其周围或内部布局的属性

4）性能优化

repaint 速度快于 reflow，尽量不触发重排
操作 CSS 时不要 .style.XXX，加 class 一次重构更好
transform 最好交给 GPU 来处理
- 改变 opacity、transform: translate3d();、transform: translateZ()都可以触发 GPU 新开一个层
GPU 加速方法
- hack 写法（不标准）：
  - transform: xxxx（需要使用的变换属性） translate3d(0, 0, 0);
  - transform: xxxx（需要使用的变换属性） translateZ(0);
- 标准写法：
  - 兼容性较好的浏览器可以使用 will-change: transform; 提前告诉浏览器新开一个层渲染
  - 最好在动作触发前再定义 will-change，通常在点击事件触发前，给元素的 hover 绑定该属性
浏览器刷新页面的频率为 1s60 次（16.7 毫秒/次）
- GPU 可以在一帧里渲染好页面，那么当你改动页面的元素或者实现动画的时候，将会非常流畅

（八）响应式布局

1.响应式设计

1）背景

PC 端：电脑
移动端：手机、平板
大小和分辨率不同，像素点密集程度不同（移动端更密集）
需求：用一套代码解决几乎所有设备的页面展示问题

2）响应式网页设计

也称自适应网页设计 / 回应式网页设计 / 对应式网页设计
是一种网页设计的技术做法，该设计可使网站在不同的设备（从桌面计算机显示器到移动电话或其他移动产品设备）上浏览时对应不同分辨率皆有合适的呈现
减少用户进行缩放，平移和滚动等操作行为

2.设置视口

<!-- 将页面大小根据分辨率不同进行相应的调节，以展示给用户感觉上差不多的大小 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

两者都是设置视口宽度为设备宽度，但目的不同
- width = device-width : 解决 iPhone/iPad 上（横竖屏的宽度 = 竖屏时候的宽度）不能自适应的问题
- initial-scale=1.0 : 解决 Windows 系统手机上的 IE 浏览器（横竖屏的宽度 = 竖屏时候的宽度）不能自适应的问题
不设置 meta 标签则使用默认视口，一般为 980px、1024px（按设备）

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

用于适配各种不同分辨率的设备
- width ：可视区宽度
- device-width : 设备宽度
- minimum-scale ：最小缩放比
- maximum-scale ：最大缩放比
- user-scalable ：是否允许用户缩放

3.响应式网页开发方法

流体网格：可伸缩的网格
- 大小宽高都是可伸缩（flex、百分比、float）
- 布局上面的元素大小不固定可伸缩
弹性图片：图片宽高不固定
- 可设置 min-width: 100%;
媒体查询：让网页在不同的终端上面展示效果相同
- 用户体验相同 => 让用户用着更爽
- 在不同的设备（大小、分辨率不同）上均展示合适的页面
主要断点：设备宽度的临界点
- 设备大小的区别 => 宽度不同 => 展示不同的样式

注意

响应式网页开发主要是在 CSS 样式上面进行操作

4.媒体查询

媒体查询是向不同设备提供不同样式的一种方式，它为每种类型的用户提供了最佳的体验

1）CSS2 媒体类型 `Media Type`

是 CSS2 中的一个非常有用的属性
可以对不同的设备指定特定的样式，从而实现更丰富的界面

2）CSS3 媒体查询 `Media Query`

是 CSS3 对 Media Type 的增强
可以将 Media Query 看成：Media Type（判断条件） + CSS属性（符合条件的样式规则） = Media Features（媒体特性）
媒体特性书写时必须加括号 ()

3）引用媒体查询的方法

link 标签
@import url(example.css) screen and (width:800px);
CSS3 新增的 @media

<link rel="stylesheet" media="screen and (max-width: 800px)" href="index.css" />
@import 'index.css' screen and (max-width: 800px);
@media screen and (max-width: 800px);

注意

媒体查询不占用权重，通常放最后

5.逻辑操作符

1）合并多个媒体属性 `and`

@media screen and (min-width: 600px) and (max-width:100px);
合并多个媒体属性或合并媒体属性与媒体类型, 一个基本的媒体查询，即一个媒体属性与默认指定的 screen 媒体类型。

2）指定备用功能 `,`

@media screen and (min-width: 769px), print and (min-width: 6in);
- 将样式应用到宽度超过 769 像素的屏幕或使用至少 6 英寸宽的纸张的打印设备
没有 or 关键词可用于指定备用的媒体功能
可以将备用功能以逗号分割列表的形式列出

3）指定否定条件 `not`

@media not screen and (monochrome);
- 用于除单色屏幕外的所有设备。
不能在单个条件前使用 not
该关键字必须位于声明的开头，且会否定整个声明

4）向早期浏览器隐藏媒体查询 `only`

该关键字必须位于声明的开头，指定某种特定的媒体类型，为了兼容不支持媒体查询的浏览器
无法识别媒体查询的浏览器要求获得逗号分割的媒体类型列表，规范要求，它们应该在第一个不是连字符的非数字字母字符之前截断每个值
media="only screen and (min-width: 401px) and (max-width: 600px)"
- 早期浏览器应该解释为 media="only"
- 因为没有 only 这样的媒体类型，所以样式表被忽略
media="screen and (min-width: 401px) and (max-width: 600px)"
- 早期浏览器应该解释为 media="screen"
- 将样式规则应用于所有屏幕设备，即使不知道媒体查询的含义

6.易混淆的宽度

device-width/device-height` ：设备的宽度/高度
- 如电脑、手机的宽度，不是浏览器的宽度
width/height ：渲染宽度/高度（视口宽度/高度）
- 使用 documentElement.clientWidth/clientHeight ，即 viewport 的值

7.单位

rem
- CSS3 新增的一个相对单位 root em（根 em）
- 相对的只是 HTML 根元素的 font-size 大小
em
- 是相对长度单位
- 相对于当前对象内文本的 font-size 大小
- 如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸
px
- 像素（Pixel）是相对长度单位
- 是相对于显示器屏幕分辨率而言
vw
- 相对于视口的宽度
- 视口被均分为 100 单位的 vw
vh
- 相对于视口的高度
- 视口被均分为 100 单位的 vh
vmax
- 相对于视口的宽度或高度中较大的那个
- 其中最大的那个被均分为 100 单位的 vmax
vmin
- 相对于视口的宽度或高度中较小的那个
- 其中最小的那个被均分为 100 单位的 vmin

注意

font-size 属性是可以继承的

8.关于响应式

不是最佳选择，项目的预算、目标用户以及产品定位等决定了其实现方式
渐进增强
- 先以 iPhone6 为初始原型开发，再兼容其他设备
优雅降级
- 开发通用版本，再向下兼容至老版本
先开发移动端，后开发 PC 端

【待定】、CSS3 详细版

# （一）Introduction

# 1.预处理器(pre-processor)

# 2.后处理器(post-processor)

# 3.postCss 工具

# （二）Selectors

# 1.关系模式

# 2.属性选择器

# 3.伪元素选择器

# 4.伪类选择器

# （三）Border & Background

# 1.边框圆角 border-radius

# 2.边框阴影 box-shadow

# 3.边框图片 border-image

# 1）border-image-slice 截取

# 2）border-image-outset 延伸

# 3）border-image-width 填充宽度

# 4）border-image-repeat 重复

# 4.背景图片 background-image

# 5.背景起始填充位置 background-origin

# 6.背景填充区域 background-position

# 7.背景填充剪切 background-clip

# 8.背景填充重复 background-repeat

# 9.背景填充定位 background-attachment

# 10.背景填充尺寸 background-size

# 11.渐变

# （四）Text

# 1.文字阴影 text-shadow

# 1）效果

# 2）搭配

# 2.自定义字体 @font-face

# 3.部分文本属性

# 4.多列

# （五）Box

# 1.IE6 混杂模式盒模型

# 1）计算方式

# 2）触发方式

# 3）适用场景

# 2.其他属性

# 3.flex 布局

# 1）伸 flex-grow

# 2）缩 flex-shrink

# 3）flex-basis

# （六）Transition & Animation

# 1.过渡 transition

# 2.三次-贝塞尔曲线 cubic-bezier

# 1）运动状态曲线 s-t 曲线

# 2）贝塞尔曲线

# 3.动画 animation

# 1）animation-iteration-count

# 2）animation-play-state: paused;

# 3）animation-fill-mode

# 4）animation-timing-function

# 4.变换 transform

# 1）rotate

# 2）rotate3d

# 3）scale

# 4）skew

# 5.平移 translate

# 6.景深 perspective

# 1）景深与 translateZ

# 2）perspective-origin

# 3）transform: perspective()功能函数

# 4）transform-style

# 5）3d 变换三件套

# 6）backface-visibility

# 7.矩阵 matrix

# 1）笛卡尔积计算公式

# 2）平面变换 translate2d

# 3）立体变换 translate3d

# （七）显示器的成像原理

# 1.屏幕 screen

# 1）空间混色法

# 2）像素

# 3）像素排列

# 2.像素 px

# 1）物理像素

# 2）参照像素

# 3）设备像素比

# 4）分辨率