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

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>

Correcting teacher：

PHPz

Correction status：qualified

Teacher's comments：总结的不错，继续加油

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

表单元素 form 属性知识整理

2023-01-21 11:21:06