简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > css选择器权重、盒模型及CSS常用单位
Blogger Information
Blog 17
fans 0
comment 0
visits 6096
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
css选择器权重、盒模型及CSS常用单位
生活需要加油
Original
711 people have browsed it

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>
Correcting teacher：PHPzPHPz

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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！