-
使用Flexbox可高效实现复杂导航布局，尤其适用于响应式设计。通过设置nav为display:flex，可灵活控制对齐、方向与空间分配，轻松构建含多级菜单、居中标志及两侧按钮的导航结构。
-
本文详解如何通过配置scales.x.display和scales.y.display为false，彻底隐藏Chart.js中残留的X/Y坐标轴线条（即“轴线”本身），解决仅关闭grid边框后仍可见的黑线问题。
-
JavaScript生成器是能暂停和恢复执行的特殊函数，通过yield交出控制权并返回值；用function*声明，调用后返回可迭代的生成器对象，其next()方法逐步执行并返回{value,done}。
-
手机浏览器页脚抖动主因是viewport高度动态变化导致bottom:0定位跳变，应改用100vh布局、禁用缩放、viewport-fit=cover修正，并辅以JS锁定初始视口高度及overscroll-behavior等优化。
-
Bulma通过container、columns网格和响应式类实现响应式布局。使用container控制内容宽度，结合mobile、tablet、desktop等断点，通过is-half-tablet、is-one-third-desktop等类设置列宽，利用is-hidden-mobile、is-visible-desktop等控制元素显示，配合is-multiline和is-gapless调整布局，无需JavaScript即可构建多端适配的页面。
-
Safari旧版本（iOS12.2及更早、macOSMojave及更早）中position:sticky完全不生效，非前缀可修复；可靠支持始于Safari13.1（iOS13.4），此前需JSfallback并注意overflow截断、fixed偏移及兼容性验证。
-
清除浮动必须作用于父元素，因为clear属性仅对同属一个BFC的紧邻浮动兄弟元素生效，无法跨层级影响子元素；浮动子元素脱离文档流导致父元素高度塌陷，故需在父元素内（如::after伪元素）触发清除以恢复正常布局。
-
浮动导致父容器高度塌陷，因浮动元素脱离文档流；推荐clearfix方案，通过伪元素清除浮动并触发BFC，兼容IE8+；现代布局可直接用flex或grid替代，天然避免塌陷。
-
<p>data-*属性必须用短横线分隔单词，浏览器自动转为camelCase供dataset使用；dataset是读写首选，仅支持字符串，禁存敏感或大量数据，非框架状态管理方案。</p>
-
可通过border-width与@keyframes结合实现按钮边框动画。1.基础扩展动画：利用伪元素设置初始border-width为0，通过关键帧在0%、50%、100%改变宽度，实现边框闪现效果；2.描边动画：使用伪元素覆盖按钮，分阶段控制border-width和元素尺寸位置，在0%-25%-50%-75%-100%关键帧中模拟逆时针逐边绘制边框；3.呼吸效果：定义pulseBorder动画，使border-width在1px到3px间循环变化，配合hover触发，营造柔和动态感。注意使用伪元素、
-
彻底关闭HTML表格默认边框需两步：为table、th、td显式设border:none，并设置border-collapse:collapse；还需排查outline、box-shadow及iOSSafari的sub-pixel渲染问题。
-
Word粘贴HTML图片时丢弃CSS边框，因仅解析基础标签属性；须转为嵌入型图片后，在“图片格式”中设置边框，并用自定义RGB色+预设样式+格式刷批量应用，导出PDF需选“标准”质量以防边框丢失。
-
冒泡排序需动态缩小内循环范围并加入提前退出机制；快排应避免纯递归以防栈溢出，改用迭代实现；sort比较函数须处理undefined；小数组用插入排序，原生sort通常最优。
-
selectonchange跳转最稳妥方式是直接绑定onchange事件并赋值window.location.href，需确保option的value为含协议的合法URL，避免相对路径、未编码字符及移动端事件延迟问题。
-
本文介绍一种简洁、可扩展的JavaScript方案，通过data属性关联播放按钮与对应音频元素，实现页面中任意位置多个音频的独立控制与互斥播放（点击新音频时自动暂停其他正在播放的音频）。
