一、CSS动画

1.过渡

过渡 (transition) :通过过渡可以指定一个属性发生变化的方式。通过过渡可以创建一些非常好的效果，提升用户的体验。

属性	描述
transition-property	指定要执行过渡的属性，多个属性间逗号隔开，如果所有属性都需要过渡，则用 all 关键字。大部分属性都支持过渡，注意过渡必须从一个有效值向另一个有效值进行
transition-duration	指定过渡效果的持续时间，单位 s 和 ms，可以分别指定，用逗号隔开
transition-timing-function	过渡的时序函数，指定过渡的执行方式。1.ease 默认值，慢速开始，先加速，再减速 2.linear 匀速运动 3.ease-in 加速运动 4.ease-out 减速运动 5.ease-in-out 先加速后减速 6.cubic-bezier() 来指定时序函数 https://cubic-bezier.com 7.stes 分步执行过渡效果可以指定一个第二个值: end (默认值)在时间结束时执行过渡 start 在时间开始时执行过渡
transition-delay	过渡效果的延迟，等待一段时间后再执行过渡
transition	可以同时设置过渡相关的所有属性，只有一个要求，如果要写延迟，则两个时间中第一个写持续时间第二个写延迟时间

2.动画

动画：动画和过渡类似，都是可以实现一些动态的效果，不同的是过渡需要在某个属性发生变化时才会触发，动画可以自动触发动态效果。

关键帧：设置动画效果，必须要先设置一个关键帧，关键帧设置了动画执行的每一个步骤。

@keyframes test { /* 设置一个名字为 test 的关键帧 */
    /* from 表示动画的开始位置，也可以使用 0% */
    from { margin-left: 0;}
    /* to 表示动画的结束位置，也可以使用 100% */
    to { margin-left: 700px;}
}
    /* 可以在 0% 到 100% 间再任意设置多个关键帧 */

属性	描述
animation-name	要对当前元素生效的关键帧的名字
animation-duration	动画的执行时间
animation-timing-function	动画的时序函数
animation-iteration-count	动画执行的次数可选值：代表次数的数值 / infinite 无限执行
animation-delay	动画的延时
animation-direction	指定动画运行的方向可选值：1.normal 默认值从 from 向 to 运行每次都是这样 2.reverse 从 to 向 from 运行每次都是这样 3.alternate 从 from 向 to 运行重复执行动画时反向执行 4.alternate-reverse 从 to 向 from 运行重复执行动画时反向执行。

3.变形

变形：变形就是指通过 CSS 来改变元素的形状或位置，变形不会影响到页面的布局。transform 用来设置元素的变形效果。

平移	translateX（）沿着 x 轴方向平移，translateY（）沿着 y 轴方向平移，translateZ（）沿着 z 轴方向平移。平移元素的百分比是相对于自身计算的。z 轴平移，调整元素在 z 轴的位置，正常情况就是调整元素和人眼之间的距离，距离越大，元素离人越近。z 轴平移属于立体效果，默认情况下网页不支持透视，如果需要看见效果必须要设置网页的视距。
旋转	rolateX（）rolateY（）rolateZ（）通过旋转可以使元素沿着 x y 或 z 旋转指定的角度单位有 deg turn。旋转可以设置 backface-visibility 属性决定是否显示背面 visible / hidden
缩放	scaleX（）水平方向的缩放 scaleY（）垂直方向的缩放 scale（）双方向的缩放 transform-origin 用于设置变形的原点，默认值 center

二、less简介

less：less是一门 css 的预处理语言。less 是 css 的一个增强版，通过 less 可以编写更少的代码实现更强大的功能。less 的语法大体上和 css 一致，但是添加了许多对 css 的拓展。less 可以直接在父元素的大括号中为子元素添加样式。

less变量的语法：@变量名。使用变量时，如果是直接使用则以 @变量名的形式使用即可。作为类名，或者是一部份值使用时必须以 @{变量名} 的形式使用。
变量发生重名时，会优先使用比较近的变量。
height : $width 可以直接为 height 引用 width 的值
& 符用于表示外层的父元素
: extend () 对当前选择器扩展指定选择器的样式（选择器分组）
.类名 () 直接对指定的样式进行引用，这里就相当于将样式进行了复制
使用类选择器时可以在选择器后边添加一个括号，这是我们实际上就创建了一个 mixins（专门用来给别的元素引用
混合函数在函数中可以直接设置变量
在 less 中所有的数值都可以直接进行计算
通过 @import "XXXX.less" 可以把多个 less 文件进行合并

.p1{ width: 100px; height: 200px;}
.p2:extend(.p1){ color: red;} //p2的样式为在p1的基础上扩展
.p3{ .p1();} //复制p1的样式到p3
.p4(){ width: 100px; height: 100px;} //创建一个只用于被引用的元素样式
.p5(@w,@h){  width: @w; height: @h;}
.p6{ .p5(200px,200px);} //调用混合函数，按顺序传递参数

三、CSS弹性盒

弹性盒 (flex): 是CSS中的又一种布局手段，它主要用来代替浮动完成页面的布局。flex 可以使元素具有弹性，让元素可以跟随页面大小的改变而改变。

弹性容器：要使用弹性盒，必须先讲一个元素设置为弹性容器。我们通过 display 来设置弹性容器。display:flex 设置为块级弹性容器 display:inline-flex 设置为行内的弹性容器。

弹性元素：弹性容器的直接子元素是弹性元素（弹性项）一个元素可以同时是弹性元素和弹性容器

弹性容器的属性	描述
flex-direction	指定容器中元素的排列方式。可选值：row 默认值，弹性元素在容器中水平排列（左向右主轴）row-reverse 弹性元素在容器中反向水平排列（右向左）column 弹性元素纵向排列（自上向下）column-reverse 弹性元素方向纵向排列（自下向上）弹性元素的排列方向称为主轴，与主轴垂直方向的称为侧轴。
flex-wrap	设置弹性元素是否在弹性容器中自动换行。可选值：nowrap 默认值，元素不会自动换行 wrap 元素沿着辅轴方向自动换行 wrap-reverse 元素沿着辅轴反方向换行
flex-flow	wrap 和 direction 的简写属性可以同时设置两个属性

justify-content	如何分配主轴上的空白空间（主轴上的元素如何排列）可选值：flex-start 元素沿着主轴起边排列 flex-end 元素沿着主轴终边排列 center 元素居中排列 space-around 空白分布到元素两侧 space-between 空白均匀分布到元素间 space-evenly 空白分布到元素的单侧
align-content	辅轴空白空间的分布
align-items	元素在辅轴上如何对齐，元素间的关系。可选值：stretch 默认值，将元素的长度设置为相同的值 flex-start 元素不会拉伸，沿着辅轴起边对齐 flex-end 沿着辅轴的终边对齐 center 居中对齐 baseline 基线对齐
align-self	用来覆盖当前弹性元素上的 align-items 为当前元素单独设置

弹性元素的属性	描述
flex-grow	指定弹性元素的伸展的系数。当父元素有多余的空间时，子元素如何伸展。父元素的剩余空间，会按照比例进行分配。
flex-shrink	指定弹性元素的收缩系数。当父元素中的空间不足以容纳所有的子元素时，如何对子元素进行收缩。缩减多少是根据缩减系数和元素大小来计算的
flex-basis	指定的是元素在主轴上的基础长度。如果主轴是横向的，则该值指定的就是元素的宽度。如果主轴是纵向的，则该值指定的就是元素的高度。默认值是 auto，表示参考元素自身的高度或宽度。如果传递了一个具体的数值，则以该值为准。

flex	可以设置弹性元素所有的三个样式 flex：增长缩减基础可选值：initial“flex：0 1 auto” / auto“flex：1 1 auto” / none“flex：0 0 auto”弹性元素没有弹性
order	决定弹性元素的排列顺序

四、移动端页面

1.像素

屏幕是由一个一个发光的小点构成的，这一个个的小点就是像素
分辨率：1920 × 1080 说的就是屏幕中小点的数量
在前端开发中像素要分两种情况讨论：CSS 像素和物理像素
物理像素：上述所说的小点点就属于物理像素
CSS 像素：编写网页时，我们所用的像素都是 CSS 像素
浏览器在显示网页时，需要将 CSS 像素转换为物理像素然后再呈现。一个 CSS 像素最终由几个物理像素显示，由浏览器决定：默认情况下在pc端，一个 CSS 像素 = 一个物理像素

2.视口（viewport）

视口就是屏幕中用来显示网页的区域
可以通过查看视口的大小，来观察 CSS 像素和物理像素的比值
默认情况下：视口宽度 1920px（CSS像素）1920px（物理像素）此时像素比是 1:1
放大两倍的情况：视口宽度 960px（CSS像素）1920px（物理像素）此时像素比是 1:2
我们可以通过改变视口的大小，来改变 CSS 像素和物理像素的比值

3.手机像素

在不同的屏幕下，单位像素的大小是不同的，像素越小屏幕会越清晰。
智能手机的像素点远远小于计算机的像素点
默认情况下，移动端的页面都会将视口设置为980像素（CSS像素）以确保pc端网页可以在移动端正常访问，但是如果网页的宽度超过了980，移动端的浏览器会自动对网页缩放以完整显示网页
https://material.io/resources/devices/
所以基本大部分的pc端网站都可以在移动端中正常浏览，但是往往不会有一个很好的体验，为了解决这个问题，大部分网站都会专门为移动端设计网页
每一款移动设备设计时，都会有一个最佳的像素比，一般我们只需要将像素比设置为该值就可以得到一个最佳效果。将像素比设置为最佳像素比的视口大小我们称其为完美视口
将网页的视口设置为完美视口 <meta name="viewport" content="width=device-width,initial-scale=1.0">

4.vw单位

由于不同设备视口和像素比不同，所以在移动端开发时，就不能再用 px 来进行布局了
vx 表示的是视口的宽度（viewport width）
100vw = 一个视口的宽度 1vw = 1%视口的宽度 vw 这个单位永远相当于视口宽度进行计算
移动端网页设计图的宽度通常为 750px 1125px
需要知晓设计图上元素在移动端的大小要换算 vw 单位
vw 适配方案：设置 html 根标签的 font-size 为 1px 所换算的 vw 的整数倍然后通过 rem 单位换算来设置元素的大小

5.媒体查询

响应式布局：网页可以根据不同的设备或窗口大小呈现出不同的效果
使用响应式布局，可以使一个网页适用于所有设备
响应式布局的关键就是媒体查询。通过媒体查询可以为不同的设备，或设备不同状态来分别设置样式
媒体查询语法：@media 查询规则 {} 媒体类型：all 所有设备 print 打印设备 screen 带屏幕的设备 speech 屏幕阅读器可以使用逗号连接多个媒体类型
可以在媒体类型前加 only 表示只有，这主要是为了兼容老版本浏览器
媒体特性：width 视口的宽度 height 视口的高度 min-width 视口的最小宽度（视口大于指定宽度时生效）max-width 视口的最大宽度（视口小于指定宽度时生效）
例：@media（max-width：500px）{ body {background-color：#bfa } }
多个媒体特性之间可以用 and 逗号 only not 连接
样式切换的分界点，我们称其为断点，也就是网页的样式会在这个点时发生变化，一般常用断点：小于768 超小屏幕 max-width=768px 大于768 小屏幕 min-width=768px 大于992 中型屏幕 min-width=992px 大于1200 大屏幕 min-width=1200px

Web前端 CSS3 CheckList（三）