-
为页面内容设置最大宽度并居中，推荐使用容器（如.container）配合max-width:min(1440px,90vw)和margin:0auto，并约束内部元素宽度以确保响应式阅读体验。
-
Edge旧内核（12–18）仅支持同文档内联SVG滤镜，不识别外部SVG中的filter定义；必须将filter内容复制到页面内联svg中，并用filter:url(#id)引用，且需确保ID唯一、尺寸属性设为100%。
-
不能——CSS滤镜函数按声明顺序串行执行，sepia()会压缩色域，再叠加hue-rotate()易导致色相失控、发紫或无变化；精细调色需用canvas手动处理。
-
flex水平垂直居中需父容器设display:flex、justify-content:center、align-items:center及明确高度（如100vh）；grid则用place-items:center更简洁，但兼容性受限；margin:auto垂直居中仅在绝对定位+四边为0时生效。
-
用forEach当只需执行副作用操作（如打印、发请求、修改外部变量），它不返回有效值；用map当需生成新数组（如提取字段、格式化、计算），它返回等长新数组且不改变原数组。
-
video标签不加载MP4主因是路径错误或MIME类型不匹配，需用HTTP服务而非file://协议，正确配置src与source的type属性，并添加muted、playsinline等属性适配移动端自动播放。
-
图片缩放通过transform:scale()与transition结合实现，鼠标悬停时平滑放大；设置transform-origin、固定容器尺寸、提升z-index可优化体验；结合卡片容器并添加阴影变化，使用cubic-bezier调整缓动，能增强交互质感。
-
通过结合CSS的transition、transform与Flexbox、Grid布局，可实现高效流畅的动画交互。首先transition定义过渡效果，transform执行旋转缩放等视觉变化，二者配合用于按钮悬停、菜单展开等场景；在Flexbox中利用transform实现元素浮起动画，不触发重排，性能优越；Grid布局虽不支持grid属性直接动画，但可通过transition平滑切换class状态，配合transform实现模块扩展效果；实际应用中应优先使用GPU加速属性如transform和opac
-
使用CSS框架如Animate.css和Tailwind可快速实现按钮动画。通过引入Animate.css并结合hover触发脉冲效果，或在Tailwind中利用transition、transform类实现悬停缩放与变色。在React中配合CSSModules，可通过状态控制点击时的抖动动画，关键在于交互状态与动画类的结合，合理运用transition、transform和keyframes提升按钮响应性与视觉体验。
-
高阶函数是接受函数为参数或返回函数的函数；JavaScript中map对每个元素调用回调生成新数组，不修改原数组；reduce按序累积计算，返回单一值；二者常组合使用实现先转换后聚合的逻辑。
-
对话框背景置灰的本质是用fixed定位的半透明遮罩层覆盖内容，而非给body加灰度滤镜；需组合使用fixed、inset-0、bg-black、bg-opacity-50和z-40，且遮罩层须与对话框同级并设置aria-hidden="true"。
-
height:100%不生效是因为百分比高度需父元素有明确高度，而html的父级（视口）默认不被当作有高度的容器；应改用height:100vh或min-height:100dvh，并重置margin/padding。
-
当使用html{overflow:hidden}+body{overflow:scroll}实现全屏滚动时，浏览器原生的#top锚点会失效，因其依赖文档根元素滚动；解决方案是为首页区域显式添加id="home"并统一使用语义化ID锚点。
-
直接写min-width:768px易导致“魔法数字”问题，应改用CSS变量统一管理断点，如--breakpoint-md:768px，并在:root中定义、媒体查询中以@media(min-width:var(--breakpoint-md))安全调用。
-
ChromeDevTools中强制触发:hover和:active状态，应右键Elements面板元素→“Forcestate”→勾选对应伪类；该方式基于渲染层介入，能真实复现浏览器状态解析逻辑，比手动加CSS规则更可靠，且不改变页面实际行为。
