-
全屏背景分割布局需设html和body高度为100%且无margin；网格容器用min-height:100vh；重叠靠多个元素共用grid-area实现；背景宜用::before伪元素分离控制；响应式需重定义grid-template-areas。
-
flex布局中子元素height:100%无效主因是父容器缺显式高度；应优先用flex:1实现自适应高度，需确保父容器有高度基准（如100vh），并避免与height混用。
-
基础轮播需用HTML结构+CSSflex布局与overflow:hidden+JS手动管理currentIndex和transform位移；自动轮播用setInterval，手动切换后需clearInterval并重置；移动端滑动须记录touchstart/end的clientX判断方向，差值超50px才触发切换并preventDefault；动画必须用transform+opacity配合transition，禁用left/margin-left；无缝循环靠DOM克隆首尾项并逻辑索引映射实现。
-
根本原因是事件数据在序列化、传输、反序列化全链路中编码不一致，须确保字符串源头→序列化→传递→反序列化→使用全程统一UTF-8，禁用隐式转换与双重编码。
-
transition与filter结合可实现平滑视觉动画，如图片悬停变灰、模糊或亮度变化，通过transition定义滤镜过渡时长与缓动，配合grayscale、blur、brightness等属性提升交互体验，常用于图片悬停效果，建议优化性能并注意浏览器兼容性。
-
用setCustomValidity()可覆盖浏览器默认错误文案，传空字符串表示通过，传非空字符串触发customError状态并阻止提交；需在input/blur事件中动态设置，配合DOM更新实现UI同步提示。
-
使用input元素type="range"可创建滑块控件，通过min、max、value和step属性定义范围、初始值和步长，结合label标签与JavaScript实现实时数值显示，并可通过CSS自定义样式以适配不同浏览器，广泛应用于音量调节、价格筛选等交互场景。
-
本文详解如何在SolidJS中正确实现基于按钮点击（而非实时输入）的表单搜索，包括参数管理、请求触发、加载状态控制、URL同步及类型安全响应处理。本文详解如何在SolidJS中正确实现基于按钮点击（而非实时输入）的表单搜索，包括参数管理、请求触发、加载状态控制、URL同步及类型安全响应处理。在SolidJS中，将搜索行为从onInput实时触发改为「仅点击按钮提交」，关键在于解耦输入状态与请求执行，并确保状态更新、副作用调度和UI渲
-
使用CSS::placeholder与动画结合可实现动态输入提示效果。1.通过::placeholder设置占位符样式，支持颜色、字体等基础属性，并添加过渡效果；需加厂商前缀提升兼容性。2.利用label模拟placeholder，结合:focus与:valid状态实现上浮缩放动画，形成标签式提示。3.配合JavaScript控制类名变化，触发placeholder透明度过渡，实现淡出效果，增强动效连贯性。4.注意::placeholder不支持transform动画，复杂效果需依赖额外HTML结构；确保
-
Flexbox适合一维布局对齐，如导航栏、卡片列表；Grid才适合页面整体二维结构布局，二者应分工明确：Grid划“房间”，Flexbox整“桌椅”。
-
会卡顿，因matchMedia回调可能触发过早、频繁，导致同步渲染阻塞主线程；应结合requestAnimationFrame、防抖、主题配置抽离、初始化检查及颜色格式统一来优化。
-
str-insert不能直接插入CSS属性值，因其返回带引号字符串，需配合unquote()才能生成合法CSStoken；且索引从1开始，越界会静默失败。
-
JSON不是JavaScript子集，必须用JSON.parse()和JSON.stringify()显式转换；直接当对象访问会报错，因JSON是纯文本；解析需try/catch防崩，生成时函数、undefined等会被忽略或转null。
-
Setter不拦截网络请求，只拦截对象属性赋值；它在请求体解析为对象后、业务使用前校验字段，不处理HTTP层信息，需与拦截器等协同防御。
-
:focus-visible不能直接替代:focus，因其仅在键盘导航（如Tab）时触发，而:focus在鼠标、触摸、Tab时均触发；若替换会导致鼠标操作无焦点样式，影响可用性。
