-
必须用CSS变量存头部高度,因为JavaScript动态获取的offsetHeight会受缩放、字体加载、行高变化影响而波动,硬编码像素值易错位;CSS变量能将真实渲染高度同步给CSS,确保transform或margin-top精准抵消占位。
-
字体不显示主因是@font-face声明错误或字体路径、格式、权限问题;应检查路径准确性(推荐绝对路径)、多格式兼容性(woff2优先)、语法完整性、跨域及MIME类型配置。
-
Bootstrap通过Collapse插件实现导航菜单折叠,使用data-bs-toggle和data-bs-target控制目标元素显隐;Tailwind需结合JavaScript手动切换hidden类来控制菜单显示状态,依赖响应式前缀适配不同屏幕。
-
link[rel="import"]已被彻底移除,它从不解析HTML、不构建DOM、不执行脚本;唯一可控的替代方案是fetch+DOMParser手动解析。
-
Less变量在编译期被替换为具体值,不读取也不支持动态CSS变量;@{theme}插值不能用于属性名或var()参数;JS同步样式需通过CSS变量桥接,而非Less变量双向绑定。
-
background:rgba()不等于磨砂玻璃效果,因其仅实现半透明色块而无模糊;真磨砂需transparent背景+backdrop-filter:blur(),并确保背景固定、容器不遮挡、文字对比度达标且避开iOS硬件加速陷阱。
-
不能只靠isIntersecting判断,必须用rootMargin提前触发、滚动趋势动态调参、WeakMap去重缓存;因threshold=0仅表示露出1px即回调,无实际提前量,无法覆盖fetch+decode平均180–320ms耗时与移动端800px/s滚动速度的时间缺口。
-
最稳、最通用的做法是给<img>加display:block和margin:0auto;若图片混排在文本流中,优先用父容器text-align:center。因<img>默认为行内元素,margin:auto对其无效,必须显式设为块级才能触发自动外边距计算;text-align:center失效常因父容器无宽、被浮动/定位覆盖或错误写在<img>自身上;需双向居中时推荐父容器用display:flex;justify-content:center;align-items
-
计算属性名允许在对象字面量中用方括号包裹表达式动态生成属性名,表达式求值结果自动转为字符串作为键名,如[key]、[${prefix}Id]、[getKeyName()]等,不可加引号。
-
HTML中应优先用CSS(margin、padding、gap)实现视觉留白,仅当空格属内容本身(如“100px”)时才用 实体;全角空格和普通空格不可靠,响应式异常实为字体、换行或布局容器所致。
-
link顺序决定样式胜负,后加载的CSS会覆盖同权重的先加载样式,因此自定义CSS应置于框架CSS之后;若仍被覆盖,需检查并提升选择器权重,而非滥用!important。
-
text-overflow:ellipsis仅对单行文本生效,需同时满足white-space:nowrap、overflow:hidden和text-overflow:ellipsis;多行截断须用-webkit-line-clamp配合display:-webkit-box和-webkit-box-orient:vertical。
-
WeakValueDictionary不能单独实现LRU缓存,因为它不记录访问顺序、无容量限制、不支持O(1)访问更新,且遍历无序;必须配合双向链表与强引用锚点才能兼顾弱引用与LRU行为。
-
IndexedDB事务失效因生命周期严格:事件循环结束且无待决请求时自动终止,非持久连接;须同事务内完成关联操作,禁跨循环复用,批量写入需分批次并单独监听各请求错误。
-
grid-column-gap仅控制列间间距,不处理容器左右外边距;需配合padding实现视觉等距,推荐用gap+padding+auto-fit响应式布局。