-
最实用的响应式断点封装是用map定义断点变量、@mixin+@content实现可嵌套的媒体查询，键名推荐xs/sm/md/lg/xl，值带单位，调用时必须用大括号包裹内容块。
-
title属性是兼容性最好、开销最低的悬停提示方案，但无法定制样式/位置/延迟，且移动端大多不支持；CSS+data-tip可轻量自定义，JS方案更灵活但需防事件陷阱；ARIA方案最适配无障碍需求。
-
BEM通过块、元素、修饰符的命名约定提升CSS可维护性；其强语义化和高特异性有效避免命名冲突与样式污染；结合SMACSS、CSS-in-JS或Tailwind等模式可适应不同项目需求。
-
直接设置图片大小最简单的方法是使用<img>标签的width和height属性，数值可为像素或百分比；2.不建议直接在HTML中设置尺寸，因违反关注点分离原则，影响响应式设计和维护性；3.推荐使用CSS控制图片大小，如width:100%;height:auto;或max-width:100%;height:auto;以实现响应式布局；4.object-fit属性可精确控制图片在容器内的适应方式，如cover、contain等；5.图片尺寸设置不当会导致页面加载慢、累积布局偏移（CLS）、带宽
-
必须监听"first-input"类型，因为只有它能准确提供首个用户输入事件的startTime与processingStart之差即FID值；监听"event"无法识别首次输入且无处理延迟数据，"navigation"则完全无关。
-
background-origin对background-color无效，仅作用于background-image（含渐变）；其三个值border-box、padding-box（默认）、content-box分别以边框外缘、内边距内缘、内容区左上角为定位原点。
-
coords必须按图片原始尺寸手动填写像素值，shape类型决定格式：rect需4个整数（x1,y1,x2,y2），circle需3个（cx,cy,r），poly需偶数个顶点坐标；所有值以naturalWidth/naturalHeight为基准，不随CSS缩放变化。
-
PSD转HTML5有四种方法：一、Photoshop切片导出旧版HTML，兼容性差；二、用Avocode等插件智能生成语义化代码；三、通过PSD2HTML等在线平台云端转换；四、手动切图+手写HTML5/CSS3，最规范可控。
-
Flex子项默认min-width:auto导致overflow失效，因其强制子项不小于内容宽度；解决方法是显式设置min-width:0，配合flex收缩属性、overflow:hidden及text-overflow:ellipsis等生效。
-
overflow:hidden直接裁剪溢出内容且不提供滚动，适用于明确设计意图的截断场景；overflow:auto仅在内容溢出时显示滚动条，更克制，适合内容长度不确定的区域。
-
支持，但需起始和结束状态均显式声明确定的颜色值（如HEX/RGB/HSL），避免transparent、inherit或简写background覆盖导致插值失败；transition须写在初始状态规则中，时长200–400ms，推荐cubic-bezier(0.25,0.46,0.45,0.94)。
-
用background-image实现标准CSS渐变按钮需显式使用linear-gradient()，配合background-size和background-position实现平滑悬停过渡；注意兼容性前缀、移动端touch-action设置及:active反馈。
-
新版Chrome/Edge限制file://协议跨文件加载，需用HTTP服务（如LiveServer）运行；音视频问题需启用硬件加速及解码器；Canvas/WebGL异常应检查GPU加速与扩展冲突；fetch等API需安全上下文，建议本地开发使用localhost。
-
直接代理window或globalThis大概率失败，因其全局API多为不可配置、不可写的内置方法，且Proxy仅支持对象目标，而window在iframe等环境中可能非标准对象；应改为精准劫持fetch、XMLHttpRequest.prototype.send等函数入口，并逐个重定义console方法。
-
border-image不显示渐变的主因是默认border-width为0且border-style为none，需显式设置border-width和非none样式；渐变须用linear-gradient内联书写；border-image-slice应设为1fill以避免拉伸变形；Safari等浏览器存在兼容性问题。
