-
本文介绍如何利用浏览器原生的IntersectionObserverAPI，在用户滚动至指定WordPress代码区块（如自定义动画容器）时才启动JavaScript动画，避免页面加载即执行、提升性能与用户体验。
-
放大镜层必须用position:absolute并设父容器position:relative，避免错位；坐标计算需用getBoundingClientRect()并减去scroll/transform偏移；高清屏下Canvas要按devicePixelRatio缩放并提供2x图。
-
推荐用[class^="icon-"]精确匹配以"icon-"开头的class属性值，但需注意它匹配整个class字符串开头；更稳妥的是添加统一前缀如btn-icon，再用.btn-icon.icon-search等组合选择器。
-
margin:0无法清除非margin类型的默认间距，如padding、逻辑属性（margin-block）、用户代理样式表的继承值或Flex/Grid的gap/对齐间隙；需用开发者工具定位真实来源并针对性重置。
-
本文详解如何使用TailwindCSS的Flexbox工具类（如flex、justify-between、w-full）精准实现导航栏三区布局：左侧品牌名、居中导航项、右侧登录按钮，并纠正常见宽度与嵌套层级误区。
-
Canvas2D的context.filter='blur(8px)'是最直接实现柔焦效果的方法，本质为高斯模糊，仅对后续绘制生效，建议模糊值设为4px–12px，超16px易卡顿。
-
box-sizing:border-box是怎么解决margin帽子问题的它不解决margin帽子问题——box-sizing对margin完全没影响。很多人误以为设成border-box就能“让margin不撑开盒子”，其实它只管width/height是否包含padding和border，margin始终在盒模型最外层，永远会撑开父容器（或触发外边距合并）。真正让margin不撑大父容器的常见场景多数人想解决的是：子元素margin-top导致父容器顶部被
-
用document.querySelectorAll('h2,h3')遍历标题，为空id时按规则生成唯一合法id，构建带#href的a标签插入<navid="toc">，配合scrollIntoView和scroll-margin-top实现平滑锚点跳转与头部避让。
-
select元素添加required属性可触发浏览器原生必填验证，但必须配合value=""的默认option，否则无效；title属性对验证无作用，自定义提示需用setCustomValidity()。
-
将HTML5页面发布到线上服务器需五步：一、整理并验证本地文件及资源；二、选择虚拟主机、云服务器、对象存储或静态托管服务并配置；三、用FTP等工具上传文件至服务器根目录；四、配置域名DNS解析指向服务器IP或CNAME；五、通过多设备多浏览器测试访问效果与兼容性。
-
HMR通过模块热替换与框架协作保留应用状态。当代码修改时，Webpack等工具触发更新，ReactFastRefresh或VueHMR会尝试用新代码替换旧模块而不卸载组件实例，从而保留useState、data等局部状态，并重新渲染视图。该机制依赖模块接受更新、内存中代码替换及框架层协调，如React保留函数组件状态、Vue更新选项对象并维持响应式数据。但涉及全局状态（Redux/Vuex）、Context变更、副作用清理、key变化或高阶组件时，可能触发回退至重挂载或整页刷新，导致状态丢失。因此，HMR
-
PurgeCSS不删除动态生成的class，只识别源码中静态出现的class字符串；需通过safelist、whitelistPatterns或defaultExtractor处理动态情况，并确保其在CSS压缩前执行。
-
在Next.jsAppRouter中无法直接从服务端访问localStorage，需改用HTTP-onlyCookie存储令牌，并通过服务端fetch调用/api/auth/me完成身份验证与用户数据预取。
-
解决父元素高度塌陷的关键是清除浮动，常用方法包括伪元素clearfix、overflow:hidden、display:flow-root等，推荐使用display:flow-root或::after伪元素清除法，确保父容器正确包裹浮动子元素，避免布局错位。
-
background-position以背景图片左上角为锚点，相对于容器内容区左上角定位；px值表示图片左上角的偏移量，百分比值按“图片对应比例位置对齐容器对应比例位置”计算，顺序必须水平在前垂直在后。
