Chrome调试工具调试CSS

一、打开方式

1、打开调试工具

方法1：鼠标右击 + 检查

方法2：F12 快捷键

2、看哪里

（1）左边Element：显示当前页面的 html 结构

（2）右边style：显示当前标签的样式

二、选择元素

1、方法一：

在左侧 Element 中点击需要调试的元素

2、方法二：

点击左上角按钮后，直接在网页中点击需要调试的元素

三、功能

1、控制样式

（1）修改属性值

a、直接点击属性值，直接修改。既可以直接修改数值，也可以通过键盘上下箭头慢慢调试数值。

b、更改元素尺寸。双击值就可以修改

（2）添加属性

方法一：

在上一个属性的分号后点击一下，直接添加属性和属性值。

方法二：

点击属性 + ，就可以添加属性

（3）控制样式生效

点击属性前的小框即可。当属性前的小框选中时生效，不选中时不生效。

选中时生效

不选中时不生效

注意点 ：调试工具仅仅只是当前的调试效果，刷新之后无效，需要在代码中修改才能永久保留。

2、特殊情况：

（1）样式上有删除线

这种情况是指样式失效，导致这种原因主要有样式被注释了或者样式被覆盖了。

遇到这种情况要看看是不是选择器权重的问题。

（2）样式前有小三角

这种一般就是样式报错，原因有以下几种：第一属性后没写分号，第二出现中文标点，第三属性名或者属性值单词拼错。