Akira1ceAboutPostsCategories
K
CSS 笔记
创建于：2025-12-29 13:06:11
|
更新于：2026-02-26 16:41:05
#Notes

像素

  1. 物理像素（pt）：跟随设备不变例如 2k 屏幕即为 2560 x 1440
  2. 设备独立像素（px）：跟随电脑设置中的分辨率变化，1px = dpr x 1pt，dpr 为 设备分辨率缩放比。
  3. 设备分辨率缩放比（dpr）：物理宽度 / 逻辑分辨率宽度，比如说 5k 屏幕设置分辨率为 2560 x 1440，此时 dpr 为 2。
  4. 浏览器缩放：dpr = _dpr x n

定位

  1. static、relative：最近的块级容器
  2. absolute：最近 position 不为 static 的容器
  3. fixed：视口
  4. sticky：最近可滚动的容器

百分比

  1. 内外边距：参照的是容器的宽
  2. 定位属性（left、top）：参照的是容器的宽高
  3. 字体大小：参照父元素的 font-size
  4. transform.translate()： 参照元素自身尺寸

垂直方向上margin外边距存在折叠情况

行内元素特性

  1. width 和 height 属性无效
  2. 通过 line-height 属性来设置行内元素的行高
  3. 内外边距均只能在水平方向生效

vertical-align 作用于行内元素、行内块元素

BFC 的特性是不与外部元素产生交集

BFC 的实现方式

文档的根元素 html

  • 浮动元素：float: left | right
  • display: flow-root
  • overflow 值不为 visible 与 clip 的块元素：overflow: hidden | auto | scroll
  • 定位元素：position: absolute ｜ fixed
  • 行内块元素：display: inline-block
  • 表格单元格：display: table-cell
  • 表格标题：display: table-caption
  • 匿名表格单元格元素：display: table, table-row, table-row-group 等
  • contain 值为 layout、paint 或 content 的元素
  • 弹性元素的直接子元素：如果他们不充当弹性、网格、表格的容器元素
  • 网格元素的直接子元素：如果他们不充当弹性、网格、表格的容器元素

常用的方式：

  • display: flow-root
  • overflow: hidden

sticky

其包含块：最近的具有滚动机制的祖先元素的内容区域 + padding 区域。

注意：机制会随着包含块一同出现消失，也就是说如果包含块离开视口，随之粘性元素也会离开

层叠上下文

分层是浏览器优化渲染性能的重要手段之一。

有些元素并不是在基础图层的，而是在其之外的，此时浏览器会进行硬件加速进行优化，这类图片的渲染，并且这些图层上的图形操作不会影响基础图层，也就不会触发重绘、回流。

但一定要是合理的创建这些图层，否则将本末倒置。

通常是那些需要浮动起来的元素需要进行创建新的图层。

创建方式：

  1. 文档根元素 html
  2. position 为 absolute 或 relative 且 z-index 不为 auto 的元素
  3. position 为 fixed 或者 sticky 的元素
  4. flex 容器的子元素, 且 z-index 不为 auto
  5. grid 容器的子元素, 且 z-index 不为 auto
  6. opacity 属性小于 1 的元素
  7. mix-blend-mode 属性不为 normal 的元素
  8. 以下属性中, 值不为 none 的元素
    • transform
    • filter
    • backdrop-filter
    • perspective
    • clip-path
    • mask
    • mask-image
    • mask-border
  9. isolation 属性被设置为 isolate 的元素
  10. will-change 属性被设置为 transform、opacity、filter、clip-path、mask 的元素
  11. contain 属性被设置为 paint、layout、content 的元素

渲染原理

解析顺序

html 解析：

核心：深度优先遍历、栈结构。

js 解析：

<script src='' />
<script src='' async />
<script src='' defer />

三种不同的加载和解析顺序的区别在于：加载时机和执行时机。

css 解析：

其解析和 script.defer 类似。

对于重要的 css 资源，可以考虑使用 link.rel="preload" 进行预加载。

render-tree

render-tree = dom-tree + cssom-tree

Render Tree 并非是 DOM Tree 与 CSSOM 的简单合并. 他至少会经历样式计算、布局计算两个阶段。

所以理论上，css 和 js 都会阻塞 html 渲染。

只不过 超过一定时间 render-tree 就不等 cssom-tree 了。

重绘

  1. crud dom 节点
  2. 显示隐藏元素 display
  3. 读取几何属性
    1. offsetX
    2. scrollX
    3. clientX
    4. getComputedStyle()
  4. 视口操作

优化重排

  1. 变化频繁的元素脱离文档流
  2. 利用浏览器内置批处理
  3. 减少布局抖动
  4. 离线 dom 操作
  5. 使用 transform 和 opacity

白屏优化

  1. cdn 优化
  2. js/css
    1. 本地构建时压缩代码
    2. 本地构建时, 使用 tree shaking 减少无用代码的体积
    3. 本地构建时, 使用按需加载的方式, 减少首次加载的主包体积
    4. 拆包, 并延后加载地图模块等大体积的包, 确保页面先出现内容, 在第二次渲染时再渲染地图
    5. 拆包, 并延后加载非首屏内容, 主要体现为懒加载
    6. 三方模块使用按需引入的方式进行打包, 例如 antd、element-ui、lodash 等
    7. 网络传输时使用 gzip 压缩代码
  3. 请求过多
  4. 耗时 js 任务

flex

  1. justify-x：主轴对齐方式
  2. align-x: 辅轴对齐方式（content作用于整体, items作用于单个元素）
我也是有底线的 🫠