一、CSS3 基本语法
1. 浏览器私有前缀
-webkit-chrome浏览器、 Safari浏览器-moz-Firefox-ms-IE-o-Opearn
2. 新增长度单位
rem根元素字体大小的倍数，常用vw视口宽度的百分之几，常用vh视口高度的百分之几vmax视口宽高中较大的一个的百分之几vmin视口宽高中较小的一个的百分之几
3. 新增颜色设置方式
rgba
a 表示不透明度，取值范围 0 ~ 1，值越大越不透明，0 表示完全透明，1表示完全不透明
background-color: rgba(0, 188, 188,.5);
hsl
h 色相、色调， 取值： 0 ~ 360；
s 饱和度 取值： 0% ~ 100%；
l 亮度 取值： 0% ~ 100%
background-color: hsl(10, 36%, 28%);
hsla
在 hsl 的基础上增加了不透明度
二、选择器
1. 基本选择器（6个）
| 选择器 | 语法 |
|---|---|
| 标签名选择器 | 标签名 {} |
| 类名选择器 | .类名 {} |
| ID 选择器 | #ID名 {} |
| 全局选择器 | * {} |
| 交集选择器 | 选择器1选择器2 {} |
| 并集选择器 | 选择器1,选择器2，选择器3 { } |
2. 层级选择器（4个）
| 选择器 | 语法 |
|---|---|
| 后代元素选择器 | 选择器1 选择器2 { } |
| 子元素选择器 | 选择器1 > 选择器2 { } |
| 后面的相邻兄弟元素选择器 | 选择器1 + 选择器2 { } |
| 后面的通用兄弟元素选择器 | 选择器1 ~ 选择器2 { } |
-
后面的相邻兄弟元素选择器
第一步：找第一个元素 第二步：从该元素后面相邻兄弟元素中找元素
-
后面的通用兄弟元素选择器
第一步：找第一个元素 第二步：从该元素后面所有的兄弟元素中找元素
3. 属性选择器（5个）
| 选择器 | 意义 |
|---|---|
| [attr] | 选择具有attr属性的元素 |
| [attr = "val"] | 选择attr属性值是val的元素 |
| [attr ^= "val"] | 选择attr属性值是val开头的元素 |
| [attr $= "val"] | 选择attr属性值是val结尾的元素 |
| [attr *= "val"] | 选择attr属性值包含val的元素 |
- 属性选择器可以独立使用
- 属性选择器可以与其他选择器进行各种组合，注意：属性选择器与其他选择器交集组合的时候，属性选择器写在后面
[title] {}
.wrapper [title] {}
img[width="200"] {}
4. 伪类选择器（23个）
4.1 动态伪类选择器（5个）
| 选择器 | 语法 |
|---|---|
| :link | 访问之前 |
| :visited | 被访问之后 |
| :hover | 悬停的时候 |
| :active | 点击的时候 |
| :focus | 获取焦点的时候 |
4.2 目标伪类选择器（1个）
:target 选取当前活动的目标元素
4.3 语言伪类选择器 (1个，了解)
:lang(语言)
4.4 UI元素伪类选择器（3个）
| 选择器 | 意义 |
|---|---|
| :check | 被选中的单选框、复选框、下拉选项（能改的样式少） |
| :disabled | 不可用的表单控件 |
| :enabled | 可用的表单控件 |
4.5 结构伪类选择器（12个）
child系列（所有兄弟元素）
| 选择器 | 意义 |
|---|---|
| li:first-child | 是li元素 该元素是所有的兄弟元素中的第一个 |
| li:last-child | 是li元素 该元素是所有的兄弟元素中的最后一个 |
| li:nth-child(n) | 是li元素 该元素是所有的兄弟元素中的第n个 |
| li:nth-last-child(n) | 是li元素 该元素是所有的兄弟元素中的倒数第n个(n可以是odd/even/表达式如3n) |
| :only-child | 没有兄弟元素 |
type系列（同标签兄弟元素）
| 选择器 | 意义 |
|---|---|
| li:first-of-type | 是li元素 该元素是同标签兄弟元素中的第一个 |
| li:last-of-type | 是li元素 该元素是同标签兄弟元素中的最后一个 |
| li:nth-of-type | 是li元素 该元素是同标签兄弟元素中的第n个 |
| li:nth-last-of-type | 是li元素 该元素是同标签兄弟元素中的倒数第n个(n可以是odd/even/达式如3n) |
| :only-of-type | 没有同标签名的兄弟元素 |
<body>
<h1>伪类选择器 结构伪类</h1>
<hr>
<div class="wrapper">
<div class="item">入惜别了一范生区叹秦认夫一应间中在明三。</div>
<p class="item">在在见变人衣他自可洞找令争远司，乐答化。</p>
<div class="item">入惜别了一范生区叹秦认夫一应间中在明三。</div>
<p class="item">在在见变人衣他自可洞找令争远司，乐答化。</p>
<ul class="item">
<li>没后负起，治兼的秦。</li>
<li>没后负起，治兼的秦。
<ul>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
</ul>
</li>
</ul>
<div class="item">入惜别了一范生区叹秦认夫一应间中在明三。</div>
<p class="item">在在见变人衣他自可洞找令争远司，乐答化。</p>
</div>
</body>
div:first-child只选到第五行的div
:first-of-tyoe选到body、h1、hr、第四行div、第六行p等
其他
| 选择器 | 意义 |
|---|---|
| :root | 根元素 |
| :empty | 既没有内容也没有后代(所有单标签都算) |
4.6 否定伪类选择器（1个）
:not(选择器)
5. 伪元素选择器（6个）
| 选择器 | 意义 |
|---|---|
| ::first-letter / :first-letter | 选择到元素中的第一个文字 |
| ::first-line / :first-line | 选择到元素中的第一行文字 |
| ::before / :before | 动态创建子元素放在第一个位置 |
| ::after / :after | 动态创建子元素放在最后一个位置 |
| ::placeholder | 专门设置placeholer文字样式 |
| ::selection | 设置被选中文字的样式 |
6. 选择器的优先级（权重）
- ID 选择器
- 类选择器、伪类选择器、属性选择器
- 标签名选择器、伪元素选择器
- 全局选择器
- !important > 行内式 > 各种选择器
- !important 只针对于某一个属性
三、盒子样式
1. display 介绍
display 的属性值很多，可以将元素设置为任意形态。
2. box-sizing 属性
该属性可以规定 width（max-width、min-width） 和 height（max-height、min-height） 的设置规则，属性值如下：
| 属性值 | 含义 |
|---|---|
| content-box | 默认值，width 和 height 设置的是内容宽高 |
| border-box | width 和 height 设置的是总宽高 |
3. 盒子阴影 box-shadow
该属性值的设置规则：
- 值中可以包括 2 ~ 4 个长度，分别表示水平偏移量、垂直偏移量、模糊值、外延值，长度需按照顺序书写。
- inset 关键字可以设置为内阴影，放在长度的前面和后面都可以
- 颜色放在长度的前面和后面都可以
- 可以给元素设置多个阴影，每个阴影之间使用逗号分隔
/* 两个长度设置阴影的偏移量 */
box-shadow: 5px 10px;
box-shadow: 5px -10px;
box-shadow: -5px -10px;
/* 设置阴影位置 和 颜色 */
box-shadow: 5px 5px #099;
box-shadow: #990 5px 5px;
/* 设置偏移位置和模糊值 */
box-shadow: 5px 10px 10px;
/* 设置偏移位置、模糊值、颜色*/
box-shadow: 5px 10px 10px #009;
box-shadow: #999 5px 10px 10px;
/* 设置阴影不偏移 靠模糊值起效果 */
box-shadow: 0 0 15px;
box-shadow: 0 0 15px rgba(0, 200, 100, .5);
/* 设置偏移量、模糊值、外延值、颜色 */
box-shadow: 0 0 0 2px;
box-shadow: 0 0 5px 2px;
box-shadow: 0 0 5px 2px #099;
/* 设置内阴影 */
box-shadow: inset 3px 3px;
box-shadow: inset -3px 3px;
box-shadow: inset 3px 3px 5px pink;
box-shadow: 3px 3px 5px 2px pink inset;
/* 多阴影 */
box-shadow: 5px 0 5px pink,
0 5px 5px #099,
-5px 0 5px #990,
0 -5px 5px #909;
4. 不透明度 opacity
取值： 0 ~ 1 之间的数字，数值越大越不透明， 0 表示完全透明，1 表示完全不透明
四、背景属性
1. 新增属性
| 属性 | 意义 | 值 |
|---|---|---|
| background-origin | 设置背景图片定位的原点 | padding-box：默认值，原点在内边距上 content-box：原点在内容上 border-box：原点在边框上 |
| background-clip | 设置背景图像的显示区域（以外全部裁剪） | border-box：边框以及以内显示背景图，默认值 padding-box：内边距以及内显示背景图 content-box ：只有内容区域显示背景图 text：只有文字上显示背景图，需要加 -webkit-私有前缀 |
| background-size | 设置背景图像的尺寸 |
background-origin
background-clip
background-size
- 可以设置两个长度，分别表示背景图片的宽和高
- 使用百分比，宽度高度参照元素宽高度
- 如果只设置了一个长度，该长度表示背景图片的宽，图片高度会根据比例自动计算
contain自动调整图片大小适配元素，优先保证图片显示完整（可能造成元素上有空白）cover自动调整图片大小适配元素，优先保证元素上每一部分都有背景图（可能造成图片显示不全）常用
2. background 复合属性
新增了三个子属性，规则如下
-
如果符合属性中存在
content-box/padding-box/border-box- 只有一个值，同时设置
origin和clip - 如果两个值，第一个是
origin，第二个是clip
- 只有一个值，同时设置
-
position和size的值必须写在一起，使用/分割，前面是position后面是size
background: url(../images/31.jpg) no-repeat #099 content-box;
background: url(../images/31.jpg) no-repeat #099 padding-box content-box;
background: url(../images/31.jpg) #099 border-box 150px 150px;
background: url(../images/31.jpg) #099 border-box center/100% 100%;
background: url(../images/31.jpg) #099 border-box 100px/cover;
background: url(../images/31.jpg) #099 border-box 0 0/cover;
3. 多背景图
如果背景图片位置有重合，先写的背景图显示在上面
background: url(../images/bg-tl.png) no-repeat 0 0,
url(../images/bg-tr.png) no-repeat right 0,
url(../images/bg-bl.png) no-repeat 0 bottom,
url(../images/bg-br.png) no-repeat right bottom,
url(../images/bg05.jpg) no-repeat center/cover;
五、边框属性
1. 边框圆角
| CSS 属性名 | 含义 | 值 |
|---|---|---|
| border-top-left-radius | 左上角 | 长度 |
| border-top-right-radius | 右上角 | 长度 |
| border-bottom-left-radius | 左下角 | 长度 |
| border-bottom-right-radius | 右下角 | 长度 |
| border-radius | 长度 |
单个圆角属性值的设置规则：
- 单个值是以圆的半径
- 百分比是以元素的宽高决定
- 两个值是x轴和y轴
/* 左上角 */
border-top-left-radius: 10px;
/* 右上角 */
border-top-right-radius: 30px;
/* 左下角 使用两个长度 */
border-bottom-left-radius: 20px 50px;
/* 右下角 使用百分比 */
border-bottom-right-radius: 50%;
border-bottom-right-radius: 50% 10%;
复合属性的使用：
- 1个值：四个角
- 2个值：左上和右下 左下和右上
- 3个值：左上 左下和右上 右下
- 4个值：左上 右上 右下 左下
- 用/将x轴与y轴隔开，x轴/y轴，两边各不相干数量无需对等
/* 1个值 */
border-radius: 20px;
/* 2个值: 左上和右下 左下和右上 */
border-radius: 20px 40px;
/* 3个值： 左上 左下和右上 右下*/
border-radius: 10px 40px 20px;
/* 4个值: 左上 右上 右下 左下 */
border-radius: 10px 20px 30px 40px;
/* 设置x半径与y半径不同 */
border-radius: 10px 20px 30px 40px/50px;
border-radius: 10px 20px 30px/15px 25px 30px 50px;
border-radius: 10px 20px/15px 25px 30px;
border-radius: 20px/30px;
border-radius: 20px 50%/30px;
2. 外轮廓
| CSS 属性名 | 含义 | 值 |
|---|---|---|
| outline-style | 风格 | 同 border-style |
| outline-width | 宽度 | 长度 |
| outline-color | 颜色 | 颜色 |
| outline | 复合属性 | |
| outline-offset | 外轮廓与边框的距离， 并不是 outline 的子属性 | 长度 |
外轮廓与边框的区别：
- 外轮廓不是盒子的一部分，不影响盒子大小，也不占据文档流中的位置（跟阴影是一样的）
- 外轮廓位置可以设置，如果与边框重合，外轮廓显示在上面
常用：input框去掉外轮廓
六、文本属性
| CSS 属性名 | 含义 | 值 |
|---|---|---|
| text-align-last | 最后一行文本水平对齐方式 | start：起始方向对齐，默认值。 end：结束方向对齐。 justify：两端对齐。 left：左对齐。 right：右对齐。 center：居中对齐。 |
| text-decoration-line | 文本修饰线类型 | none：无修饰线。 underline：下划线。 line-throuth：删除线。 overline：上划线 |
| text-decoration-style | 文本修饰线风格 | solid：实线。 dotted：点线。 dashed：虚线。 double：双实线。 wavy：波浪线 |
| text-decoration-color | 文本修饰线颜色 | 颜色 |
| text-decoration | 复合属性 | 值没有顺序和数量要求 |
| white-space | 设置文本显示格式 | normal: 默认值。 pre：原格式显示。 pre-wrap：在pre基础上增加自动换行。 pre-line：在normal基础上识别换行。 nowrap：强制一行显示。 |
| text-overflow | 设置文本溢出方式 | clip：默认值。 ellipsis：省略号。 |
| text-shadow | 文本阴影 |
text-overflow要与overflow配合，在overflow:hidden的前提下，才能设置text-overflow
单行长文本显示省略号步骤：
- 强制文本显示一行
- 设置overflow隐藏元素溢出内容
- 显示省略号
text-shadow 文本阴影的设置规则：
/* 设置阴影偏移位置 */
text-shadow: 5px 5px;
/* 设置阴影偏移位置、颜色 */
text-shadow: 5px 5px pink;
text-shadow: #099 -10px 5px;
/* 设置阴影偏移位置、模糊值 */
text-shadow: 5px 5px 10px;
text-shadow: 5px 5px 10px #999;
/* 多阴影 */
text-shadow: 1px 1px #bbb,
2px 2px #aaa,
3px 3px #999,
4px 4px #888,
5px 5px #777,
6px 6px #666;
七、渐变
CSS 中，渐变被作为图片使用，需要相关的CSS属性进行配合，如 background-image、list-style-image、cursor 等。
1. 线性渐变
:linear-gradient(渐变方向， 颜色列表)
1.1渐变方向
- 可以使用关键字设置方向，如to top right(从左下向左上渐变)
- 可以使用角度0~360，角度单位(deg)
1.2多个颜色
1.3颜色位置
每个颜色都可以指定位置，位置使用长度表示。如果颜色不指定位置，各个颜色位置平均分布
background-image: linear-gradient(90deg, #900 20%, #990 20%, #990 40%, #099 40%, #099 60%, #009 60%, #009 80%, #090 80%);
0~ 20%是#900；20%这个点是#990，20%~ 40%是#990；40%这个点是#099以此类推，这个就不会产生渐变
2. 径向渐变（了解）
:radial-gradient(半径 at 圆心，颜色列表) 从圆心向四周渐变
圆心位置 关键字如at left top，就是圆心在左上角向外渐变；长度，就是圆心在哪个位置
3. 重复渐变
repeating-linear-gradient()重复线性渐变 参数同linear-gradient()
repeating-radial-gradient()重复径向渐变 参数同radial-gradient()
八、WEB字体
- 可以把字体放置在服务器上,而不受制于客户端系统字体
- 浏览器会根据指定的命令将对应的字体下载到本地缓存
1. web 字体基本语法
/* 引入Web字体 给web字体取名字*/
@font-face {
font-family: "fangfang";
src: url("sources/fonts/FZSJ-WSMQSJW.woff2") format("woff2"),
url("sources/fonts/FZSJ-WSMQSJW.woff") format("woff"),
url("sources/fonts/FZSJ-WSMQSJW.ttf") format("truetype"),
url("sources/fonts/FZSJ-WSMQSJW.eot") format("embedded-opentype"),
url("sources/fonts/FZSJ-WSMQSJW.svg") format("svg");
font-weight: normal;
font-style: normal;
}
/*使用web字体*/
.aritcle {
font-family: "fangfang";
}
字体格式的转换工具：
- www.fontsquirrel.com/tools/webfo… FontSquirrel在线工具
- www.fontke.com/tool/fontfa… 字客网
2. 定制字体
字体定制工具：
- www.iconfont.cn/webfont?spm… 阿里Web字体
- www.youziku.com/ 字体库网站
- www.ziti163.com/webfont/cre… 字体网
3. 字体图标
阿里图标
地址： www.iconfont.cn/
使用方式
-
使用Unicode 引用
-
使用font-class 引用
font-awesome
字体图标制作工具 icoMoon
九、变换 transform
1. 变换相关 CSS 属性
| 属性名 | 语义 | 值 | 设置给哪个 |
|---|---|---|---|
| transform | 设置变换方式 | translate()：位移 scale()：缩放 rotate()：旋转 | 变换的元素 |
| transform-origin | 设置变换原点 | 使用关键字或者坐标设置位置 值与background-position类似 | 变换的元素 |
| transform-style | 设置子元素处于2D空间还是3D空间 | flat: 子元素在平面内。（默认值） preserve-3d：子元素在3D空间 | 变换元素的父元素 |
| perspective | 设置观察者与平面(屏幕)的距离，景深 | 长度 | 变换元素的父元素 |
| perspective-origin | 设置观察者位置，从不同角度观察 | 使用关键字或者坐标设置位置 值与background-position类似 | 变换元素的父元素 |
| backface-visibility | 元素背面是否可见 | visible：可见，默认值 hidden：不可见 | 变换的元素 |
注意：
- 行内元素设置变换无效
- backface-visibility子元素设置，不可见的时候反面看不见，再翻到正面才可以
2. 2D 变换的方法
2.1 位移 translate 方法
transform:translateX(); /*设置水平方向位移*/
transform:translateY(); /*设置垂直方向位移*/
transform:translate(X,Y); /*同时设置水平方向和垂直方向位移*/
参数的设置规则：
-
使用长度就是设置位移的距离，正值向右/向下，允许负值
使用百分比，参照自己本身的宽度高度移动
-
分别设置水平位移和垂直位移，只有最后一个生效，因为都是同一个属性名
-
translate()如果只设置一个值默认水平位移
特点：
- 位移对文档流没有影响，不脱流，下面的依旧按着没有位移之前在文档里面排列
- 和相对定位很像，但不能代替相对定位
应用：
情况：定位元素居中显示，盒子没有设置高度而是被内容撑开
现况：用方案一margin-top没办法设置，方案二会是高度是整个页面
解决：用transform:translate(-50%,-50%)，因为这是参照自身宽高
但margin-top和margin-left没有办法设置百分比，因为这是参照父元素宽高
2.2 缩放 scale 方法
transform:scaleX(); /*设置水平方向缩放比例*/
transform:scaleY(); /*设置垂直方向缩放比例*/
transform:scale(X,Y); /*同时设置水平方向和垂直方向缩放比例*/
参数的设置规则：
- 使用数字或百分比表示缩放的比例
- 分别设置水平和垂直，只有最后一个生效，因为都是同一个属性名
scale()如果只设置一个值，表示水平和垂直方向他同时缩放
特点：
- 位移对文档流没有影响，不脱流，下面的依旧按着没有位移之前在文档里面排列
应用：
情况：设置小于12px的文字
现况：直接设置font-size最小只能设置到12px
解决：先设置20px大小文字，再用缩放font-size:20px;transform:scale(.5);
2.3 旋转 rotate 方法
transform:rotate();
参数的设置规则：
- 使用角度，单位deg
- 正值顺时针旋转，负值逆时针旋转，角度越大旋转得越多
2.4 多种变换效果
不能分别设置位移、缩放和旋转，因为后面的transform会覆盖前面的。
正确方法给transform设置多个值
注意：
先位移再旋转是正常
先旋转再位移是先转坐标轴，再位移就按照斜着的坐标轴位移
3. 3D 变换的方法
给父元素设置transform-style:preserve-3d;设置子元素处于2d还是3d
父元素需要设置观察者距离perspective:1000px;，才有参照
3.1 3D 位移
沿着Z轴位移
transform:translateZ(10px);
同时设置x，y，z位移，写上三个长度
transform:translate3D(100px,20px,50px);
3.2 3D 缩放
无任何实际效果
3.3 3D 旋转
3D旋转最常用
沿着x轴旋转
transform:rotateX(45deg)
沿着y轴旋转
transform:rotateY(45deg)
z轴旋转等同于2d旋转
同时设置沿着x，y，z轴转
transform:rotate3D(1,1,1,30deg)
前3个参数都是0或者1，表示对应的轴是否旋转
第4个参数是角度每个轴角度都一样，不能设置不同角度
十、过渡 transition
1. 过渡相关 CSS 属性
| CSS 属性名 | 语义 | 值 |
|---|---|---|
| transition-duration | 过渡持续时间 | 时间s、ms |
| transition-delay | 过渡延迟时间 | 时间s、ms |
| transition-property | 设置哪些属性可以过渡 | all：发生变化且能过渡的都过渡(默认值) 指定属性，多个使用逗号分隔 |
| transition-timing-function | 过渡的运动曲线 | |
| transition | 过渡的符合属性 | 1个时间表示 duration 2个时间，第一个是duration，第二个 delay |
哪些 CSS 属性可以过渡？
- 属性的值是长度的，如width、height、padding、margin、border-width等等
- 属性值是颜色的，如color、background-color、border-color等等
- 属性的值是纯数字的，如opacity、font-weight、z-index等等
- 变换属性transform
什么时候设置过渡相关的属性 transition
在元素的样式变化之前，提前设置好过渡相关属性
贝塞尔曲线在线工具：
transition-timing-function 设置过渡运动曲线：
-
linear： 线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
-
ease： 平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0) (默认值)
-
ease-in： 由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
-
ease-out： 由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
-
ease-in-out： 由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
-
step-start： 等同于 steps(1, start)
相较于线性过渡，一开始就到最后
-
step-end： 等同于 steps(1, end)
相较于线性过渡，等线性过渡到最后才到最后
-
steps(数字，start/end)： 接受两个参数的步进函数。
第一个参数必须为正整数，指定函数的步数。
第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。
-
cubic-bezier(, , , )： 特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内
2. 触发过渡的条件
用户的行为或动作导致元素样式发生变化，如果元素设置了过渡属性，样式的改变就又具有过渡效果
- 伪类选择器：
:hover :active :focus :checked - JS 事件
- CSS 媒体查询
十一、动画 animation
1. 关键帧
@keyframe 关键帧名字{
from{}
to{}
}
除了关键字还可以用百分比来表示发生的点
两者可以混搭，开始用from结束用100%，可以不写开始但必须有结尾
关键帧与元素的关系：
- 一个元素可以设置多个关键帧
- 一个关键帧可以设置给多个元素
2. 动画相关 CSS 属性
| CSS 属性名 | 含义 | 值 |
|---|---|---|
| animation-name | 设置关键帧 | 关键帧名字，多个使用逗号分隔 |
| animation-duration | 设置动画持续时间 | 时间s、ms |
| animation-delay | 设置动画延迟时间 | 时间s、ms |
| animation-timing-function | 设置动画运动曲线 | 同 transition-timing-function |
| animation-iteration-count | 设置动画运动次数 | 使用数字表示次数 infinite 表示无限次 |
| animation-direction | 设置动画运动方向 | normal：正常方向(默认值) reserve：反向运动 alternate：交替运动 alternate-reverse：反向交替运动 |
| animation-play-state | 设置动画运动状态 | running：默认值 paused：暂停运动 |
| animation-fill-mode | 动画开始之前和结束之后的状态 | none：默认值 forwards：动画结束后处于结束帧状态 backwards：动画开始之前处于起始帧状态 both：同时设置 动画开始之前处于起始帧状态 动画结束之后处于结束帧样式 |
| animation复合属性 | 复合属性 | 1个时间表示 duration 2个时间，第一个是duration，第二个 delay |
十二、多列布局
类似报纸的布局，不需要计算每个盒子要多少字数
自动在列之间加了间距
1. 设置给包裹元素的 CSS 属性（共 8 个属性）
| CSS 属性名 | 含义 | 值 |
|---|---|---|
| column-count | 设置列数 | 纯数字 |
| column-width | 设置列宽 | 长度 |
| columns | 同时设置列数和列宽 | |
| column-gap | 设置列间距 | 长度 |
| column-rule-style | 列分隔线风格 | 同 border-style |
| column-rule-color | 列分隔线颜色 | 颜色 |
| column-rule-width | 列分隔线宽度 | 长度 |
| column-rule | 列分隔线复合属性 |
注意：
- 单独设置列数和列宽可以实现多列布局
- 同时设置列数和列宽，如果列宽大那自动分的列数少，自己设置的列数就不生效。所以哪个部分计算出来列数少，最后生效哪个
- 如果加图片width:100%参照的是所在列的宽度
2. 设置给子元素的 CSS 属性（共 4 个属性）
| CSS 属性名 | 含义 | 值 |
|---|---|---|
| column-span | 是否跨列 | none：不跨列。 all：跨所有列 |
| -webkit-column-break-before | 设置元素前面是否断列 | auto：自动，默认值。 always：强制断列。 avoid：不允许断列 |
| -webkit-column-break-after | 设置元素后面是否断列 | auto：自动，默认值。 always：强制断列。 avoid：不允许断列 |
| -webkit-column-break-inside | 设置元素内部是否断列 | auto：自动，默认值。 avoid：不允许断列 |
3. 应用图片多列布局
现况：很多不同的图片用div或者浮动，会有很多空白
解决：多列布局可以解决
十三、伸缩盒布局
flex布局用的较多，后续单独拎出来
十四、媒体查询和响应式布局
1. 视口 viewport
1.1 什么是视口
- 视口是浏览器的可视区域，页面显示在视口中
- 视口是页面的初始包含块，是根元素的包含块
1.2 移动端视口和PC端视口
-
PC 端，屏幕分辨率与视口分辨率一致，默认就是完美视口
-
移动端默认情况视口宽度是 980px，与屏幕分辨率没有关联。（不完美的视口）
进行移动端页面开发（响应式开发），需要设置完美视口
1.3 完美视口设置
什么是完美视口：
屏幕宽度与视口宽度保持一致，就是完美视口
如何设置为完美视口：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2. 媒体查询基本语法
注意： 媒体查询不会提高优先级！
2.1 媒体类型
all 所有的设备
screen 屏幕
print 打印机
speech 屏幕阅读器
2.2 媒体特性
width 视口宽度 max-width 最大视口宽度 min-width 最小视口宽度 device-width 屏幕宽度 max-device-width 最大屏幕宽度 min-device-width 最小屏幕宽度
2.3 运算符
and 并且 , 或者 not 否定，只能用于媒体类型 only 肯定，只能用于媒体类型
3. 媒体查询在 CSS 中使用
3.1 第一种使用方式： 媒体查询与其他CSS代码写在一起(推荐使用)
h1 {
color: #f00;
}
@media (min-width:600px) {
h1 {
color: #080;
}
}
3.2 第二种使用方式： @media 配合 link 标签
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="w800.css" media="(min-width:800px)">
4. 响应式布局
4.1 阈值（断点）
常见方案一：
640px
1024px
常见方案二：
768px
992px
1200px
4.2 移动优先方案（媒体查询的设置）
.container {
}
/* 视口768px以上 >=768 并且 < 992 */
@media(min-width:768px) {
.container {
}
}
/* 视口992px以上 >=992 并且 < 1200 */
@media (min-width:992px) {
.container {
}
}
/* 视口1200px以上 >=1200 */
@media (min-width: 1200px) {
.container {
}
}
十五、BFC
1. 什么是 BFC
Block Formatting Context 简称 BFC，中文翻译为 块级格式上下文。
1.1 W3C 中对 BFC 的定义
Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.
译文：
浮动、绝对定位元素、不是块盒子的块容器(如inline-blocks、table-cells和table-captions)，以及
overflow属性的值除visible以外的块盒(除非该值已传播到视口)，将为其内容建立新的块格式化上下文。
1.2 MDN 上对 BFC 的定义
A block formatting context is a part of a visual CSS rendering of a web page. It's the region in which the layout of block boxes occurs and in which floats interact with other elements.
译文：
块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
developer.mozilla.org/en-US/docs/…
developer.mozilla.org/zh-CN/docs/…
1.3 到底什么是 BFC
首先，BFC 的意思是 Block Formatting Context ，即块级格式上下文。 然后，当元素满足了某些条件，我们认为该元素创建了 BFC。 创建了 BFC 的元素我们可以把他看做是一个独立的容器，容器内的元素不论如何布局都不会影响到外面。
2. 创建 BFC 的方式
- 根元素。
- 浮动元素。
- 绝对定位或固定定位的元素。
- 行内块元素。
- 表格单元格（th、td）、表格行（tr）、表格标题（caption）、table、thead、tbody、tfoot。
overflow的值不为visible的块元素。- 伸缩项目。
- 多列容器。
column-span为all的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中。
3. 创建 BFC 可以解决的问题
3.1 清除子元素浮动的影响
给浮动元素的父元素创建 BFC，清除掉子元素浮动的影响。
3.2 解决外边距塌陷
给父元素创建 BFC，第一个和最后一个子元素的外边距不会塌陷。
