-
用::before伪元素为标题添加装饰线需先设标题position:relative，再用content:"";、width/height、background-color及top:50%;transform:translateY(-50%);实现垂直居中，left负值控制位置，配合padding-left留白，支持多级标题、响应式与CSS变量主题切换。
-
<p>box-sizing:border-box使width/height包含content、padding和border，避免布局撑开；全局启用推荐{box-sizing:border-box;}或更精确的,::before,::after{box-sizing:border-box;}。</p>
-
本文讲解如何通过position:absolute结合transform:translate(-50%,0)实现图像在响应式多色背景（如红/黄双色渐变）分界处精确居中——无论屏幕分辨率如何变化，图像始终严格横跨两色交界，左右各占一半。
-
:focus无法单独实现标签上浮，因它仅响应焦点而不感知输入内容；需结合HTML结构包裹、CSS过渡及JS监听value和focus/blur状态来驱动动画。
-
作用域链确定变量查找路径，变量提升使var声明前置但不初始化，暂时性死区阻止let/const在声明前访问，三者共同影响JavaScript变量行为。
-
align-items:center未生效主因是父容器无明确高度或未触发BFC；需设height/min-height、避免浮动截断；absolute居中须配transform；table中vertical-align仅对内联内容有效；iOS下vh抖动可用dvh或absolute替代。
-
">
不能只靠display:none或remove()，必须标记状态+过渡属性+重排控制；因display是离散属性，无法过渡，应组合opacity和transform:translateX()实现右飘渐隐，删除前需加类、强制重绘、监听transitionend后移除。
-
td:first-child不生效是因为它要求td必须是父元素的第一个子元素，而表格中常因thead/th、换行文本节点或嵌套结构导致td并非首子节点；应改用tbodytd:first-child精准定位数据区首列。
-
translate类需确保元素为独立合成层（如加transform:translateZ(0)），避免混用触发layout的属性，注意父容器overflow:hidden及inline元素需设display:block/inline-block，transition应限定为transition-transform以保顺滑。
-
MediaRecorder必须依赖MediaStream才能工作，报错通常源于流未获取、无效或传参错误；需校验流有效性、确保HTTPS环境、避免手动stop流、正确管理生命周期。
-
浅拷贝只复制第一层，Object.assign()和展开运算符属此类，不递归处理嵌套对象；深拷贝需避开循环引用和特殊类型，JSON.parse(JSON.stringify())有诸多限制，structuredClone()更可靠但不支持function等，手写递归可定制化处理。
-
对象解构中别名（用冒号）解决命名冲突，默认值（用等号）仅对undefined生效；二者可共存，如{username:loginName='访客'}，先重命名再判断是否undefined。
-
sticky失效的根本原因是父容器未形成可滚动上下文：高度不足、overflow:hidden/auto/scroll截断、未设top等偏移值，或父容器高度≤sticky元素自身高度。
-
最简单方案是使用支持HTTPS且无域名限制的iframe天气小部件（如weatherapi.com官方embed）；若需自定义，则用其前端友好API配合key调用，注意q参数用英文名、禁用aqi减少体积。
-
直接删掉冗余的<div>和<span>比任何CSS/JS优化都有效；DOM节点超2000时，低端设备layout耗时呈指数级增长。真正拖慢渲染的是人为嵌套的“结构惯性”，如多层<div>套娃、误用<ul>渲染表单、SSR空wrapper、图标单独包层等；应优先用::before/after、gap、outline、语义化标签（如<fieldset>）替代；可通过document.querySelectorAll('*').length快速检测节点
