-
Grid容器只需最外层设display:grid，内部用grid-column/row定位；避免冗余嵌套、滥用margin和subgrid，优先用gap、grid-template-areas及align-self等高效方案。
-
Word中HTML图片旋转错乱源于EXIFOrientation字段被误处理，根本解决法是清除该元数据并物理重排像素：用exiftool执行“exiftool-Orientation=1-n-ofixed.jpgoriginal.jpg”，确保Orientation值为1且视觉方向正确。
-
SVG可通过内联、img标签、object标签或CSS背景图嵌入HTML；内联和object支持CSS与JavaScript控制样式及交互，img仅用于静态显示；通过width、height和viewBox实现响应式；JavaScript可操作内联SVG实现动态效果，需根据交互需求选择合适方式。
-
text-shadow是HTML5唯一原生支持的跨浏览器发光文字方案，通过多层零偏移、递增模糊半径的阴影叠加实现均匀光晕效果，需兼顾对比度、性能与可访问性。
-
使用百分比宽度可实现响应式布局，元素宽度随父容器变化，配合box-sizing:border-box和媒体查询优化，适用于栅格系统、图片容器等场景。
-
before()方法用于在被选元素前插入内容，作为兄弟节点出现；2.可插入HTML字符串、DOM元素、jQuery对象等；3.与prepend()（内部插入）和after()（后置插入）不同，before()在外部前置内容。
-
使用transition属性设置按钮悬停动画，推荐指定具体属性如background-color和transform以优化性能；2.通过:hover伪类定义悬停样式，实现颜色变化和translateY上移效果；3.添加box-shadow过渡增强立体感，从默认浅阴影变为悬停时深阴影；4.避免在:hover中定义transition，优先使用transform和opacity减少重排，确保动画流畅并适配移动端交互。
-
PSD文件无法直接导入HTML5编辑器，必须经Photopea导出为JSON+Base64PNG，再通过JavaScript加载并手动创建DOM元素还原图层，文字属性需额外转换补全。
-
本文讲解如何正确遍历JavaScript中的嵌套对象，提取每一项中特定键（如numberOfDrinks）的数值，并高效计算其总和，避免常见索引错误。
-
通过设置flex-shrink:0防止关键元素被压缩，并使用flex-wrap:wrap实现子元素换行，结合min-width与flex-basis控制尺寸，可有效解决容器宽度不足时的布局问题，提升页面自适应能力。
-
策略模式通过封装不同算法并允许运行时切换，提升代码灵活性与可维护性。以促销折扣计算为例，定义normal、gold、platinum、diamond等策略对象，结合PriceCalculator类实现动态切换，避免冗长条件判断。支持开闭原则，新增策略无需修改原有代码，适用于表单验证、排序、支付方式等场景。可通过StrategyContainer实现动态注册与执行，增强扩展性。
-
JavaScript的垃圾回收通过标记-清除算法自动释放内存，减轻开发者负担。引擎从根对象出发标记可达对象，清除未标记的垃圾对象。虽有引用计数但因循环引用问题已少用。频繁创建对象、闭包引用、未解绑事件或定时器、保留无效DOM引用等会导致内存泄漏和GC压力。优化措施包括及时解除监听、清除定时器、避免不必要的引用、主动置null、使用对象池和文档片段。借助ChromeDevTools的Memory和Performance面板可分析堆快照、发现脱离DOM的节点树及GC停顿情况。良好编码习惯能有效减少内存问题，提
-
fr是剩余空间的份数，如1fr2fr1fr将剩余空间分为4份；混用fr与px时fr仅分配扣除px后的剩余空间；需用minmax()或clamp()防布局崩溃，设min-width:0防内容撑宽，并注意auto不拉伸、align-self才控制子项填满。
-
dataset属性仅映射HTML中初始声明的data-*属性，动态设置不会同步到DOM；推荐用setAttribute/getAttribute确保数据持久化与兼容性。
-
transition无效的主因是hover前后属性类型不匹配：需确保属性名一致、值类型可插值（如颜色/长度/opacity）、初始值非auto/unset，且避免使用display/visibility等不可过渡属性。
