这是我参与「第五届青训营 」伴学笔记创作活动的第 4 天
前端与 HTML | 青训营笔记
前端入门-基础语言篇
MDN上的CSS
2.CSS选择器
CSS 选择器是 CSS 规则的第一部分。
它是元素和其他部分组合起来告诉浏览器哪个 HTML 元素应当是被选为应用规则中的 CSS 属性值的方式。
选择器所选择的元素，叫做“选择器的对象”。
（1）选择器列表
如果你有多个使用相同样式的 CSS 选择器，那么这些单独的选择器可以被混编为一个“选择器列表”，这样，规则就可以应用到所有的单个选择器上了。例如，如果我的h1和.special类有相同的 CSS，那么我可以把它们写成两个分开的规则。
当你使用选择器列表时，如果任何一个选择器无效 (存在语法错误)，那么整条规则都会被忽略。
（2）选择器的种类
1）类型、类和ID选择器
这个选择器组，第一个是指向了所有 HTML 元素 <h1>。
h1 { }
它也包含了一个 class 的选择器：
.box { }
亦或，一个 id 选择器：
#unique { }
2）标签属性选择器
这组选择器根据一个元素上的某个标签的属性的存在以选择元素的不同方式：
a[title] { }
或者根据一个有特定值的标签属性是否存在来选择：
a[href="https://example.com"] { }
3）伪类与伪元素
这组选择器包含了伪类，用来样式化一个元素的特定状态。例如:hover伪类会在鼠标指针悬浮到一个元素上的时候选择这个元素：
a:hover { }
它还可以包含了伪元素，选择一个元素的某个部分而不是元素自己。例如，::first-line是会选择一个元素（下面的情况中是<p>）中的第一行，类似<span>包在了第一个被格式化的行外面，然后选择这个<span>。
p::first-line { }
4）运算符
最后一组选择器可以将其他选择器组合起来，更复杂的选择元素。下面的示例用运算符（>）选择了<article>元素的初代子元素。
article > p { }
（3）选择器参考表
下面的表格让你可以浏览你可以用的选择器，还有本指南中教你如何使用每种选择器的页面的链接。我还加上了一个能查看浏览器对每个选择器的支持信息的 MDN 页面链接。你可以把这个作为回头的参考，在你以后需要查询文献中提到的选择器的时候，或者是在你广义上实验 CSS 的时候。
| 选择器 | 示例 | 学习 CSS 的教程 |
|---|---|---|
| 类型选择器 | h1 { } | 类型选择器 |
| 通配选择器 | * { } | 通配选择器 |
| 类选择器 | .box { } | 类选择器 |
| ID 选择器 | #unique { } | ID 选择器 |
| 标签属性选择器 | a[title] { } | 标签属性选择器 |
| 伪类选择器 | p:first-child { } | 伪类 |
| 伪元素选择器 | p::first-line { } | 伪元素 |
| 后代选择器 | article p | 后代运算符 |
| 子代选择器 | article > p | 子代选择器 |
| 相邻兄弟选择器 | h1 + p | 相邻兄弟 |
| 通用兄弟选择器 | h1 ~ p | 通用兄弟 |
3.盒模型
在 CSS 中，所有的元素都被一个个的“盒子（box）”包围着，理解这些“盒子”的基本原理，是我们使用 CSS 实现准确布局、处理元素排列的关键。
（1）块级盒子（Block box）和内联盒子（Inline box）
这两种盒子会在页面流（page flow）和元素之间的关系方面表现出不同的行为：
A、一个被定义成块级的（block）盒子会表现出以下行为：
- 盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽
- 每个盒子都会换行
width和height属性可以发挥作用- 内边距（padding）, 外边距（margin）和 边框（border）会将其他元素从当前盒子周围“推开”
除非特殊指定，诸如标题 (<h1>等) 和段落 (<p>) 默认情况下都是块级的盒子。
B、如果一个盒子对外显示为 inline，那么他的行为如下：
- 盒子不会产生换行。
width和height属性将不起作用。- 垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于
inline状态的盒子推开。 - 水平方向的内边距、外边距以及边框会被应用且会把其他处于
inline状态的盒子推开。
用做链接的 <a> 元素、 <span>、 <em> 以及 <strong> 都是默认处于 inline 状态的。
我们通过对盒子display 属性的设置，比如 inline 或者 block ，来控制盒子的外部显示类型。
（2）内部和外部显示类型
css 的 box 模型有一个外部显示类型，来决定盒子是块级还是内联。
同样盒模型还有内部显示类型，它决定了盒子内部元素是如何布局的。默认情况下是按照 正常文档流 布局，也意味着它们和其他块元素以及内联元素一样 (如上所述).
但是，我们可以通过使用类似 flex 的 display 属性值来更改内部显示类型。如果设置 display: flex，在一个元素上，外部显示类型是 block，但是内部显示类型修改为 flex。该盒子的所有直接子元素都会成为 flex 元素，会根据弹性盒子（Flexbox）规则进行布局。
块级和内联布局是 web 上默认的行为 —— 正如上面所述，它有时候被称为 正常文档流，因为如果没有其他说明，我们的盒子布局默认是块级或者内联。
现在需要记住的是， display 属性可以改变盒子的外部显示类型是块级还是内联，这将会改变它与布局中的其他元素的显示方式。
（3）什么是CSS盒模型？
完整的 CSS 盒模型应用于块级盒子，内联盒子只使用盒模型中定义的部分内容。模型定义了盒的每个部分 —— margin, border, padding, and content —— 合在一起就可以创建我们在页面上看到的内容。为了增加一些额外的复杂性，有一个标准的和替代（IE）的盒模型。
CSS 中组成一个块级盒子需要（盒模型的各个部分）：
