这是我参与「第五届青训营」伴学笔记创作活动的第 2 天
课程重点
- 选择器的特异度
- CSS 属性的继承
- CSS 布局方式
- CSS 盒子模型
详细知识点介绍：
1. 选择器的特异度（Specificity）
即 CSS 选择器的优先级，当一个元素能够匹配多个样式时，浏览器会根据优先级为元素赋予正确的样式。
一般情况下，ID选择器优先级最高，其次是类选择器/属性选择器/伪类，优先级最低的是类型选择器和伪元素选择器。不同选择器的叠加也会改变优先级。!important 的样式会覆盖其他样式。
在 VSCode 中，鼠标悬浮在选择器上是，能够实时看到选择器的优先级数值，如下图所示
2. CSS 属性的继承
关于继承的详细介绍，可以参考MDN的相关文章 developer.mozilla.org/zh-CN/docs/…
不同的 CSS 属性有着不同的继承规则。对于一个能够被继承的样式属性，子元素能够从父元素继承相同的属性值，而不需要额外的设置。当然，对于一个默认不继承的样式，也可以通过将其值设置为inherit来强制从父元素继承。
想要知道一个属性是否是继承属性，可以参考MDN的规范条目，例如font-family是一个可以继承的属性，那么，在MDN developer.mozilla.org/zh-CN/docs/… 相关文档的 #规范 条目中，是否是继承属性 一栏的值是 yes，反之亦然。
3. CSS 布局方式
CSS 存在许多种布局方式。总体上分为三类：常规流/文档流、浮动、绝对定位。其中，在正常的文档流中，又可以细分出很多布局方式，例如行级、块级、表格布局、弹性布局（flex）、网格布局（grid）
4. CSS 盒子模型
将元素理解成一个个盒子
注意：下面的内容会因为 box-sizing 属性值的不同而产生不同的定义，默认 content-box
width: content box 的宽度
height: content box 的高度
padding: 元素内边距，百分比相对于元素宽度
border: 元素的边框样式、粗细和颜色
margin: 元素外边距，百分比相对于元素宽度
当 box-sizing 取值为 border-box 时，模型会发生相应变化。
（其实就是宽度和高度将包含边框和内边距）
块级元素
即 display 属性值为 block 的元素。例如 body、article、div、main、section、p、h1~h6、ul/ol、li 等
行级元素
即 display 属性值为 inline 的元素。
实践练习例子：
1. 特异度相关例子
猜猜下面的文字是什么颜色？
<div class="wrapper1">
<div class="text1">文本1</div>
</div>
<style>
.wrapper1 .text1 {
color: red;
}
.text1 {
color: black;
}
</style>
正确答案是红色
虽然黑色的属性声明在后面，理应覆盖掉前面的红色，但是前面是两个类选择器的叠加，优先级是 0, 2, 0 ，后者只有一个类选择器，优先级是 0, 1, 0，所以最终浏览器应用了红色。
2. 属性的继承
<div class="text1">这是一段<strong>文本</strong></div>
<style>
.text1 {
color: red;
border: 1px solid blue;
}
</style>
由于 color 是一个继承属性，所以类名为 text1 的 div 元素设置 color: red; 后，被其内部的子标签 strong 继承了，strong 标签的颜色也是红色的。但 border 不是一个继承属性，所以边框没有继承。
<div class="text1">这是一段<strong>文本</strong></div>
<style>
.text1 {
color: red;
border: 1px solid blue;
}
strong {
border: inherit;
}
</style>
为 strong 添加样式 border: inherit; 后，父元素的 border 属性也被继承下来了。
