元素显示模式与CSS特性不同显示模式的特点、元素显示模式的转换、CSS三大特性（继承性及常见场景、层叠性、优先级及选择器

「这是我参与2022首次更文挑战的第3天，活动详情查看：2022首次更文挑战」

一、元素显示模式

1-1、显示模式

1-2、显示模式转换

属性	效果
display: block;	转换成块级元素
display: inline-block;	转换成行内块元素
display: inline;	转换成行内元素

1-3、HTML嵌套规范

块级元素

可嵌套：文本、块级元素、行内元素、行内块元素
但是：p标签中不要嵌套div、p、h等块级元素

a标签

a标签内部可嵌套任意元素
但是a标签内部不能嵌套a标签

二、CSS三大特性

2-1、继承性

2-1-1、继承性常见应用场景

直接给ul设置list-style:none来去除列表默认的小圆点样式
直接给body标签设置统一的font-size，从而统一不同浏览器默认文字大小

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      /* 1、直接给ul设置list-style:none去除无序列表的小圆点 */
      ul {
        list-style: none;
      }

      /* 2、统一不同浏览器默认文字大小，直接给body标签设置统一的font-size */
      body {
        font-size: 20px;
      }

    </style>
  </head>
  <body>
    <ul>
      <li>我是第1个li</li>
      <li>我是第2个li</li>
      <li>我是第3个li</li>
      <li>我是第4个li</li>
      <li>我是第5个li</li>
      <li>我是第6个li</li>
      <li>我是第7个li</li>
      <li>我是第8个li</li>
      <li>我是第9个li</li>
      <li>我是第10个li</li>
    </ul>
  </body>
</html>

2-1-2、继承性失效情况

a标签的文字颜色会继承失效
h系列标签的font-size会继承失效

2-2、层叠性

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      .orange {
        color: orange;
      }

      p {
        color: red;
      }

      p {
        color: green;
      }
    </style>
  </head>
  <body>
    <p class="orange">我是一个文字</p>
  </body>
</html>

最终效果：

！层叠性的前提是：选择器的优先级相同

由于类选择器优先级>标签选择器，所以最终展现为橙色

如果，都使用标签选择器，那么根据层叠性最终会展现为绿色

2-3、优先级

权重计算的前提是：选择器能够直接选中标签

如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高

2-3-1、权重叠加计算

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      /* 0 , 1 , 0 , 1 */
      div #one {
        color: orange;
      }

      /* 0 , 0 , 2 , 0 */
      .father .son {
        color: skyblue;
      }

      /* 0 , 0 , 1 , 1 */
      .father p {
        color: purple;
      }

      /* 0 , 0 , 0 , 2 */
      div p {
        color: pink;
      }

    </style>
  </head>
  <body>
    <div class="father">
      <p class="son" id="one">我是一个标签</p>
    </div>
  </body>
</html>

根据规则计算后，最终将展示为橙色

2-3-2、继承样式不能用选择器权重计算的场景

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css权重</title>
    <style>
      #outer p {
        color: red;
      }
      #outer .inner {
        color: green;
      }
      /*0,1,0,2*/
      #outer p strong {
        color: blue;
      }
      /*0,1,0,3*/
      #outer p span strong {
        color: orange;
      }
    </style>
  </head>
  <body>
    <div id="outer">
      <p class="inner">
        <span><strong>112233</strong></span>
      </p>
    </div>
  </body>
</html>

最终效果展现为橙色：

要注意权重计算只针对当前元素：#outer .inner针对的元素的p标签（strong元素的祖先）并不是strong

以及#outer p 指定的都是strong的祖先，对于继承样式不能用选择器权重来计算。所以最终展示的为紫色

当继承样式与指定样式发生冲突时，指定样式获胜。