持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第6天，点击查看活动详情

1. Emmet 语法

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

快速生成 HTML 结构代码
快速生成 CSS 样式代码

如何启动 Emmet ？ 不行的点设置输入emmmt，勾选 Trigger Expansion on tab

截图.png

我这里已经可以了，所以就不启动了

1.1 快速生成 HTML 结构语法

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

PS: 以上不用去记，用多了自然就熟了

<body>
    <!-- 1. 生成标签。直接输入标签名，然后按 tab 键即可 -->
    <!-- div -->

    <!-- 2. 如果想要生成多个相同标签 加上 * 就可以了 -->
    <!-- div*5 -->

    <!-- 3. 生成有父子级关系的标签 用 > 即可 -->
    <!-- ul>li -->

    <!-- 4. 生成有兄弟关系的标签 用 + 就可以了 -->
    <!-- div+span -->
       
    <!-- 5. 生成带有类名或者 id 名字的， 直接写 .demo 或者 #two 即可 -->
    <!-- div.nav -->  
    <!-- div#banner -->

    <!-- 这些快捷简写方式可以配合使用 -->
    <!-- ul>li#one -->
    <!-- ul>li.two -->

    <!-- 6. 可以把 $ 看成自增符号 -->
    <!-- .demo$*5 -->
       
    <!-- 7. 我们想生成的标签里面默认显示几个文字  div{文字}-->
    <!-- div{$}*5 -->
    <!-- div{$.文字}*5 -->

</body>

1.2 快速生成CSS样式语法

CSS 基本采取简写形式即可

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

1.3 快速格式化代码

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

也可以设置当我们保存页面的时候自动格式化代码：

1）文件 ------.>【首选项】---------->【设置】；

2）搜索emmet.include;

3）在settings.json下的【工作区设置】中添加以下语句：

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

format on sace 然后打勾

另一种方式：

新版本直接搜索 format 有个保存自动格式化的选项勾上就行了

截图.png

2. 复合选择器

在 CSS 中，可以根据选择器的类型把选择器分为 基础选择器 和 复合选择器 ，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的

复合选择器可以更准确、更高效的选择目标元素（标签）
复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的
常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等

2.1 后代选择器（重要）

后代选择器又称为包含选择器，可以选择父元素里的子元素。 写法是将外层标签写在前面，内层标签写在后面，中间空格分开。当标签发生嵌套时，内层标签就成为外层标签的后代。

语法格式：

元素1 元素2 { 样式声明; }

元素1 和元素2 中间用空格隔开
元素1 是父级，元素2 是子级，最终选择的是元素2
元素2 可以是儿子，也可以是孙子等，只要是元素1 的后代即可（可以连续嵌套）
元素1 和元素2 可以是任意基础选择器

小结：

后代选择器【空格】：所有后代（儿子、孙子）

子选择器【>】：亲儿子和亲儿子的所有后代

2.3 并集选择器

并集选择器可以选择多组标签，同时为他们定义相同的样式。 通常用于集体声明

并集选择器是各选择器通过英文逗号 (,) 连接而成，任何形式的选择器都可以作为并集选择器的一部分

语法

元素1, 元素2 { 
    样式声明; 
}

表示选择元素1 和元素2

2.4 伪类选择器

伪类选择器用于向某些选择器添加特殊的效果。 伪类选择器书写最大特点是用冒号 (:) 表示。伪类选择器种类多，比如链接伪类选择器、结构选择器等。

伪类选择器：特定状态（鼠标悬停、聚焦等）
组合选择器：特定关系（包含、并列关系）
伪元素选择器：特定部分/位置（第几个、第一个、最后一个）

2.4.1 链接伪类选择器

link：链接
visited：被访问的
hover：徘徊
active：活跃的

a:link /*选择所有未被访问的链接*/
a:visited /*选择所有已被访问的链接*/
a:hover /*选择鼠标指针位于其上的链接*/
a:active /*选择活动链接（鼠标按下未弹起的链接）*/

注意事项

确保样式生效，要按照 LVHA 的顺序声明：link，visited，hover，active （顺序的记忆方式：LoVe&HAte 爱恨原则）

依据规范：在定义四个链接伪类选择器时需要按照一定的顺序，一般情况下 :hover 必须位于 :link 和 :visited 之后，:active 必须位于 :hover 之后

无论鼠标在哪里，链接始终是链接
无论何时点击链接，鼠标指针肯定会在链接上
CSS 是从上到下执行的（应该说...都是从上到写执行的...）

所以为了保证 hover、active 能实时存在，它们必须在 link 与 visited 后面

a 链接在浏览器中有默认样式，所以实际开发都需要给链接单独指定样式。否则默认样式优先（指定样式大于复选样式）

开发中实际写法

a {
  color: gray;
  text-decoration: none;
}
a:hover {
  color: #369;
  text-decoration: underline;
}

2.4.2 focus 伪类选择器

:focus 伪类选择器用于获取焦点的表单元素。 焦点就是光标，一般情况只有类表单元素才能获取，因此这个选择器也主要针对表单元素来说。

focus 伪类选择器只有当光标在某一个表单的时候才起作用，离开就不起作用了

input:focus {
  background-color: yellow;
}

表示：把获得光标的input表单元素选取出来

小结：

focus 伪类选择器与 a 链接伪类选择器中的 visited 的区别：

区别：一个是获得焦点（focus），也就是鼠标放上去后改变的样式，一个是参观（visited），也就是点击过后的样式，focus与hover有点像，但是hover是永久的，而focus是短暂的

2.4.3 其他标准伪类选择器

first-child

:first-child 是 CSS 伪类，表示父元素的第一个子元素。

last-child

:last-child CSS 伪类代表父元素的最后一个子元素。

nth-child(n)

:nth-child(an+b) 这个 CSS 伪类首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从 1 开始排序，选择的结果为 CSS 伪类 :nth-child括号中表达式 (an+b) 匹配到的元素集合 (n=0，1，2，3...)

:not(p)

:not() 用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中，它也被称为反选伪类（negation pseudo-class）。

::after (:after)

CSS 伪元素 ::after 用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合 content 属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。

.exciting-text::after {
  content: "<- 让人兴兴兴奋!";
  color: green;
}

我们几乎可以用想要的任何方法给 content 属性里的文字和图片的加上样式.

::before (:before)

CSS 中，::before 创建一个伪元素，其将成为匹配选中的元素的第一个子元素。常通过 content 属性来为一个元素添加修饰性的内容。此元素默认为行内元素。使用 ::before 伪元素的一个简单示例就是用于加入引号。

HTML

<q>一些引用</q>, 他说, <q>比没有好。</q>.

CSS

q::before {
  content: "«";
  color: blue;
}
q::after {
  content: "»";
  color: red;
}

2.5 复合选择器总结

选择器	作用	特征	使用情况	隔开符号及用法
后代选择器	用来选择后代元素	可以是子孙后代	较多	符号是空格.nav a
子代选择器	选择最近一级元素	只能选亲儿子	较少	符号是大于.nav>p
并集选择器	选择某些相同样式的元素	可以用于集体声明	较多	符号是逗号，.nav, a
链接伪类选择器	选择不同状态的链接	跟链接相关	较多	重点记住a{}和a:hover{}
:focus 选择器	选择获得光标的表单	跟表单相关	较少	记住input:focus用法

3. 元素显示模式

3.1 什么是元素显示模式

作用：网页的标签非常多，不同地方使用不同，了解其特点可以更好布局

元素显示模式就是元素（标签）以什么方式进行显示

HTML 元素分为块元素和行内元素

3.2 块元素

常见的块元素有 h1-h6、p、div、ul、ol、li 等

块级元素的特点：

独占一行
高度、宽度、外边距以及内边距都可以控制
宽度默认是容器（父级宽度）的 100%
是一个容器及盒子，里面可以放行内或块级元素

注意：

文字类的标签内不能放块级元素（即 p 标签中不能放块级元素（div））
文字类元素有 p，h1-h6，尤其不能放 div 元素

3.3 行内元素

常见行内元素：a、strong、b、em、i、del、s、ins、u、span，典型行内元素是 span，行内元素也叫内联元素

行内元素的特点：

相邻行内元素在一行上，一行可以显示多个
高、宽直接设置是无效的
默认宽度就是它本身内容宽度
行内元素只能容纳文本或其他行内元素（不能放块级元素...）

注意

a 链接里面不能放链接
特殊情况链接 a 里面可以放块级元素，但是给 a 转换一下块级模式最安全

3.4 行内块元素

在行内元素中有几个特殊标签——img, input、td，它们同时具有块元素和行内元素的特点。 有些资料称为行内块元素

行内块元素的特点：

和相邻元素（行内块）在一行上，之间存在空白缝隙，一行可以显示多个（行内元素特点）
默认宽度是本身内容宽度（行内元素特点）
高度、行高、外边距、内边距都可以控制（块级元素特点）

3.5 元素显示模式总结

元素模式	元素排列	设置样式	默认宽度	包含
块级元素	一行只能放一个块级元素	可以设置宽度高度	容器的100%	容器级可以包含任何标签
行内元素	一行可以放多个行内元素	不可以直接设置宽度高度	它本身内容的宽度	容纳文本或者其他行内元素
行内块元素	一行放多个行内块元素	它本身内容的宽度	可以设置宽度和高度

3.6 元素模式转换

特殊情况下，需要 将一个元素的模式转换为另外一种模式，使其具有另外一种模式的特性。 比想要增加链接 a 的触发范围

行内元素可以转换为块元素，块元素也能转换为行内元素

行内 -> 块级

a {
  display: block;
}

块级->行内

div {
  display: inline;
}

行内/块级-> 行内块元素

span {
  display: inline-block;
}

（二）CSS 复合选择器