css

盒子模型

所有的标签都可以看成是一个盒子，盒子模型包括：content、padding、border、margin

css选择器优先级

!import > 行内 > id > class > 标签 > 全局

隐藏元素

• display: none;
• visibility: hidden;
• opacity: 0;
• position: absolute;
• clip-path: rect(0,0,0,0);

px & rem

• px 像素
• rem 相对单位 基于根元素的字体大小

重绘 & 重排

• 重排（回流）：布局引擎会根据所有的样式计算出盒模型在页面上的位置和大小
• 重绘：计算好盒模型的位置、大小和其他一些属性之后，浏览器就会根据每个盒模型的特性进行绘制

水平垂直居中

• flex
• position + margin
• position + transform
• grid
• table

伪类 & 伪元素

• 伪类是指某个元素在处于某种状态下会添加的样式
• 伪元素是创建不在文档树里面的元素进行展示

CSS容器查询能否替代媒体查询

• 容器查询：允许你根据一个元素的容器宽度（或其他尺寸） 来应用样式，而不是根据整个视口（viewport）的尺寸
• 媒体查询：则是根据视口的尺寸来应用样式。

项目	媒体查询	容器查询
依据	屏幕宽度	容器宽度
粒度	页面级	组件级
灵活性	低	高
可复用性	低（依赖上下文）	高（组件自包含）
未来趋势	基础能力	现代响应式核心

不能完全替代

响应式开发中如何避免窗口大小监听导致的重排抖动

• 防抖节流：对窗口大小变化的监听事件进行节流或防抖处理
• 减少DOM操作：避免触发不必要的重排和重绘
• CSS动画：对于一些需要动态调整的元素，可以使用 CSS 动画来实现平滑的过渡效果，而不是直接修改样式