通过Chrome DevTools进行CSS样式调试方法

可以按照评估和快速修复、还原和重现、定位根源和修复这样的步骤进行调试。

1. 评估和快速修复

首先针对能够快速解决的错误进行修复。

这一步的关键是要 深刻理解CSS各种属性的内涵和效果，以避免当页面样式不符合预期时无法定位问题。

2. 还原和重现

初步定位问题后需要对问题进行复现。

• 方法：提出相关的HTML和CSS代码。
• 关键：精简代码，找出关键点。

对于CSS代码：

1. 逐步增加/删除CSS以暴露问题；
2. 利用CSS Validator进行检查。

对于HTML代码：

• 利用W3C Validator检查规范性。
• 将所有元素改成div或者span类型，将所有选择器改为类选择器，以排除浏览器引入意外样式的可能性。

3. 定位根源并修复

• 如果是浏览器引入的意外样式，则想办法覆盖；
• 若不是，更换浏览器尝试是否会发生同样的现象，以确定是否是浏览器类型、浏览器版本等因素的原因，并通过bug追踪寻找解决方案；
• 重点关注computed styles查看自己编写的CSS代码中哪些样式生效了、哪些被屏蔽了。