chrome 小技巧

1使用 chrome调试工具

• “按F12”或者是 “shift+ctrl+i” 打开 开发者工具。

• 菜单： 右击网页空白出---检查

• 通过开发人员工具小指针工具，查找页面元素

• 左侧是html页面结构，右侧是css样式

小技巧：

1. ctrl+滚轮 可以 放大开发者工具代码大小。
2. 左边是HTML元素结构 右边是CSS样式。
3. 右边CSS样式可以改动数值和颜色查看更改后效果。
4. ctrl + 0 复原浏览器大小

2.1 怎样打开Chrome的开发者工具？

直接在页面上点击右键，然后选择 “检查” 快捷键 F12 或者 ctrl+shift+i

基本的结构布局是左边html 右边是 css

chrome调试数值

可以鼠标点击后面的数值， 按下键盘 上箭头 是 调大 数值， 下箭头是 调小数值

快速定位css所在行数

2.2 Chrome提示的常见布局错误

1). css单词书写错误提示

用下图所示的黑色箭头，点击我们需要的 html 元素。

2). css无显示

声明类名和html调用名不一致 或者 css文件引入不对 或者 这个样式的前面 多余了一些符号影响的

3). html 结构不匹配(重要)

左侧 展开可以看到html 标签是否匹配

4). 通过颜色判断盒子

蓝色是 盒子的 宽度高度 青色是 内边距 橙色 是外边距 通过这个很方便的看到盒子给的范围