CSS继承、层叠、元素类型

CSS的属性继承

CSS的某些属性具有继承性(Inherited):
- 如果一个属性具备继承性, 那么在该元素上设置后, 它的后代元素都可以继承这个属性;
- 当然, 如果后代元素自己有设置该属性, 那么优先使用后代元素自己的属性(不管继承过来的属性权重多高);
如何知道一个属性是否具有继承性呢?
- 常见的font-size/font-family/font-weight/line-height/color/text-align都具有继承性;
- 这些不用刻意去记, 用的多自然就记住了;
另外要多学会查阅文档, 文档中每个属性都有标明其继承性的:

CSS的翻译是层叠样式表, 什么是层叠呢?
- 对于一个元素来说, 相同一个属性我们可以通过不同的选择器给它进行多次设置;
- 那么属性会被一层层覆盖上去;
- 但是最终只有一个会生效;
那么多个样式属性覆盖上去, 哪一个会生效呢?
- 判断一: 选择器的权重, 权重大的生效, 根据权重可以判断出优先级;
- 判断二: 先后顺序, 权重相同时, 后面设置的生效;
那么如何知道元素的权重呢?

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

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

方法一: display设置为none
- 元素不显示出来, 并且也不占据位置, 不占据任何空间(和不存在一样);
**方法二: visibility设置为hidden **
- 设置为hidden, 虽然元素不可见, 但是会占据元素应该占据的空间;
- 默认为visible, 元素是可见的;
方法三: rgba设置颜色, 将a的值设置为0
- rgba的a设置的是alpha值, 可以设置透明度, 不影响子元素;
**方法四: opacity设置透明度, 设置为0 **
- 设置整个元素的透明度, 会影响所有的子元素;