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
css
.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 动画来实现平滑的过渡效果，而不是直接修改样式
url到页面渲染完成经过了哪些步骤
- 输入 URL，DNS 解析域名拿到 IP（DNS域名解析）
- 建立 TCP 连接，发起 HTTP/HTTPS 请求（TCP三次握手）
- 服务器返回 HTML 等资源
- 浏览器解析 HTML 生成 DOM，解析 CSS 生成 CSSOM
- 遇到 JS 会阻塞解析并执行
- 合并 DOM 与 CSSOM 生成渲染树
- 依次进行布局（重排）、绘制、图层合成
- 页面渲染完成，展示给用户
动画优化
CSS 动画优化
- 优先使用
transform、opacity，只触发合成，不触发重排重绘 - 开启硬件加速：
will-change: transform;或transform: translateZ(0); - 避免使用
left/top/width/height做动画，会频繁重排 - 动画元素单独提升为独立图层，减少重绘区域
- 减少嵌套层级，降低渲染压力
JS 动画优化
- 使用
requestAnimationFrame替代setInterval/setTimeout - 避免频繁操作 DOM 样式，集中修改或用 class 切换
- 缓存布局信息，防止多次强制同步布局
- 复杂动画用 Web Animations API，兼顾性能与控制
- 页面不可见时，用
cancelAnimationFrame暂停动画