写在前面
算是一些学习css的感悟
- CSS 的语法规则和属性非常丰富
- 学习 CSS 的同时，需要注意掌握 HTML 的结构和语义
- CSS 的样式层叠机制比较复杂，需要深入理解和掌握
基础知识
层叠三大原则
- 层叠性：CSS 样式可以叠加，如果多个选择器选择了同一个元素，并且样式属性冲突，那么根据优先级和源代码中出现的顺序，浏览器会按照一定的规则决定应该采用哪一个样式属性。优先级的计算方法可以参考 CSS 优先级的计算方法。
- 继承性：某些属性会被其父元素继承，也就是说，如果父元素设置了某个属性，子元素可以继承这个属性，如果子元素没有自己的样式，就会使用继承的样式。
- 优先级：
tips
- 选择器尽量少用id
- 尽量不要用! important
- 自己的样式加载在引用库样式的后面
盒模型
CSS盒模型指的是在网页中，每个HTML元素被视为一个矩形的盒子，它由四个部分组成：内边距（padding）、边框（border）、外边距（margin）和内容区域（content）。这个模型影响了一个元素的大小、位置和布局。
- padding、border、margin中，只有margin可以设置负值
布局
grid布局
适用于大面积和整体布局
Flex
应用于小面积或者组件
层叠上下文
当一个元素成为层叠上下文时，它的所有子元素都在同一个层叠上下文中，除非子元素自身也成为另一个层叠上下文。
如果一个元素没有任何属性创建新的层叠上下文，则它将继承父元素的层叠上下文。
形成新的层叠上下文的条件:
- position: relative或absolute;并且z-index不是auto
- position: fixed或sticky
- flex 或grid的子元素;并且z-index不是auto
- opacity 的值小于1
- transform 的值不为none
- will-change 的值不为通用值
- 详见规范* .
变形 过渡 动画
transform
transform 是一个可以让元素在不改变其文档流和位置的情况下进行变形的属性。它可以用来实现许多动态效果，例如旋转、缩放、移动、扭曲等等。
transition
通过指定某些元素属性从一种起始状态，在一段时间内以某种变化节奏，过渡到终止状态
animation
步骤如下，
- 定义动画关键帧：使用@keyframes规则定义动画的起始状态、终止状态和中间状态。
- 指定动画属性：使用animation属性指定动画的持续时间、延迟时间、重复次数、动画方式等。
- 触发动画：将动画属性应用于要动画的HTML元素上。
