-
float:right不能真正反转书写顺序，因为仅改变视觉位置而不改变DOM顺序，导致可访问性、选择器和逻辑行为仍按原始HTML顺序执行。
-
绝对定位会覆盖浮动，导致float失效。应通过外层浮动+相对定位、内层绝对定位的嵌套结构实现组合效果，避免同一元素混用两者，推荐用flex或grid替代浮动以减少冲突。
-
本文介绍一种轻量、可维护的前端方案：通过JavaScript动态加载JSON文件，初始仅渲染人员姓名列表；点击任一姓名后，在页面中模态式展示该人员的完整信息（含姓名、电话、邮箱），并支持一键关闭。全程无需后端PHP参与，纯前端即可完成。
-
用::marker伪元素配合CSS计数器可精准控制有序列表序号的颜色、字体、大小和内容，是目前语义正确且现代浏览器支持的最佳方案；旧版浏览器需用li::before+ARIA降级兼容。
-
opacity会让背景越来越暗是因为它作用于整个元素及子节点，导致颜色、文字、边框等全部变淡，且多层叠加时透明度相乘（如0.5×0.5=0.25），使重叠区域明显发灰发暗；应改用rgba()仅控制背景色透明度，避免影响子元素。
-
用setInterval每30秒更新一次，首次渲染立即执行，统一处理时间戳单位（秒×1000转毫秒），避免时区错误，组件卸载时清除定时器，SSR仅静态渲染，hydration后启动定时器。
-
需结合ServiceWorker缓存、HTTP响应头控制、link预加载、JavaScript预载及localStorageBase64缓存五种方式实现图片高效缓存与预载。
-
-webkit-overflow-scrolling已废弃，iOS15+/Safari15.4+中无效且可能引发渲染异常；现代方案需同时满足：容器有明确高度（或max-height）、overflow-y:auto/scroll、启用原生滚动行为。
-
audio标签没反应？先看浏览器是否真支持你的格式不是所有.mp3、.ogg、.wav都能播——浏览器只认特定编码组合，比如Safari能播.mp3，但对某些用AAC-LC以外编码的MP3文件会静默失败；Firefox不支持.mp3的旧版解码器，却能稳定播.ogg；Chrome对.wav支持有限，尤其带IEEEFloat编码的。用ffprobeyour-audio.mp3查真实编码（别信文件后缀），重点看Stream#0:0:Audio:mp3(mp
-
HTML5结构标签本身不加快加载速度；它们仅提供语义化含义和默认ARIArole，不减少字节、不触发懒加载、不影响资源下载顺序，因此不直接提升首屏渲染或DOM构建速度。
-
本文介绍一种简洁、可维护的方式，通过数组与循环批量获取具有不同类名的DOM元素，避免重复书写冗长的getElementsByClassName语句，显著提升代码可读性与扩展性。
-
DOM提供五种文本提取方法：一、textContent获取含空白的纯文本；二、innerText获取渲染后可见文本；三、innerHTML配合临时div安全剥离标签；四、childNodes遍历提取文本节点；五、querySelectorAll结合textContent批量提取。
-
实现卡片墙布局的关键是使用CSSGrid或Flexbox。Grid通过display:grid、grid-template-columns:repeat(auto-fill,minmax(250px,1fr))和gap实现二维响应式布局；Flexbox利用display:flex、flex-wrap:wrap和flex:11250px实现一维换行排列；配合媒体查询调整小屏下的间距与宽度，确保响应式适配，推荐根据兼容性需求选择方案。
-
Async/Await是Promise的语法糖，async函数必返回Promise，await仅在async内部有效，会将后续逻辑注册为微任务，需用try/catch显式处理错误，避免与.then()混用。
-
图片在flex容器中垂直错位因inline默认基线对齐，加vertical-align或设display:block可修复；响应式需用aspect-ratio或padding-top保比例；grid布局应约束图片容器高度并慎用align-self:stretch；统一box-sizing、用clamp控制padding、检查font-size对rem的影响。
