其他介绍

Emmet语法

提高HTML/CSS的编写速度

快速生成HTML结构语法

1. 生成标签 直接输入标签名 按tab键即可 比如 div 然后tab 键， 就可以生成
2. 如果想要生成多个相同标签 加上 *就可以了 比如 div*3 就可以快速生成3个div
3. 如果有父子级关系的标签，可以用> 比如 ul > li就可以了
4. 如果有兄弟关系的标签，用 + 就可以了 比如 div+p
5. 如果生成带有类名或者id名字的， 直接写.demo 或者 #two tab 键就可以了
6. 如果生成的div 类名是有顺序的， 可以用 自增符号 $
7. 如果想要在生成的标签内部写内容可以用 { } 表示

快速生成CSS样式语法

1. 比如 w200 按tab 可以 生成 width: 200px;
2. 比如 lh26px 按tab 可以生成 line-height: 26px;

快速格式化代码

Vscode 快速格式化代码: shift+alt+f

CSS 的元素显示模式

元素显示模式就是元素（标签）以什么方式进行显示，比如<div>自己占一行，比如一行可以放多个<span>

• 块元素
  • 常见：<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中 <div>标签是最典型的块元素
  • 特点
    • 比较霸道，自己独占一行
    • 高度，宽度、外边距以及内边距都可以控制
    • 宽度默认是容器（父级宽度）的100%
    • 是一个容器及盒子，里面可以放行内或者块级元素
  • 注意
    • 文字类的元素内不能使用块级元素
    • <h1>~<h6><p> 都是文字块级标签，不能放
      等块级元素
• 行内元素(内联元素)
  • 常见： <a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签是最典型的行内元素
  • 特点
    • 相邻行内元素在一行上，一行可以显示多个
    • 高、宽直接设置是无效的
    • 默认宽度就是它本身内容的宽度
    • 行内元素只能容纳文本或其他行内元素
  • 注意
    • 链接里面不能再放链接
    • 特殊情况链接 <a> 里面可以放块级元素，但是给 <a> 转换一下块级模式最安全
• 元素显示模式转换
  • 转换为块元素：display:block;
  • 转换为行内元素：display:inline;
  • 转换为行内块：display: inline-block;
• 单行文字垂直居中的代码
  • line-height = height