front-end CSS（2）Emmet语法/复合选择器/块与行内元素

chrome 调试工具

command + 加号|减号：放大或缩小代码
command + 0: 恢复到原来

Emmet语法：HTML

使用缩写来提高编写HTML | CSS的速度，VScode已经内部集成了。

• 输入标签名，再按Tab键
• div*10，生成10个
• 父子关系：ul>li，再按Tab
• 兄弟关系，p+div，再按Tab
• #nav, .nav，再按Tab，自动生成类名和id名的div，或者li#one这样
• 类名有顺序，自增符号$, .demo$*4
• 里面有内容：div{love and peace}*5，再按Tab
• div{$}*5试试这个是什么效果？

Emmet语法：CSS

使用缩写，然后再按Tab即可。比如：

tac:
text-align: center
w100: 
width: 100px

Emmet语法：快速格式化

在VScode中右键：format document
或者快捷键：shift + alt + f
也可以自定义，但保存页面时自动格式化：
文件-首选项-设置
搜索emmet.include
在settings.json中编辑，添加以下代码：

"editor.formatOnType": true,
"editor.formatOnSave": true

新版本中勾选format保存自动格式化即可。
不建议勾选，最好自己要整理代码的时候使用这个格式化功能，不要养成依赖。

CSS 复合选择器

建立在基础选择器之上，组合而成。

后代选择器

选择某个父元素的全部子元素。
使用空格隔开
语法：

父 子 {
    声明 }

ul li {
   
	color: red;