-
PostCSS-pxtorem不再推荐用于新项目，因其依赖固定根字体大小、无法响应式适配且易与viewport混用导致缩放错乱；真机上常因iOS重设font-size、Android精度不一及忽略initial-scale而变小或错位；推荐改用lib-flexible+JS动态设置htmlfontSize，基于screen.width×devicePixelRatio实时计算并监听resize/orientationchange防抖更新。
-
opacity动画需配合transition才能实现淡入，直接修改值无过渡效果；遮罩层须脱离文档流并用定位+层级控制；初始opacity必须显式设为数值，移动端应避免依赖:hover。
-
锚点跳转失效主因是id重复、非法字符、隐藏或DOM未就绪；href需规范书写，注意大小写与路径；CSS用scroll-margin-top或JSscrollIntoView补偿固定导航栏；SPA中需手动处理hash定位。
-
HTML中直接敲空格失效是因浏览器执行空白折叠；应优先用CSS（如margin、gap）控制间距，仅在无CSS环境才选用语义匹配的空格实体（如 、 ）。
-
flex-wrap:wrap是让flex项目在主轴空间不足时自动换行的属性；默认nowrap会强制单行溢出，当容器宽度不足以容纳所有子项、需实现响应式布局（如导航栏、卡片网格）时必须显式设置。
-
Vue响应式失效的根本原因是操作了非代理对象副本或绕开追踪路径。新增属性需显式接入：Vue2用$set，Vue3用Object.assign；数组索引赋值须用变异方法；解构需toRefs；异步数据应合并而非替换引用。
-
onclick、contenteditable、draggable和enterkeyhint是四个真正能省JS或大幅简化交互的HTML属性：onclick用于快速原型点击逻辑，contenteditable实现原生编辑，draggable开启拖放起点，enterkeyhint优化移动端软键盘语义。
-
必须用strong而不是b当文字承载「不可省略的重要性」时，如表单错误提示、关键金额、法律风险文案等，因strong提供语义权重、读屏器强调、SEO识别及工具链解析能力，而b仅为纯视觉加粗且无语义。
-
本文详解如何通过Flexbox布局控制Angular项目中按钮的垂直分组与换行，使前两个按钮并排显示、第三个按钮独立居中置于下方，兼顾语义结构与响应式可维护性。
-
使用@keyframes定义动画关键帧，通过transform的scale()和rotate()组合实现图片缩放旋转，再用animation属性应用到图片，可设置时长、缓动、循环等参数，配合:hover还可触发悬停动画，注意transform需统一声明避免覆盖。
-
全选checkbox失效主因是事件绑定时机不当、子项状态变更未同步更新全选框、动态添加商品未用事件委托及DOM与数据不同步；需确保DOM加载完成再绑定、双向监听、事件委托及数据状态同步。
-
用CSS变量+clamp()+border-radius组合才能真正统一平滑控制响应式卡片圆角；硬写像素或仅用Bootstrap类易致小屏露白边、大屏显生硬。
-
favicon是浏览器标签页等位置显示的小图标，必须添加以避免404请求和警告；最简方式是将favicon.ico放根目录并在head中用<linkrel="icon"href="/favicon.ico"type="image/x-icon">引入。
-
HTML标签嵌套合法性必须依赖HTML5规范解析器验证，而非肉眼、正则或AutoCloseTag/Emmet等插件；推荐使用W3Cvalidator或html-validate工具，确保DOCTYPE和charset声明正确以避免怪异模式导致校验失准。
-
:focus-within不能直接实现“点击任意处关闭弹窗”，因为它仅响应焦点进出，不监听点击事件或鼠标位置；其关闭效果实为焦点流失所致，且在Firefox中存在兼容性问题，无法可靠响应空白区域点击。
