-
移动端断点不能照搬桌面尺寸，因现代设备的视口缩放与物理像素脱钩；应基于内容溢出临界点，用min-width递增式增强，配合正确viewport设置（width=device-width），避免历史固定值和max-width覆盖。
-
使用Flexbox、Grid和多列布局可实现图片画廊。1.Flexbox通过flex-wrap和百分比宽度实现响应式排列；2.Grid利用grid-template-columns自动适配列数，更简洁；3.瀑布流用column-count创建不等高多列，适合异形图。推荐优先使用Flexbox或Grid。
-
会，display:none必然触发强制同步重排；visibility:hidden不重排但占位；flex:000+opacity:0不重排却仍占位响应；最优解是JS层过滤数据、动态渲染DOM。
-
transition不起作用需检查：color和background-color是否为明确颜色值；transition必须写在默认样式中；优先用hsl()实现顺滑过渡；合理设置cubic-bezier()曲线而非依赖delay；注意JS批量修改时的重绘触发时机。
-
flex容器内单个元素水平垂直居中需同时设置justify-content:center和align-items:center；若仅特定子元素居中可用margin:auto；justify-content不生效常见原因是父容器未设display:flex、子元素为inline或脱离文档流；column方向下二者作用轴互换，且容器需有明确高度才能体现align-items:center效果。
-
实现模态框有五种方法：一、纯CSS+HTML用:target伪类；二、原生JS控制display属性；三、CSS类名切换配合transition动画；四、封装可复用函数；五、data-*属性声明式驱动。
-
负margin是最直接兼容的“移出父容器”手段，但不脱离文档流；transform:translate()视觉位移且占位不变；position:absolute+负值才真正脱离流；overflow:visible对负定位元素无效。
-
最直接的方法是父容器设text-align:center，靠右列额外包层并设text-align:right；现代推荐Flex布局，父容器display:flex+justify-content:center，靠右列加margin-left:auto。
-
Set是JavaScript中基于SameValueZero算法的唯一值集合，自动去重、O(1)查询，语义上强调“存在性”；WeakSet仅存对象且弱引用，适用于临时标记场景。
-
JavaScript中数组操作应结合Immutable库实现不可变更新，核心是用List替代原生数组，所有操作如push、delete、set、filter、sort均返回新实例；嵌套场景用setIn/updateIn配合List；注意性能边界与负索引限制。
-
打印样式必须用@mediaprint声明，单独引入print.css并禁用交互伪类；打印机默认禁用背景、强制灰度，需用@page控制页边距，避免flex/grid布局，动态JS样式需强制重排。
-
最直接有效的JavaScript调试方式是结合浏览器DevTools断点调试、console高级用法、debugger语句及VSCode集成调试；核心在于Sources面板设断点，善用console.table/group/time/trace，条件断点与debugger配合，再通过VSCode实现源码级调试。
-
D3.js是数据驱动的SVG可视化库，需手动绑定数据与DOM元素，适合深度定制；通过select、data、enter、attr等方法构建图表，配合scale、axis、transition实现映射、坐标轴和动画。
-
MemoryCache能实现图片毫秒级渲染，关键在于URL稳定、构建产物路径可靠及HTTP缓存头合理；Vue中应避免动态参数、善用public/assets资源处理机制，并配合强缓存策略。
-
本文详解如何修复计算器上层输入表格在移动端水平溢出的问题，核心是为表单控件设置相对宽度（百分比）、结合媒体查询与语义化布局，确保所有输入字段自动适配小屏幕。
