技术博客
它让元素的 width 和 height 包含 padding 和 border，而不是只算 content 区域。默认的 content-box 模式下，加了 padding: 20px 和 border: 2px solid 后，实际占用宽度 = width + 40px + 4px，很容易撑破容器或导致兄弟元素重叠。
常见现象是：本地开发一切正常，上线后按钮没颜色、布局错乱、display: none 意外生效。这不是 bug，而是 CSSNano 默认启用了 aggressive 的转换规则，比如把 background-color: transparent 简化成 background-color: 0（部分老浏览器不认），或合并看似重复的 @media 查询却误删了带 JS 动态 class 的关键选择器。
元素没设 top（或 bottom）值，或者父容器没设置高度/溢出限制，position: sticky 就直接退化成 static。它不是“自动吸顶”，而是依赖触发阈值和容器边界共同生效。
响应式图片出问题，八成是因为显式设置了 height 值，比如 height: 200px 或 height: 100%。一旦设了固定高度，max-width: 100% 就救不了它——宽缩了，高还卡死，必然变形。
这两个伪类只对带 min/max 属性的数值型输入框生效，且浏览器必须实际解析出有效数值范围。常见失效原因不是写法错，而是类型或属性缺失。
它不是真正的电影级调色，而是用 filter: url(#my-lut) 或 background-image: url(lut.png) 借助 3D 查找表（Look-Up Table）对颜色做批量映射。浏览器不原生支持 .cube 文件解析，必须转成可渲染格式——比如一张 64×64×64 的 PNG（实际是 64×64 网格，每格代表一个 RGB 输入对应的输出），或 SVG <fecomponenttransfer></fecomponenttransfer> 模拟查表逻辑。
因为@content必须配合@include调用时传入的代码块，它本身不是变量也不是返回值，而是一个“占位注入点”。如果Mixin定义里写了@content，但调用时没带花括号包裹的内容，Sass编译器会直接抛错：Content block not provided。
光泽感本质是模拟高光+阴影的物理反射，CSS 里靠 box-shadow 的多层偏移和透明度控制来骗过人眼。不是加得越多越好，通常 2–3 层足够：一层紧贴边缘的浅色高光（正偏移、小模糊），一层稍远的深色压暗（负偏移、稍大模糊），可能再加一层极淡的底层衬托。
JIT 模式不是“实时生成 CSS 文件”，而是按需解析源码中的 class 字符串，只生成实际用到的工具类规则。它跳过了传统扫描全项目 HTML/JSX 的步骤，改用 AST 分析（如 PostCSS 插件 + 正则 fallback）提取 class 名字，再动态构造对应 CSS 声明。
不会失效，但容易误以为失效——根本原因是flex的主轴对齐（如justify-content）和grid自身的尺寸行为存在隐式冲突。比如父flex项默认min-width: auto，而子grid若没设宽，可能被压缩到内容宽度，看起来“没铺开”。