持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第30天，点击查看活动详情
CSS属性继承
CSS的某些属性具有继承性。如果一个属性具备继承性, 那么在该元素上设置后, 它的后代元素都可以继承这个属性。当然, 如果后代元素自己有设置该属性, 那么优先使用后代元素自己的属性(不管继承过来的属性权重多高)。
如何知道一个属性是否具有继承性呢?常见的font-size/font-family/font-weight/line-height/color/text-align都具有继承性。需要注意的是，继承过来的是计算值, 而不是设置值。
CSS属性层叠
CSS的翻译是层叠样式表, 什么是层叠呢?对于一个元素来说, 相同一个属性我们可以通过不同的选择器给它进行多次设置。那么属性会被一层层覆盖上去，但是最终只有一个会生效。
那么多个样式属性覆盖上去, 哪一个会生效呢?有什么判断依据呢？
判断依据一: 选择器的权重, 权重大的生效, 根据权重可以判断出优先级。
判断依据二: 先后顺序, 权重相同时, 后面设置的生效。
那么如何知道元素的权重呢?
选择器的权重
按照经验，为了方便比较CSS属性的优先级，可以给CSS属性所处的环境定义一个权值（权重）。
- !important：10000
- 内联样式：1000
- id选择器：100
- 类选择器、属性选择器、伪类：10
- 元素选择器、伪元素：1
- 通配符：0
HTML元素的类型
在前面我们会经常提到div是块级元素会独占一行, span是行内级元素会在同一行显示。到底什么是块级元素, 什么是行内级元素呢?
HTML定义元素类型的思路是这样子的。HTML元素有很多, 比如h元素/p元素/div元素/span元素/img元素/a元素等等。当我们把这个元素放到页面上时, 这个元素到底占据页面中一行多大的空间呢？为什么我们这里只说一行呢? 因为垂直方向的高度通常是内容决定的。比如一个h1元素的标题, 我们必然是希望它独占一行的, 其他的内容不应该和我的标题放在一起。比如一个p元素的段落, 必然也应该独占一行, 其他的内容不应该和我的段落放在一起。而类似于img/span/a元素, 通常是对内容的某一个细节的特殊描述, 没有必要独占一行。所以, 为了区分哪些元素需要独占一行, 哪些元素不需要独占一行, HTML将元素区分(本质是通过CSS的)成了两类：
- 块级元素: 独占父元素的一行
- 行内级元素:多个行内级元素可以在父元素的同一行中显示
事实上元素没有本质的区别。div是块级元素, span是行内级元素。div之所以是块级元素仅仅是因为浏览器默认设置了display属性而已。
