技术博客
用 position: relative 时，元素仍占原文档流位置，位移不影响其他元素；用 position: absolute 后，元素脱离流，父容器必须设 position: relative 或 absolute 才能以它为参考系。动画起点若需“原地出发再滑走”，选 relative；若要“从屏幕某固定区域飞入”，比如右上角通知，就得用 absolute 配合 top/right 定位。
不是所有 CSS 属性都能被 transition 动画化，写错了就完全没效果，连控制台都不报错，纯靠肉眼“感觉不动”。关键看浏览器是否把该属性列为「可动画化属性」（animatable）。
浏览器只在元素真正处于全屏状态（即通过 Element.requestFullscreen() 进入）时，才匹配 :fullscreen 伪类。直接写 CSS 却没调用 JS 全屏 API，样式必然不会触发。
CSS 里根本不存在「100个颜色属性」——这是对 CSS 颜色体系的严重误解。真正可用的颜色相关属性只有 color、background-color、border-color、outline-color、fill、stroke 等寥寥几个，其余全是「值」，不是「属性」。
CSS里的孤行问题，不是“页面只有一行字”这种字面意思，而是指段落末尾或标题开头单独被挤到新行、和主体内容断开——比如一个两字标题简介在窄屏上被强行拆成“简”在上一行、“介”在下一行，或者标题单独占顶、下面正文却空出一大截。这种断裂感在移动端特别刺眼，因为视口宽度小、行高相对大，line-height和font-size稍一变化就容易触发。
因为默认样式太难看，且老浏览器不支持。Chrome 12+、Firefox 49+、Safari 6.2+ 支持，Edge 79+ 也行；IE 全系不支持。如果你的项目要兼容 IE 或旧安卓 WebView，就得换方案。
直接说结论：纯CSS做不到监听外部样式表是否加载完成，所谓“CSS加载状态过渡”，本质是用JS触发、CSS实现视觉反馈，伪元素只是其中一种低成本的视觉方案。
根本原因是它依赖 transform 和 opacity 的初始值触发 CSS 动画，但很多场景下元素加载时已处于“终态”，浏览器跳过动画。比如用 display: none 切换显示、或 JS 动态插入后立刻加 class。
根本原因是 ::after 初始状态没设透明或隐藏，浏览器渲染时先画出默认宽度的下划线，再缩放/位移——人眼就看到“闪”。必须让伪元素初始不可见，且用 transform 配合 transition 控制变化路径。
for 属性必须精确匹配 input 的 id 值，大小写、连字符、下划线都算不同 ID。常见错误：