调试CSS的方法

1. CSS调试

　　关于CSS的调试 我之前一直都没有一个好的概念在心里。不过看了一篇文章 所以我就开始关注这个方面的问题了 这篇文章是那边文章转载的 不过我只是提取了自己有用的东西

　　调试流程的3个阶段

• 评估并快速修复
• 还原和重现
• 定位根源并修复

　　评估并快速恢复

　　　　如果css是你的主要工作语言 或者你对css有一定的理解和实践经验的话。解决css问题就有很多简单的方法 否则 方法就少一些。

　　CSS开发过程中一些陷阱

　　A) 图片周边存在有趣的空白 设置display: block; (图片是默认内联的 因此会有空白) 直接上代码和实例

　　　　

　　　　此时如果我们设置 img{display:block;}就可以清除间隙了

　　　　

　　　　B) 元素排列不正确 你可能有浮动元素。

　　　　C) 绝对定位不显示 位置错误 或者被遮挡 你可能没有设置父元素的position属性或者用transform以及 opacity创建一个z-index上下文。

　　　　D) 为元素不显示 你可能忘记了设置content的值。

2. 计算后样式

　　

　　outer 的宽度会是多少？如果你认为是 max-width 的 400px，我会原谅你的。但是不是我们看到的宽度，看 Ben Frain 编写的 codepen。

　　什么情况？为什么不是 max-width 的值？给你个思路，打开 Computed Styles 面板。

　　找到问题的根源了吗？

　　我来给你解释下。默认地，fieldset 元素的宽度会等于其内容的宽度。在 Chrome 的Computed Styles 面板中，min-width 的值是一个新的 min-content。

　　给 min-width 设置一个新值来“修复”它。这个例子中，min-width: 0 就会让 max-width 按照我们期望的那样进行工作。

　　这正是开发者工具的 Computed Styles 面板中看到的值。记住你写的代码不一定是浏览器计算后的。