选择器权重/盒模型/常用单位

1. 实例演示css选择器权重的计算方式

<!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>
      * {
        padding: 0;
        margin: 0;
      }
      nav {
        width: 400px;
        margin: 80px auto;
      }
      nav h3 {
        background-color: #333;
        padding: 10px 20px;
        color: #fff;
      }
      ul > li {
        list-style-type: none;
      }
      /*权重0,0,3*/
      ul > li a {
        color: #333;
        display: block;
        background-color: #eee;
        padding: 10px 20px;
        text-decoration: none;
      }
        /*权重0,1,3*/
      ul > li a.active {
        background-color: #ddd;
      }
      /*权重0,2,3*/
      ul > li a.active:hover {
        background-color: #999;
      }
    </style>
  </head>
  <body>
    <nav>
      <h3>Nav Item</h3>
      <ul>
        <li><a href="">LINK1</a></li>
        <li><a href="">LINK2</a></li>
        <li><a href="">LINK3</a></li>
        <li><a class="active" href="">LINK4 设置了 .active :hover增加了2次权重</a></li>
        <li><a href="">LINK5</a></li>
      </ul>
    </nav>
  </body>
</html>

2. 实例演示盒模型常用属性与盒大小计算方式

盒模型5大属性
- width 内容宽度
- height 内容高度
- padding 内边距
- border 边框
- margin 外边距

<!DOCTYPE html>
<html lang="zh-CN">
<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>盒模型</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        .box{
            width: 260px;
            height: 160px;
            padding:20px;
            border:10px solid #f90;
            margin: 40px;
            background-color: blue;
            background-clip: content-box;
            color:#fff;
        }
    </style>
</head>
<body>
    <div class="box">演示盒模型</div>
</body>
</html>

盒模型大小计算方法

这个案例中，设置了box-sizing:border-box 属性使盒模型大小的计算边界发生改变，由默认的内容区box-sizing:content-box 变成了以边框为计算边界。

本案例box盒模型大小计算

由于设置了box-sizing:border-box，实际内容尺寸大小是有变小的。
实际内容宽度为：width:260 - border左右宽度20 - padding左右内边距40 = 200px
实际内容高度为：height:160 - border上下高度20 - padding上下内边距40 = 100px
内边距为：padding:20px
边框宽度为：border:10px
外边距为：margin:40px

盒模型大小宽为：实际内容宽度200 + 左右内边距40 + 左右边框20 + 左右外边距80 = 340px
盒模型大小高为：实际内容高度100 + 左右内边距40 + 左右边框20 + 左右外边距80 = 240px

快速计算

由于计算边界延展到了边框，width，height的值就是可见部分的大小，再加上margin即可。
盒模型大小宽为：内容宽度260 + 左右外边距80 = 340px
盒模型大小高为：内容高度160 + 左右外边距80 = 240px

3. 实例演示css常用单位(em,rem)

<!DOCTYPE html>
<html lang="zh-CN">
  <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>常用单位(em,rem)</title>
  </head>
  <style>
    html {
      font-size: 40px;
    }
    .content {
      font-size: 18px;
    }
    .content p {
      font-size: 1em;
    }
    .content p.rem {
      font-size: 1rem;
    }
  </style>
  <body>
    <div class="content">
      <h3>em</h3>
      <p><em>这里字号：18px</em>P标签的的字号单位em,字号大小继承自父标签div的字号。</p>
    </div>
    <div class="content">
      <h3>rem</h3>
      <p class="rem"><em>这里字号：40px</em>P标签的的字号单位rem,字号大小继承自根元素标签html的字号，默认16px。</p>
    </div>
  </body>
</html>

3. 实例演示css视口单位(vw,vh)

<!DOCTYPE html>
<html lang="zh-CN">
  <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>视口单位(vw,vh)</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      /*vw,vh总是相对于视口的大小，与跟标签，父标签无继承关系。*/
      html {
        width: 100vw;
        height: 100vh;
      }
      .container {
        width: 80vw;
        height: 80vh;
      }
      .box {
        width: 50vw;
        height: 50vh;
        background-color: orange;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box"><p>vw,vh总是相对于视口的大小，与跟标签，父标签无继承关系。</p></div>
    </div>
  </body>
</html>

css选择器权重/盒模型/常用单位