一. CSS 的属性继承

CSS 的某些属性具有继承性（inherited）
- 如果一个属性具有继承性，那么在某元素上设置后，它的后代元素都可以继承这个属性
- 如果后代元素自身设置该属性，那么优先使用其自身的设置的属性（不管继承过来的属性权重有多高）
如何知道一个属性是否具有继承性呢？
- 常见的跟字体文本相关的属性一般都具有继承性，如：font-size、font-family、color、line-height、text-align等
- 这些不用刻意去记，用的多自然就记住了
- 另外多学会查阅文档，文档中每个属性都有标明其继承性的

注意：
继承过来的是计算值，而不是设置值
如：a 元素 font-size 设置的 2em，其 1em 等同于 a 元素父代元素的 font-size 的大小，而如果这时 a 元素自身有个 b 元素，b 元素的 font-size 会从 a 元素继承过来，但继承的不是设置值 2em，而是 a 元素 font-size 的计算值，即计算之后的结果，比如计算出来的结果是 28px，那么 b 元素继承的也就是 28px，而不是设置的 2em

二. CSS属性的层叠

CSS的翻译是层叠样式表，什么是层叠呢？
- 对于一个元素来说，相同一个属性可以通过不同的选择器给它进行多次设置
- 那么属性会被一层层覆盖上去，但是最终只有一个会生效
那么多个样式覆盖上去，哪一个会生效呢？
- 先判断选择器的权重，权重大的生效
- 权重相同时，后设置的生效
- 对于继承过来的属性，无论继承过来的属性所使用的权重多大，如果元素自身有设置该属性，一律使用自身设置的属性
那么如何知道元素的权重呢？

三. 选择器的权重

按照经验，为了方便比较CSS属性的优先级，可以给CSS属性所处的环境定义一个权值（权重）
环境权重
!important 10000
内联样式 1000
id选择器 100
类选择器、属性选择器、伪类 10
元素选择器、伪元素 1
通配符 0
选择器千位百位十位个位优先级
h1 0 0 0 1 0001
h1 + p::first-letter 0 0 0 3 0003
li > a[href*="en-US"] > .inline-warning 0 0 2 2 0022
#identifier 0 1 0 0 0100
内联样式 1 0 0 0 1000

环境	权重
`!important`	10000
内联样式	1000
`id`选择器	100
类选择器、属性选择器、伪类	10
元素选择器、伪元素	1
通配符	0

选择器	千位	百位	十位	个位	优先级
`h1`	0	0	0	1	0001
`h1 + p::first-letter`	0	0	0	3	0003
`li > a[href*="en-US"] > .inline-warning`	0	0	2	2	0022
`#identifier`	0	1	0	0	0100
内联样式	1	0	0	0	1000

四. HTML元素的类型

在前面我们会经常提到div是块级元素会独占一行**, **span是行内级元素会在同一行显示
- 到底什么是块级元素, 什么是行内级元素呢?
HTML定义元素类型的思路:
- HTML元素有很多, 比如h元素/p元素/div元素/span元素/img元素/a元素等
- 当我们把这个元素放到页面上时, 这个元素到底占据页面中一行多大的空间呢?
  - 为什么我们这里只说一行呢? 因为垂直方向的高度通常是内容决定的
- 比如一个h1元素的标题, 我们必然是希望它独占一行的, 其他的内容不应该和我的标题放在一起
- 比如一个p元素的段落, 必然也应该独占一行, 其他的内容不应该和我的段落放在一起
- 而类似于img/span/a元素, 通常是对内容的某一个细节的特殊描述, 没有必要独占一行
所以, 为了区分哪些元素需要独占一行, 哪些元素不需要独占一行, HTML将元素区分(本质是通过CSS的)成了两类:
- 块级元素（block-level elements）：独占父元素的一行
- 行内级元素（inline-level elements）：多个行内级元素可以在父元素的同一行中显示
  - 行内级非替换元素span
  - 行内级替换元素img /video
  - 行内块级元素inline-block

五. 通过CSS修改元素类型

前面我们说过，事实上元素没有本质的区别：
- div是块级元素，span是行内级元素
- div之所以是块级元素仅仅是因为浏览器默认设置了display属性而已
- 那么我们是否可以通过display来改变元素的特性呢?
- 当然可以!

六. CSS属性display

CSS中有个display属性，能修改元素的显示类型，有4个常用值
- block：让元素显示为块级元素
- inline：让元素显示为行内级元素
- inline-block：让元素同时具备行内级、块级元素的特征
- none：隐藏元素，不会出现在渲染树上
事实上display还有其他的值，比如flex，后续会专门学习
display不支持动画

七. display值的特性

block元素：
- 独占父元素的一行
- 可设置宽高（设置宽后依然占父元素的一行，因为浏览器会自带把一行所剩下的距离会分配给该元素的margin）
- 默认宽度是auto(父元素的一行)，默认高度是由内容决定的
- 注意：当块级元素宽度是auto的时候（独占浏览器视图窗口一行），如果内容很多，且内容是不会自动换行的情况下，会将网页的内容撑开，导致浏览器水平方向出现滚动条
- 为什么块级元素默认情况下独占一行呢？
- https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow
inline元素：
- 跟同一父元素下的其他行内级元素在同一行显示
- 不可设置宽高（img除外）
- 宽高由其内容决定
inline-block元素：
- 跟同一父元素下的其他行内级元素在同一行显示
- 可设置宽高
- 默认宽高由其内容决定

注意：
img属于inline元素，但是可以设置宽高
img是一个可替换元素，display默认inline
但是img的默认分辨率是由被嵌入的图片的原始宽高来确定的，使得它像inline-block元素一样，可以设置margin、padding、border、width、height等CSS属性

八. 编写HTML时的注意事项

块级元素、inline-block元素
- 一般情况下，可以包含其他任何元素（比如块级元素，行内级元素，inline-block元素）
- 特殊情况，p元素不能包含其他块级元素（浏览器解析跟我们实际写的不一致）
- a元素包含块级元素，设置背景色无效等，浏览器控制台调试看着a元素像是有宽高，实际是内部块级元素穿透出去的（解决办法，修改特性为块级元素或行内块级元素）
行内级元素（比如a、span、strong等）
- 一般情况下，只能包含行内级元素

九. 元素隐藏方法

方法一：
- display：none
- 元素不显示出来，也不占据位置（浏览器不会渲染出来），但是在html结构中是存在的
方法二：
- visibility：hidden
- hidden：元素不可见，会挂载在渲染树上，因为会占据元素应该占据的位置
- 默认值visible，元素是可见的
方法三：
- rgba设置颜色，将a的值设置为0
- rgba的a设置的是alpha值，可以设置颜色透明度，不影响子元素
  - transparent关键字是rgba(0, 0, 0, 0)的简写
方法四：
- opactity：0
- 设置整个元素的透明度，会影响所有子元素，仍然占据位置

十. CSS属性 - overflow

用于控制内容溢出时的行为

属性值	作用
`visible`(默认值)	溢出的内容照样可见
`hidden`	溢出的内容裁剪掉
`scroll`	溢出的内容被裁剪，可以通过滚动条查看会一直显示滚动条，滚动条区域占用的空间属于`width、height`
`auto`	自动根据内容是否溢出来决定是否显示滚动条

十一. CSS样式不生效技巧

为何有时候编写的CSS属性不好使，有可能是因为
- 选择器的优先级太低
- 选择器没选中对应的元素
- CSS属性的使用形式不对
  - 元素不支持此CSS属性，比如span行内级元素默认是不支持width和height的
  - 浏览器不支持此CSS属性，比如旧版本的浏览器不支持一些css module3的某些属性
  - 被同类型的CSS属性覆盖，比如font覆盖font-size
建议：
- 充分利用浏览器的开发者工具进行调试（增加、修改样式）、查错

十二. CSS属性的计算过程

案例：

html

<div>
  <h1 class="red"></h1>
</div>

css

<!-- 作者样式表 -->
.red {
  color: red;
  font-size: 40px;
}
h1 {
  font-size: 26px;
}
div h1.red {
  font-size: 3em;
  font-size: 30px;
}

css

<!-- 浏览器默认样式表 -->
h1 {
	display: block;
  font-size: 2em;
  font-weight: bold;
}

确定声明值
- 找到没有冲突的样式，直接作为计算后的样式
- 由此得出如下：
  属性计算值
  color rgb(255,0,0)
  text-align ?
  font-size ?
  background-color ?
  font-weight 700
  display block
  其他CSS属性？
层叠
1. 比较重要性
  - 重要性从高到底
    1. 带有!import的作者样式
    2. 带有!import的默认样式
    3. 作者样式
    4. 默认样式
2. 比较特殊性
  - 即比较样式的权重
3. 比较源码中的顺序
  - 后面的覆盖前面的
- 由此得出如下：
  属性计算值
  color rgb(255,0,0)
  text-align ?
  font-size 30px
  background-color ?
  font-weight 700
  display block
  其他CSS属性？
继承
- 前面步骤走完，仍然没有值的属性，若这个属性默认可以继承，且父级有定义，则使用从父级继承的值
使用默认值
- 如果属性既没有明确设置（作者+浏览器默认），也没有可以继承的，则使用属性的默认值

属性	计算值
`color`	`rgb(255,0,0)`
`text-align`	?
`font-size`	?
`background-color`	?
`font-weight`	`700`
`display`	`block`
其他`CSS`属性	？

属性	计算值
`color`	`rgb(255,0,0)`
`text-align`	?
`font-size`	`30px`
`background-color`	?
`font-weight`	`700`
`display`	`block`
其他`CSS`属性	？

十三. inherit、initial、unset、revert、all

关键字	作用
`inherit`	使得元素获取其父元素该属性的计算值。它可以应用于任何 `CSS`属性
`initial`	将属性的初始（或默认）值应用于元素。不应将初始值与浏览器样式表指定的值混淆
`unset`	可以分为两种情况，如果这个属性本来有从父级继承的值（这个属性默认可以继承，且父级有定义），则将该属性重新设置为继承的值，如果没有继承父级样式，则将该属性重新设置为初始值。换句话说，在第一种情况下（继承属性）它的行为类似于`inherit`，在第二种情况下（非继承属性）类似于`initial`。它可以应用于任何`CSS`属性，包括`CSS`简写属性 `all`
`revert`	将属性的级联值从其当前值还原为如果当前样式源未对当前元素进行任何更改，该属性将具有的值。因此，如果属性从其父级继承，它会将属性重置为其继承值，或者重置为由用户代理的样式表（或用户样式，如果存在）建立的默认值。它可以应用于任何`CSS`属性，包括`CSS`简写属性 `all`

CSS 简写属性 all 将除了 unicode-bidi 与 direction 之外的所有属性重设至其初始值，或继承值

十四. CSS属性的计算值

指这个属性在由父类转向子类的继承中的值
计算值所需要的计算通常包括将相对值转换成绝对值 (如em单位或百分比)。例如，如一个元素的属性值为 font-size:16px 和 padding-top:2em, 则 padding-top 的计算值为 32px (字体大小的 2 倍)
然而，对于有些属性 (这些元素的百分比与需要布局确定后才能知道的值有关，如 width, margin-right, text-indent, 和 top)，它们的“百分比值”会转换成“百分比的计算值”。另外，line-height 属性值如果是没有单位的数字，则该值就是其计算值。这些计算值中的相对值会在应用值确定后转换成绝对值
https://developer.mozilla.org/zh-CN/docs/Web/CSS/computed_value

十五. 应用值

CSS 属性的应用值（used value）是完成所有计算后最终使用的值，可以由 window.getComputedStyle 获取。尺寸 (例如 width, line-height) 单位为像素
https://developer.mozilla.org/zh-CN/docs/Web/CSS/used_value

一. CSS 的属性继承 ​

二. CSS属性的层叠 ​

三. 选择器的权重 ​

四. HTML元素的类型 ​

五. 通过CSS修改元素类型 ​

六. CSS属性display ​

七. display值的特性 ​

八. 编写HTML时的注意事项 ​

九. 元素隐藏方法 ​

十. CSS属性 - overflow ​

十一. CSS样式不生效技巧 ​

十二. CSS属性的计算过程 ​

十三. inherit、initial、unset、revert、all ​

十四. CSS属性的计算值 ​

十五. 应用值 ​

一. CSS 的属性继承

二. CSS属性的层叠

三. 选择器的权重

四. HTML元素的类型

五. 通过CSS修改元素类型

六. CSS属性display

七. display值的特性

八. 编写HTML时的注意事项

九. 元素隐藏方法

十. CSS属性 - overflow

十一. CSS样式不生效技巧

十二. CSS属性的计算过程

十三. inherit、initial、unset、revert、all

十四. CSS属性的计算值

十五. 应用值