-
浮动导致父容器高度塌陷为0，使后续元素从顶部堆叠；clearfix伪元素清除需content:""、display:table、clear:both三者齐全且作用于直接父容器。
-
用[attr*=value]可匹配属性值中任意位置包含子串的元素，如[title*="error"]；但class属性慎用此写法，易误匹配，应优先使用类选择器或[class~="word"]。
-
z-index对SVG内部元素完全无效，因其渲染依赖DOM书写顺序而非CSS层叠上下文；唯一可靠层级控制方式是调整元素在<svg>中的先后位置。
-
答案：通过为表格单元格设置position:relative，可使其成为绝对定位元素的包含块，从而在单元格内精确控制如角标等子元素的位置。结合实际场景，在td中添加relative定位并配合absolute定位的badge类，能实现“新”标签位于单元格右上角的视觉效果；需注意设置固定尺寸、管理z-index层级，并避免在rowspan或colspan中复杂布局，以确保兼容性与稳定性。
-
font-size不支持平滑CSS过渡，应改用transform:scale()配合transform-origin实现视觉平滑缩放；响应式场景优先使用clamp()+transition:font-size；强制过渡需JS插值。
-
用<optgroup>实现分组并控制默认选中：需用label属性定义分组，仅包裹<option>；默认选中可通过selected属性、select.value或selectedIndex设置，但须注意DOM渲染时机与浏览器兼容性差异。
-
本文详解在Cypress中通过cy.waitUntil()实现自定义显式等待的正确方法，重点解决因误用cy.get()导致的超时失效问题——必须改用Cypress.$()避免命令链超时干扰，并提供可直接复用的代码示例与关键注意事项。
-
虚拟列表不能用display:none切换元素，因浏览器仍会为所有隐藏元素计算布局、生成渲染树，导致内存暴涨和卡顿；其核心是“不创建”而非“隐藏”，只渲染视口及缓冲区节点，DOM节点数应控制在20–100个以内。
-
该用且应优先使用Grid布局，但需排除IE11兼容场景；推荐用grid-template-areas定义中后台骨架，配合grid-area命名；禁用grid-auto-flow:dense以防破坏可访问性；响应式宜采用minmax()+auto-fit+repeat()组合。
-
用--radius自定义属性统一管理圆角是最轻量易维护的方式，需全局引用、避免硬编码，并通过calc()或分层变量（如--radius-btn）应对差异化需求，同时注意Safari兼容性及响应式缩放问题。
-
标签函数可拦截模板字符串解析，接收静态片段数组和插值值数组，支持原始字符串访问、HTML转义、嵌套模板及异步求值。
-
HTML本身不受高海拔影响，但GeolocationAPI海拔数据误差大、altitudeAccuracy常为undefined；低温低气压可能导致浏览器进程异常终止；弱网环境易致fetch超时、CDN加载慢、WebSocket卡住。
-
用CSS@keyframes实现气泡上升动画需定义位移、缩放与透明度变化，配合position:absolute、transform:translateY()及animation-delay错峰触发，推荐伪元素+自定义类控制延迟与渐变效果。
-
background-attachment:fixed失效主因是父容器设置了transform、perspective、will-change或filter，导致其降级为scroll行为；iOSSafari中还受原生滚动限制，常表现为粘滞或跳帧。
-
使用requestAnimationFrame结合transform和opacity动画可提升性能，避免强制同步布局，减少重排重绘，确保动画流畅。
