FE复习企划——4. CSS高级

4.1 CSS Transform

none	定义不进行转换。
translate(x,y)	定义 2D 转换。
translate3d(x,y,z)	定义 3D 转换。
translateX(x)	定义转换，只是用 X 轴的值。
translateY(y)	定义转换，只是用 Y 轴的值。
translateZ(z)	定义 3D 转换，只是用 Z 轴的值。
scale(x[,y]?)	定义 2D 缩放转换。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	通过设置 X 轴的值来定义缩放转换。
scaleY(y)	通过设置 Y 轴的值来定义缩放转换。
scaleZ(z)	通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿着 X 轴的 3D 旋转。
rotateY(angle)	定义沿着 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle)	定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle)	定义沿着 X 轴的 2D 倾斜转换。
skewY(angle)	定义沿着 Y 轴的 2D 倾斜转换。
perspective(n)	为 3D 转换元素定义透视视图。

4.2 CSS Transition

transition CSS 属性是 transition-property，transition-duration，transition-timing-function 和 transition-delay 的一个简写属性。

• transition-property 指定应用过渡属性的名称。

• transition-duration 属性以秒或毫秒为单位指定过渡动画所需的时间。默认值为 0s ，表示不出现过渡动画。

• transition-timing-function 属性用来建立一条加速度曲线，因此在整个transition变化过程中，变化速度可以不断改变。

• transition-delay属性规定了在过渡效果开始作用之前需要等待的时间（延迟时间）。
  

4.3 CSS Animation

• animation-name属性表示关键帧 @keyframes 的名字
• animation-duration属性表示动画持续的。
• animation-timing-function属性定义关键帧之间的过渡快慢。
• animation-delay属性定义动画播放的延迟
• animation-iteration-count属性定义动画重复的次数
• animation-delay CSS属性定义动画于何时开始，即从动画应用在元素上到动画开始的这段时间的长度。
• animation-iteration-count CSS 属性 定义动画在结束前运行的次数 可以是1次 无限循环.
• animation-direction 属性定义动画播放的方向，正序播放、倒序播放、正反交替播放，

4.4 响应式设计

4.1设置viewport

视口(viewport)代表当前可见的计算机图形区域。在 Web 浏览器术语中，通常与浏览器窗口相同，但不包括浏览器的 UI， 菜单栏等。https://developer.mozilla.org/zh-CN/docs/Web/CSS/Viewport_concepts

• 在尺寸较大的设备中，在这些设备上，应用显示区域不一定是全屏的，viewport 是浏览器窗口的大小。
• 在大多数移动设备中，浏览器是全屏的，viewport 是整个屏幕的大小。
• 在全屏模式下，viewport 是设备屏幕的范围，窗口是浏览器窗口，浏览器窗口大小小于或等于视口的大小，并且文档是这个网站，文档的大小可比 viewport 长或宽。

4.2图片尺寸设置

max-width 属性用来给元素设置最大宽度值. 定义了max-width的元素会在达到max-width值之后避免进一步按照width属性设置变大.

max-width 会覆盖width设置, 但 min-width设置会覆盖 max-width.

4.3背景图片设置

• cover：缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。cover 值尽可能大的缩放背景图像并保持图像的宽高比例（图像不会被压扁）。该背景图以它的全部宽或者高覆盖所在容器。当容器和背景图大小不同时，背景图的 左/右 或者 上/下 部分会被裁剪。

• contain：缩放背景图片以完全装入背景区，可能背景区部分空白。contain 尽可能的缩放背景并保持图像的宽高比例（图像不会被压缩）。该背景图会填充所在的容器。当背景图和容器的大小的不同时，容器的空白区域（上/下或者左/右）会显示由 background-color 设置的背景颜色。

4.4媒体查询

4.5使用不同尺寸的图片

4.6文字rem

article的font用rem（根元素html的字体大小）为单位，根据设备改变根标签字体大小，即可适配

4.5 处理 CSS 兼容性

处理浏览器不支持的情况

[外链图片转存中…(img-QIO7XPuU-1625625942368)]

[外链图片转存中…(img-al4rfNmR-1625625942368)]

[外链图片转存中…(img-KudcsBwL-1625625942369)]