这是我参与「第五届青训营 」笔记创作活动的第4天~

一、本堂课内容重点

1.CSS特异性

如果出现同一个 HTML 元素上有多个 CSS 规则的情况，当它们互相冲突时，浏览器会遵循一定的规则来找到最具体的那条规则，并舍弃与之冲突的其它规则。CSS特异性（CSS Specificity）的计算，也就是CSS样式选择器的权重计算。

浏览器是按照具体性（也叫特异性，specificity）来确定优先级，选择器越具体，它的优先级就越高。

(1)计算方法

选择器	具体值
HTML选择器	1
类选择器	10
ID选择器	100

举个栗子~

选择器	具体值	说明
h	1	一个HTML选择器
div h	2	两个HTML选择器
.class	10	一个类选择器
div h.class	12	一个类选择器+两个HTML选择器
body #id div h.class	112	一个id选择器一个类选择器+两个HTML选择器

注：同样的选择器，定义在后面的优先级更高。但是总的原则是优先级会先看具体值，再看排序。

(2)特异性继承

某些属性会自动继承其父元素的计算值，除非显式指定一个值。

（1）这里的<strong>标签继承的字体颜色是<p>标签的蓝色。一般情况下与文字相关的属性（如颜色、字体）都是可继承的，而与盒模型相关的属性不可继承（如盒模型的宽度需要自行设置）。

（2）显示继承：使用关键字inherit，含义是指定继承父元素的相应属性。

（3）初始值：使用关键字initial,用于设置 CSS 属性为它的默认值。

2.布局（Layout）

常见布局方式

1. 常规流（行级、块级、表格布局、FlexBox、Grid布局）
2. 浮动
3. 绝对定位

（1）盒模型

CSS 盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 其主要属性有：

1. Content box（内容）: 这个区域是用来显示内容，大小可以通过设置 width 和 height
2. Padding box（内边距）: 包围在内容区域外部的空白区域； 大小通过 padding 相关属性设置
3. Border box（边框）: 边框盒包裹内容和内边距。大小通过 border 相关属性设置
4. Margin box（外边距）: 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过 margin 相关属性设置

二、个人总结

重点：

1. CSS特异性计算
2. 常见布局和盒模型相关属性