浏览器与编译器

浏览器私有前缀

浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无须添加。

1. -moz-：代表 firefox 私有属性

2. -ms-：代表 ie 私有属性

3. -webkit-：代表 safari、chrome 私有属性

4. -o-：代表 Opera 私有属性

示例：

-moz-border-radius: 10px;
-ms-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;

Emmet 语法

Emmet 语法的前身是 Zen coding，使用缩写，提高 html/css 编写速度，Vscode 内部已集成语法。

快速生成 HTML 结构语法

1.生成标签，直接输入标签名，按 tab 键。

2.生成多个标签，加上*，如 div*3。

3.如果有父子级关系的标签，可以用> 比如 ul>li。

4.如果有兄弟关系的标签，用 + 比如 div+p。

5.如果生成带有类名或者 id 名字的，直接写 .demo 或 #two tab 键。

6.如果生成的 div 类名是有顺序的，可以用自增符号$。

7.如果想要在生成的标签内部写内容可以用{}。

快速生成 CSS 样式语法

CSS 基本采取简写形式。

1. w200 按 tab 可生成 width: 200px;

2. lh26 按 tab 可生成 line-height: 26px;

快速格式化代码

格式化文档：Shift + Alt + F，对齐格式。

formatOnType:true

formatOnSave:true

设置一次即可，可自动保存格式化代码。

Chrome 调试工具

Chrome 浏览器提供了非常好用的调试工具，可以用来调试 HTML 结构和 CSS 样式。（按下 F12or 右击页面空白 → 检查）

1. ctrl+滚轮可以放大开发者工具代码大小。

2. 左边是 HTML 元素结构，右边是 CSS 样式。

3. 右边 CSS 样式可以改动数值（左右箭头或者直接输入）和查看颜色。

4. ctrl+0 复原浏览器大小。

5. 如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误。

6. 如果有样式，但是样式前面有黄色叹号提示，则是样式属性书写错误。