search

博客列表 >css选择器权重、盒模型及CSS常用单位

css选择器权重、盒模型及CSS常用单位

生活需要加油
生活需要加油原创
2023年02月08日 18:17:38717浏览

CSS选择器权重、盒模型及常用单位

1. CSS选择器权重的计算方式

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>选择器权重的计算方式</title>
  8.   </head>
  9.   <style>
  10.     /* 使用标签 权重 001 */
  11.     p {
  12.       color: red;
  13.     }
  14.     /* 使用class 权重 010 */
  15.     .prov {
  16.       color: cyan;
  17.     }
  18.     /* 使用id 权重 100 */
  19.     #prov {
  20.       color: purple;
  21.     }
  22.     /* 使用双class 权重 020 */
  23.     .prov.con {
  24.       color: blue;
  25.     }
  26.   </style>
  27.   <body>
  28.     <p>标签</p>
  29.     <p class="prov">class</p>
  30.     <p id="prov">id</p>
  31.     <p class="prov con">双class</p>
  32.   </body>
  33. </html>

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>盒模型常用属性与盒大小计算方式</title>
  8.   </head>
  9.   <style>
  10.     .box {
  11.       width: 500px;
  12.       height: 400px;
  13.       padding: 50px;
  14.       margin: 25px;
  15.       box-sizing: content-box;
  16.       border: 10px solid red;
  17.     }
  18.   </style>
  19.   <body>
  20.     <div class="box">php</div>
  21.   </body>
  22. </html>

2.1 box-sizing属性设置为content-box时，盒子实际尺寸不等于源码中尺寸

盒子大小计算方式

2.2 box-sizing属性设置为content-box时，盒子实际尺寸不等于源码中尺寸

  1. .box{
  2. box-sizing:border-box;
  3. }

3. CSS常用单位(em,rem,vw/vh)

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>CSS常用单位(em,rem)</title>
  8.   </head>
  9.   <style>
  10.     div.em {
  11.       font-size: 2em;
  12.     }
  13.     /* 1em = 16px  em和位置有关  */
  14.     .em > :first-child {
  15.       font-size: 2em;
  16.       color: red;
  17.     }
  18.     /* 1rem = 1em = 16px  rem 只和根元素有关，与位置无关*/
  19.     .rem {
  20.       font-size: 3rem;
  21.     }
  22.     .rem p {
  23.       font-size: 3rem;
  24.     }
  25.   </style>
  26.   <body>
  27.     <!-- 1.em -->
  28.     <div class="em">
  29.       <p>上海</p>
  30.       <p>北京</p>
  31.     </div>
  32.     <!-- 2.rem -->
  33.     <div class="rem">
  34.       <p>合肥</p>
  35.     </div>
  36.   </body>
  37. </html>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>CSS常用单位(vw/vh)</title>
  8. </head>
  9. <body>
  10.      <style>
  11.     .box {
  12.         width: 50vw;
  13.         height: 50vh;
  14.         /* 背景颜色宽占据窗口的50% */
  15.         /* 背景颜色高占据窗口的50% */
  16.         /* 背景颜色 */
  17.         background-color: cyan;
  18.     }
  19.   </style>
  20.   <body>
  21.     <div class="box"></div>
  22. </body>
  23. </html>
上一条：选择器的权重下一条：css选择器权重、盒子模型、vh/vw和em/rem使用
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多