h5c3

href & src

• href：用于指定超链接目标的地址，即告诉浏览器链接指向的资源位置。常用该属性的html标签有a（超链接）、link（引入外部资源如样式表）等。
• src：用于指定嵌入资源的路径，即告诉浏览器要嵌入到当前页面中的资源在哪里。常用该属性的html标签有img（图片）、script （脚本）、iframe（内嵌框架）、embed（嵌入外部内容）、object（插入对象）等。

盒子模型

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

grid布局

• repeat(3, 1fr) 重复三份（均分）
• grid-gap 分别是row gap 和 column gap

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-gap: 10px;
}

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 动画来实现平滑的过渡效果，而不是直接修改样式