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;
}
ul li a {
color: red;
}
.nav li a {
color: red;
}
子选择器
只选择最近一级的子元素.
比如：选择div下为p标签的全部子元素。不包含孙子，重孙子等元素。
div > p { color: red; }
并集选择器
元素一和元素二之间用英文逗号分割。并集选择器竖着写。最后一个选择器后不加逗号。
div,
p {
color: red;
}
伪类选择器
用冒号表示。
链接伪类选择器
个人认为，active的用户体验最好，以及增加visited和link，而hover酌情使用。
a:link /*未点击过的链接 */
a:visited /*访问过的链接 */
a:hover /*鼠标悬浮 */
a:active /*鼠标按下未弹起 */
注意事项：按照LVHA的顺序进行书写，记忆办法：LV包包，Hao！
在开发中，单独给a标签指定样式，如果把样式写在body里会不起作用的。
:focus选择器
获取焦点的表单元素。主要针对表单元素input。
input:focus {
background-color: yellowgreen;
}
复合选择器总结
图片来源于B站Pink老师课程
元素显示模式
定义
元素以什么样的方式进行显示，比如div自己占一行，span可以一行放几个。
HTML元素可以分为2类：块级元素和行内元素。
块元素
常见的块元素标签有：
<h1>...<h6>
<ul><ol><li>
<p>
<div>最典型
块元素的特点有：
- 自己独占一行
- 高度、宽度、外边距、内边距可以控制
- 宽度默认是父级元素的100%
- 可以看做是一个容器，或者说是一个盒子，里面可以放行内元素或者块级元素
注意事项：
- p标签里不放div
- h标签里不放div
行内元素
常见的行内元素标签有：
<a>
<strong>
<b>
<em>
<i>
<del>
<s>
<ins>
<u>
<span>最典型
行内元素的特点有：
- 相邻的行内元素在一行，一行可以有多个行内元素
- 宽、高的设置无效
- 默认宽度就是本身内容的宽度，有多少字就显示多宽
- 行内元素内不放块元素
- 链接里不放链接
- 特殊情况下，a标签里面可以放块元素，但是需要把a标签转为块元素
行内块元素
在行内元素中有几个特殊标签，同时具有块元素和行内元素的特点。
<img>
<input>
<td>
行内块元素的特点：
- 和相邻行内元素在一行，但是之间有空隙。一行可以放多个行内块元素。
- 默认宽度是本身自己的宽度
- 高度、行高、内外边距可以设置
元素模式显示方式的总结
图片来源于B站Pink老师课程
块元素和行内元素的互转
在开发中，常用的是把某元素转为块元素和行内块元素。
将a标签转为块元素：
a {
display: block;
}
将div转为行内元素：
div {
display: inline;
}
将span转为行内块元素：
span {
display: inline-block;
}
Snipaste–好用的截图工具
snipaste官方下载地址
按alt键可以取色，MAC版本如果要复制颜色，需按住alt+fn+C
单行文字垂直居中
CSS没有提供垂直居中的代码，但是可以这样做：
让文字的高度=盒子的高度。
div {
height: 40px;
line-height: 40px;;
}
原理
图片来源于B站Pink老师课程
行高>盒子高度----文字靠上
图片来源于B站Pink老师课程
行高<盒子高度----文字靠下
图片来源于B站Pink老师课程
