CSS选择器权重计算、盒模型属性与计算方式、CSS常用单位em、rem，vw、vh - 22期作业-前端开发

微信公众号讲师中心

首页

文章

web3.0 后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发 UI设计计算机基础

编程手册

大前端 JavaScript 后端开发数据库移动端运维开发 UI设计计算机基础 XML Web Services

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

一、CSS选择器权重计算方式

权重：ID=100 class=10 tag=1

<!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>CSS选择器权重计算方式</title>
</head>
<style>
    /* 当使用标签作为选择器的时候权重是001 */
    p {
        color: blue;
    }
    /* 当使用class作为选择器的时候权重是010 */
    .title {
        color: red;
    }
    /* 当使用ID作为选择器的时候权重是100 */
    #pid {
        color: yellow;
    }
    /* 
    解释:
    示例2 p标签+class 选择器权重将会增加到011
    */
    p.title {
        color:cornsilk;
    }
    /* id权重过于高不推荐使用,推荐使用class */
</style>
<body>
    <p>示例1:标签</p>
    <p class="title">示例2:class</p>
    <p id="pid">示例3:ID</p>
</body>
</html>

二、盒模型五大属性与计算方式

<!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>
</head>
<style>
    .box {
        /* 宽 */
        width: 200px;
        /* 高 */
        height: 150px;
        /* 内边距 */
        padding: 10px;
        /* 边框 */
        border:solid;
        /* 外边距 */
        margin: auto;
        /* 浏览器默认计算方式 */
        box-sizing: content-box;
    }
</style>
<body>
    <div class="box">盒子</div>
</body>
</html>

`页面显示大小不等于源码中的大小`

`页面显示大小等于源码中大小`

.box {
    /* 如果需要页面中的大小 == 源码中的大小增，使用box-sizing：border-box */
    box-sizing: border-box;
}

三、CSS常用单位em、rem，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>CSS常用单位em、rem</title>
  </head>
  <style>
    div.em {
      font-size: 2em;
    }
    /* 1em = 16px  可继承属性  */
    /* ---------------------- */
    /* 1rem = 1em = 16px */
    .rem {
        font-size: 1.15rem;
    }
    .rem p {
        font-size: 1.55rem;
    }
    /* 解决了em的问题，使用rem可以单独使用 */
  </style>
  <body>
    <!-- 1.em -->
    <div class="em">
      <p>你好</p>
      <p>世界</p>
    </div>
    <!-- 2.rem -->
    <div class="rem">
        <p>rem</p>
    </div>
  </body>
</html>

<!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>
  </head>
  <style>
    .box {
        width: 100vw;
        height: 100vh;
        /* 背景颜色宽高将会占据窗口的100% */
        width: 20vw;
        height: 50vh;
        /* 背景颜色宽占据窗口的20% */
        /* 背景颜色高占据窗口的50% */
        /* 背景颜色 */
        background-color: red;
    }
  </style>
  <body>
    <div class="box"></div>
  </body>
</html>