CSS-继承-层叠-类型

CSS的某些属性具有继承性(Inherited):

如果一个属性具备继承性, 那么在该元素上设置后, 它的后代元素都可以继承这个属性，相当于给每一个后代元素都设置了相同的样式
当然, 如果后代元素自己有设置该属性, 那么优先使用后代元素自己的属性(不管继承过来的属性权重多高)
常见的文本和字体相关的样式 (例如: font-size/font-family/font-weight/line-height/color/text-align等类似于font-*或text-*格式的属性 ) 都具有继承性

但并不是全部的文本和字体相关的样式都会被继承(例如: text-decoration等属性没有继承性)

层叠

对于一个元素来说, 相同一个属性我们可以通过不同的选择器给它进行多次设置

对应的属性值会被一层层覆盖上去

最终只有最后一个或者优先级最高的那个会生效

判断标准

选择器的权重, 权重大的生效, 根据权重可以判断出优先级
先后顺序, 权重相同时, 后面设置的生效

选择器权重

按照经验，为了方便比较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的)成了两类:

块级元素(block-level elements): 独占父元素的一行
行内级元素(inline-level elements): 多个行内级元素可以在父元素的同一行中显示

对于任何的块级元素或者行内级元素而言，属性的默认值一般为auto

例如: width和height的默认值即为auto

表示的是自己不进行任何的设置，其具体的值由浏览器来自主进行决定

display

CSS中有个display属性，能修改元素的显示类型，有4个常用值

属性	说明	描述
block	让元素显示为块级元素	1. 在父级元素中独占一行 2. 可以设置宽度和高度 3. 高度默认由内容来决定 4. 即使`设置了元素的宽度`，元素依旧独占一行
inline	让元素显示为行内级元素	1. 可以和其它行内级元素在同一行 2. 不可以为行内非替换元素设置宽度和高度 3. 默认的宽度和高度由元素内容的宽度和高度决定
inline-block	让元素同时具备行内级、块级元素的特征	1. 可以和其它行内级元素在同一行 2. 可以设置元素的宽度和高度 3. 默认的宽度和高度由元素内容的宽度和高度决定
none	隐藏元素	隐藏元素

注意事项

元素类型	描述
块级元素，行内块元素	1. 一般情况下，可以包含其他任何元素(比如块级元素、行内级元素、inline-block元素) 2. 特殊情况，p元素不能包含其他块级元素
行内级元素	一般情况下，只能包含行内级元素

块级元素和行内块元素可以嵌套其它元素
P元素不能嵌套div元素，否则渲染会混乱
行内元素不能嵌套块级元素，否则渲染会混乱


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <!-- h1/p/div -->
  <!-- span/a/img/strong -->

  <div>
    <h1></h1>
    <p></p>
    <a href=""></a>
    <img src="" alt="">
  </div>

  <!-- 特殊: 不要在p元素中放div元素 -->
  <p>
    123
    <div>我是div元素</div>
    abc
  </p>

  <!-- 行内级元素中不要放块级元素 -->
  <span>
    321
    <div></div>
    <p></p>
    cba
  </span>

</body>
</html>

在严格意义上讲，并不是所有的行内级元素(inline level)都不可以设置宽度和高度

而是仅仅只有行内非替换元素(例如a, span等)这类元素是不可以设置元素的宽度和高度的

但是对于行内替换元素(例如img，input等)这类元素是可以设置元素的宽度和高度的

隐藏元素的方式

方式	描述	备注
display: none	元素不显示出来, 并且也不占据位置, 不占据任何空间(和不存在一样) 元素本身还是存在于DOM树中	只能设置元素是显示还是隐藏
visibility: hidden	设置为hidden, 虽然元素不可见, 但是会占据元素应该占据的空间 `visibility`属性的默认值为`visible` 元素本身还是存在于DOM树中	只能设置元素是显示还是隐藏
rgba设置颜色,将alpha的值设置为0	可以通过此方法实现文本或某些特定元素的透明元素本身还是存在于DOM树中，会占据元素应该占据的空间元素本身还是可以被选中的	可以设置元素透明度不影响子元素不推荐使用该属性只能使文本或某些特定元素透明，局限性过大
opacity: 0	设置整个元素的透明度, 会影响当前元素和当前元素下的所有子元素元素本身还是存在于DOM树中会占据元素应该占据的空间	可以设置元素透明度可以设置元素自身和元素下所有子元素的透明度

overflow

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

值	描述
visible	溢出的内容照样可见 --- 默认值
hidden	溢出的内容直接裁剪
scroll	溢出的内容被裁剪，但可以通过滚动机制查看会一直显示滚动条区域，滚动条区域占用的空间属于width、height 默认情况下会同时显示水平滚动条和垂直滚动条
auto	自动根据内容是否溢出来决定是否提供滚动机制

如果在容器中出现了滚动条，那么这个滚动条在默认情况下，会需要占据一定的空间
溢出的文本并不占位，不会影响标准流中的其它元素的布局

所以如果后边有其它元素，那么后边的其它元素会覆盖在溢出的文本上
设置overflow后可能会对当前元素的line-height产生一点点的增加

05_CSS-继承-层叠-类型