CSS样式调试

样式调试主要使用Element选项卡下的styles、Computed子选项卡。分别如下图左侧和右侧所示。

style选项卡下，可以清晰的查看当前元素所用到的样式代码，包括继承的样式。computed选项卡下，可以清晰的查看当前元素盒模型和最终应用样式。

鼠标悬浮文件名即可

点击：hov，再选择：hover即可让该元素处于hover状态，引用上hover的样式。调试样式的时候就不用鼠标一直放在界面上了。

computed选项卡下可以直观的查看当前盒模型，并且可以查看所有样式的最终样式。

可以点击computed下的最终样式的右箭头，直接定位到是具体哪个样式作用的。

点击Element选项卡左上角的箭头，即可在界面上查看元素状态。一般黄色为mrgin，绿色为padding/滚动条（滚动条占位）。还可以查看具体的宽高大小。

蓝色部分为content内容，紫色虚线部分为自适应的空白区域。

取消勾选即可取消该样式的效果，会有中滑线显示。被覆盖的样式也会有中滑线删除。

直接在style下添加样式调试效果

点击+号，添加新的class样式。

6、动态添加class的样式调试

在element ui和一些动效中，经常会用到class类名切换来切换选择器样式，比如点击一个按钮，按钮在3s中切换来3种类名来切换样式，最终只停留在最后一个样式，导致我们无法直接调试效果。这时候我们就可以在dom标签上直接编辑，添加class，来引用上该样式。

css样式调试的方法比较简单，主要还是要看对css属性和选择器的理解水平。