CSS继承-层叠-类型

一.CSS属性的继承

🤢CSS的某些属性是具有继承性的：

如果一个属性具备继承性，那么在该元素上设置后，他的后代元素都可以继承这个属性；
当然，如果后代元素自己有设置该属性，那么优先使用后代元素自己的属性(不管继承过来的属性权重多高)

👽CSS属性的默认继承：

如果一个属性具备继承性，那么在该元素上设置后，它的后代元素都可以继承这个属性。
当然如果后代元素自己有设置该属性，那么优先使用后代元素自己的属性(不管继承过来的权重多高)。

html 复制代码

<style>
  .box {
    color: red;
}
</style>

<body>
  <div class="box">
    <h1>我是h1元素</h1>
    <p>我是P元素</p>
    <span>我是span元素</span>
  </div>
</body>

🥰如何知道一个属性是否具有继承性哪？

常见的font-size font-family font-weight line-height color text-align都具有继承性；
这些东西不用刻意去记，用的多了自然就记住了；
常见的继承属性如下：

css 复制代码

color，cursor，font-family,font-size,font-style,font-variant,font-weight,font,letter-spacing,line-height

查看某个属性是否是继承过来的。

CSS继承的是计算值而不是设置值。

😈CSS的强制继承：

css 复制代码

.box{
  color:red;
  border:2px solid purple;
}

.box p{
  border:inherit  
  /* 会将父元素的border强制继承过来 */
}

二.CSS属性的层叠

😈CSS翻译过来是层叠样式表，什么是层叠哪？

对于一个元素来说，相同的属性我们可以通过不同的选择器给它进行多次设置；
那么属性会一层一层的覆盖上去；
但是最终只会有一个生效；

css 复制代码

  .box {
      color: antiquewhite;
      color: aqua;
      color: aquamarine;
      color: bisque;
      color: blue;
      color: brown;
    }

🙈那么多个样式属性覆盖上去，哪一个会生效哪？

判断一:选择器权重，权重越大的生效，根据权重可以判断优先级；
判断二:先后顺序，权重相同时候，后面设置的生效；

😬选择器的权重：为了方便比较CSS属性优先级，可以给CSS环境定义一个权重值，权重可以累加；

!important:1000
内联样式：1000
id选择器：100
类选择器，属性选择器，伪类：10
元素选择器，伪元素：1
通配符：0

三.HTML元素的类型

🦄我们在进行前端页面布局的时候，经常会提到div是块级别元素，span是行内级别元素，那么到底什么是行内级别元素，什么是块级别元素哪？

HTML考虑到一个问题：每个元素在页面中到底占据多大的空间；
某些元素非常重要：独占一行-->类型：块级别元素(block level)
某些元素属于内容的一部分：没有必要独占一行-->类型：行内级别元素(inline-level)

🐸进行HTML元素类型的修改：display:block display:inline-block display:inline

四.CSS属性-display

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

block：让元素显示为块级元素；
inline：让元素显示为行内级别元素；
inline-block：让元素同时具备行内级，块级元素的特征；
none：隐藏元素；

五.块级元素和行内级别元素宽高

👽行内级别元素设置宽度和高度不生效？？？其实不够严谨！！！

行内替换元素是可以设置宽高的，比如img
和其他行内元素在同一行进行展示。
其实是行内非替换元素不可以设置宽度和高度。
行内级别元素中不能存放块级别元素；

六.元素隐藏的方法

🤢方法一：使用display:none元素不占据任何位置也不占据任何空间(和不存在一样)

css 复制代码

/* 将元素隐藏不占据位置 */
  <style>
    .box1 {
      width: 300px;
      height: 100px;
      background-color: aquamarine;
    }

    .box2 {
      width: 50px;
      height: 50px;
      background-color: yellow;
      border-radius: 8px;
      display: none;
      font-size: 10px;
      font-size: 8px;
      color: aliceblue;
      /* 进行元素的隐藏 */
    }

    .box3 {
      width: 50px;
      height: 50px;
      background-color: blue;
      border-radius: 8px;
      font-size: 8px;
      color: aliceblue;
    }
  </style>

css 复制代码

<div class="box1">
    <div class="box2">增加测试字体</div>
    <div class="box3">增加测试字体2</div>
</div>

🥰方法二：将visibility设置为hidden虽然元素不可见，但是会占据元素应该占据的空间。

css 复制代码

/* 将元素隐藏不影响位置 */
<style>
    .box1 {
      width: 300px;
      height: 100px;
      background-color: aquamarine;
    }

    .box2 {
      width: 50px;
      height: 50px;
      background-color: yellow;
      border-radius: 8px;
      visibility: hidden;
      font-size: 10px;
      font-size: 8px;
      color: aliceblue;
      /* 进行元素的隐藏 */
    }

    .box3 {
      width: 50px;
      height: 50px;
      background-color: blue;
      border-radius: 8px;
      font-size: 8px;
      color: aliceblue;
    }
  </style>

css 复制代码

  <div class="box1">
    <div class="box2">增加测试字体</div>
    <div class="box3">增加测试字体2</div>
  </div>

🐳方法三：将rgba设置颜色，将a的值设置为0，不影响子元素（a的取值范围0-1）。

如果进行透明设置a只能设置自身元素背景的透明度；
opacity设置会设置子元素的透明值；

css 复制代码

/* 需求：将元素隐藏并且子元素也全部透明opacity */
  <style>
    .box1 {
      width: 300px;
      height: 100px;
      background-color: aquamarine;
    }

    .box2 {
      width: 50px;
      height: 50px;
      background-color: rgba(red, green, blue, 0);
      border-radius: 8px;
      font-size: 10px;
      font-size: 8px;
      color: aliceblue;
      /* 进行元素的隐藏 */
    }

    .box3 {
      width: 50px;
      height: 50px;
      background-color: blue;
      border-radius: 8px;
      font-size: 8px;
      color: aliceblue;
    }
  </style>

css 复制代码

  <div class="box1">
    <div class="box2">增加测试字体</div>
    <div class="box3">增加测试字体2</div>
  </div>

😈通过设置opacity值将子元素也进行隐藏

css 复制代码

  <style>
    .box1 {
      width: 300px;
      height: 100px;
      background-color: aquamarine;
    }

    .box2 {
      width: 50px;
      height: 50px;
      background-color: rgba(red, green, blue, 0);
      opacity: 0;
      border-radius: 8px;
      font-size: 10px;
      font-size: 8px;
      color: aliceblue;
      /* 进行元素的隐藏 */
    }

    .box3 {
      width: 50px;
      height: 50px;
      background-color: blue;
      border-radius: 8px;
      font-size: 8px;
      color: aliceblue;
    }
  </style>

css 复制代码

  <div class="box1">
    <div class="box2">增加测试字体</div>
    <div class="box3">增加测试字体2</div>
  </div>

七.CSS样式不生效技巧

😬选择器优先级太低；

🐸选择器没有选中对应元素；

🙈CSS属性的使用形式不对：

元素不支持此CSS属性，比如span默认不支持width和height
浏览器不支持此CSS属性，比如旧版的浏览器不支持CSS3 modules的某些属性；
被同类型的CSS属性覆盖，比如font覆盖font-size

😈建议：充分利用浏览器的开发工具进行调试。