css层叠性css层叠性

最新推荐文章于 2024-01-30 22:59:15 发布

Clement_524

最新推荐文章于 2024-01-30 22:59:15 发布

阅读量149

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/weixin_73404129/article/details/127210790

版权

概念：当样式声明发生冲突时，用户代理需要确定样式声明的最终值，既要考虑样式的来源又要考虑样式的特殊声明又要考虑优先级、以及先后顺序，这个过程就叫做层叠

当一个标签被相同的选择器选择到的时候，相同的样式会发生层叠,遵循就近原则。

不同的样式不会有影响

总结

css的层叠性是通过继承性和优先级实现

样式声明不冲突（同时应用于元素）
样式声明冲突
1. 同级选择器，css样式中最后定义的声明应用于元素（就近原则）
2. 不同级选择器，由选择器优先级决定

2、css长度单位

px 像素
- 相对于显示器的屏幕分辨率
- 值是固定
- 计算比较容易
em
- 相对长度单位，相对于父元素的font-size属性值而言
- 值不固定
- 浏览器默认字号16px，未经调整的浏览器都符合：1em = 16px
rem
- 相对长度单位，相对于根元素的font-size属性值而言
- 值不固定
- 浏览器默认字号16px，未经调整的浏览器都符合：1rem = 16px
- 是css3新增单位，IE8及更早版本浏览器中不兼容
% 百分比
- 相对长度单位
- 相对父元素来说的

<!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>
  <style>
    html {
      /* font-size: 100px; */
      font-size: 200px;
    }

    .wrap {
      width: 500px;
      height: 500px;
      background-color: aqua;

      font-size: 20px;
    }

    .wrap .box {
      background-color: tomato;
      /* 1.px */
      /* width: 100px;
      height: 100px; */

      /* 2.em  4*20*/
      /* width: 4em;
      height: 4em; */

      /* 3.rem  1*200*/
      /* width: 1rem;
      height: 1rem; */

      /* 4.百分比  */
      width: 50%;
      height: 50%;

    }
  </style>
</head>

<body>
  <!-- 
    px
    固定值
    相对屏幕分辨率

    em
    相对单位
    相对父元素的font-size
    1em =16px

    rem
    相对单位
    相对html根元素的font-size
    1rem =16px 未调整

    百分比
    相对单位
    相对父元素
   -->

  <div class="wrap">
    <div class="box"></div>
  </div>
</body>

</html>