[ 深入理解CSS | 青训营笔记]

2023-05-09 64 阅读1分钟

深入理解CSS

基础知识

Casading规则，选择器，继承，值和单位，盒模型

层叠(Casading)，优先级

层叠三大原则：

样式表来源
选择器优先级:内联>id(#)>class(.)=attribute=pseudo-class>type=pseudo-element
源码位置

继承

CSS的值和单位

盒模型

盒模型可以实现一些展现形式：实现三角形，实现固定比例矩形，实现渐变边框

布局和定位

布局：常规流，弹性盒子，Grid，定位

常规流布局

外部显示类型为block（块级盒子），外部显示为inline(内联级盒子)

BFC(格式规范)，内部显示类型flow-root，块级格式化上下文

如何触发BFC？

满足其一即可

display:flow-root | inline-block
position:absolute | fixed
float:不为none
over:不为visible

外边距塌陷原因：

兄弟元素之间
父子元素之间
空元素

消除方法：

增加border，padding或内联元素
如果是父子元素之间，可设置父元素为BFC

定位

relative，absolute，fixed，sticky

层叠上下文

形成新的层叠上下文的条件：

opacity小于1
transform不为none
will——change不为通用值

变形，过渡，动画

transform （2D）：

transform：translate（移动），rotate（旋转），scale（放缩），matrix（变形矩阵）
transform-origin：right top，center

transform （3D）：

transform：translate3d（移动），rotate3d（旋转），scale3d（放缩），matrix3d（变形矩阵）
transform-origin：right top，center
perspective-origin:(观看者位置)

响应式设计

响应式设计原则，媒体查询，相对长度，绝对长度和视图

CSS生态相关

语言增强：预处理器和后处理器

工程架构：CSS模块化，CSS-In-Js，Atomic CSS