css-debug

# CSS Debug Skill <command-name>css-debug</command-name> <user-invocable>true</user-invocable> ## 使用场景 当用户遇到以下问题时使用此 skill： - CSS 定位问题（元素位置不正确、被裁剪、溢出等） - React 组件渲染问题 - Tailwind CSS 类不生效 - 绝对定位/相对定位问题 - Flexbox/Grid 布局问题 - z-index 层叠问题 ## 调试步骤 ### 1. 收集信息 首先向用户询问或获取： - 浏览器开发者工具中的 HTML 结构 - 相关元素的 computed styles - 父容器的 CSS 属性（特别是 position、overflow、display） - 截图（如果有的话） ### 2. 常见问题检查清单 #### 绝对定位内容被裁剪 ``` 问题：position: absolute 的元素被父容器裁剪 检查： - [ ] 父容器是否有 overflow: hidden 或 overflow: auto - [ ] 祖先容器是否有 overflow: hidden - [ ] 父容器是否设置了 position: relative - [ ] 元素的 top/left/right/bottom 值是否超出父容器 解决方案： 1. 将 overflow: hidden 改为 overflow: visible 2. 或将绝对定位元素移到更外层的容器 3. 或使用 fixed 定位（相对于视口） ``` #### 元素位置偏移 ``` 问题：元素位置与预期不符 检查： - [ ] positionX/positionY 或 left/top 值是否正确 - [ ] 最近的 position: relative 祖先是哪个 - [ ] 是否有 margin/padding 影响 - [ ] transform 是否影响定位上下文 解决方案： 1. 确认定位参考点是正确的祖先元素 2. 检查 CSS 单位（px vs % vs rem） 3. 使用浏览器检查器的"元素选择"功能定位问题 ``` #### 内容不显示 ``` 问题：React 组件渲染但内容不可见 检查： - [ ] 元素是否有 width/height（可能为 0） - [ ] opacity 是否为 0 - [ ] visibility 是否为 hidden - [ ] display 是否为 none - [ ] z-index 是否被其他元素遮挡 - [ ] color 是否与背景色相同 解决方案： 1. 在开发者工具中检查 Computed 面板 2. 临时添加边框或背景色调试：border: 1px solid red 3. 检查条件渲染逻辑 ``` #### Tailwind 类不生效 ``` 问题：Tailwind CSS 类没有应用 检查： - [ ] 类名拼写是否正确 - [ ] 是否被更高优先级的样式覆盖 - [ ] 动态类名是否正确生成（字符串拼接问题） - [ ] tailwind.config.js 中 content 配置是否包含该文件 解决方案： 1. 使用 !important 临时测试：!overflow-visible 2. 检查 className 是否正确传递 3. 使用内联 style 作为备选方案 ``` ### 3. 浏览器调试命令 在浏览器控制台运行...