-
图片在CSSGrid中排列不整齐，主因是尺寸、容器约束或对齐方式未协调：需设width:100%;height:auto;、display:block;，合理使用justify-items/align-items，并配合minmax()、object-fit和gap优化。
-
本文详解Flask应用中如何安全、可靠地从HTML<select>标签获取用户选择的值，涵盖表单处理逻辑、数据类型转换、路由参数传递等关键要点，并修正常见语法与结构错误。
-
align-items:stretch默认生效但子项高度不一致，主因是父容器无明确高度、子项设了min-height/height、box-sizing为content-box、内容撑高或被align-self覆盖。
-
优先考虑WebSocket的场景是需要低延迟、高频率双向通信的应用，如在线聊天、多人协作文档编辑、实时游戏等；其全双工特性支持客户端与服务器持续交互，适合对实时性要求高的复杂交互场景。
-
骨架屏纯CSS实现的核心限制是无法动态获取DOM尺寸，须手动预设宽高、圆角等；呼吸感动画靠background-size与position配合渐变；响应式需同步调整aspect-ratio、padding等；IE11兼容需用伪元素遮罩替代clip-path。
-
用CSSGrid实现徽章墙需使用grid-template-columns:repeat(auto-fill,minmax(120px,1fr)))实现等宽自适应，配合gap控制间距；SVG图标用vertical-align:middle和em单位确保居中与缩放；状态通过badge--earned/badge--locked类控制，焦点交互兼顾:hover与:focus-visible，并设置min-width防止过度压缩。
-
CSS的cursor属性用于设置鼠标悬停时的指针样式，提升交互体验。支持default、pointer、wait等内置类型，也可通过url()使用自定义图像并指定热点位置，如cursor:url('cursor.cur'),default。实际应用中，.btn用pointer表示可点击，.loading用wait提示加载，.disabled用not-allowed禁止操作，合理使用可增强界面直观性。
-
LocalStorage存搜索关键词实现刷新不丢失、点击回填，三步完成存取：监听事件→去重限条→JSON存取；读取后渲染可点击列表并自动搜索；优化聚焦、键盘导航、清空及新词置顶；注意敏感词过滤、环境隔离与移动端重复触发。
-
百分比尺寸的参照物是包含块而非父元素：width等参照包含块宽度，height等参照高度，padding/margin均参照宽度，top/left参照包含块padding-box，transform则参照自身尺寸。
-
使用统一颜色格式（如hsl或rgb）、避免混合表示法，采用cubic-bezier缓动函数优化过渡，推荐transition替代animation实现hover颜色动画，提升流畅度并减少闪烁。
-
直接原因是多个依赖间接引入不同版本CSS库导致构建时样式覆盖；需用npmls检查版本树、显式锁定高版本、统一CDN或npm引入、验证PostCSS兼容性并确保构建工具加载正确路径。
-
JavaScript生成器是能暂停和恢复执行的特殊函数，通过function声明、yield产出值，调用返回迭代器对象，支持next()推进、for...of遍历及yield委托等高级特性。
-
conic-gradient()画不出圆锥效果主因是浏览器兼容性不足，老版本（如Chrome89前、Safari15.4前）直接忽略该函数而回退为纯色；需用开发者工具验证是否解析成功，并注意from角度偏移、正方形容器约束及SVG/Canvas替代方案。
-
invert()能直接反转图片颜色，原理是线性反转RGB各通道值（0↔255），并非简单变黑白；常见误判源于原图近灰度或父级CSS干扰导致滤镜未生效。
-
响应式布局的核心是HTML和CSS，JavaScript通过监听窗口变化、配合媒体查询、动态调整DOM类名及防抖优化来增强响应式行为，实现多设备适配。
