Community Learn Tools Library Leisure
search
English
Home > List of blog posts > CSS选择器权重计算、盒模型属性与计算方式、CSS常用单位em、rem，vw、vh
Blogger Information
Blog 7
fans 0
comment 0
visits 2303
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常用单位em、rem，vw、vh
阿辉
Original
306 people have browsed it

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

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

  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选择器权重计算方式</title>
  8. </head>
  9. <style>
  10.     /* 当使用标签作为选择器的时候权重是001 */
  11.     p {
  12.         color: blue;
  13.     }
  14.     /* 当使用class作为选择器的时候权重是010 */
  15.     .title {
  16.         color: red;
  17.     }
  18.     /* 当使用ID作为选择器的时候权重是100 */
  19.     #pid {
  20.         color: yellow;
  21.     }
  23.     /* 
  24.     解释:
  25.     示例2 p标签+class 选择器权重将会增加到011
  26.     */
  27.     p.title {
  28.         color:cornsilk;
  29.     }
  31.     /* id权重过于高不推荐使用,推荐使用class */
  33. </style>
  34. <body>
  35.     <p>示例1:标签</p>
  36.     <p class="title">示例2:class</p>
  37.     <p id="pid">示例3:ID</p>
  38. </body>
  39. </html>

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

  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>盒模型五大属性与计算方式</title>
  8. </head>
  9. <style>
  10.     .box {
  11.         /* 宽 */
  12.         width: 200px;
  13.         /* 高 */
  14.         height: 150px;
  15.         /* 内边距 */
  16.         padding: 10px;
  17.         /* 边框 */
  18.         border:solid;
  19.         /* 外边距 */
  20.         margin: auto;
  21.         /* 浏览器默认计算方式 */
  22.         box-sizing: content-box;
  24.     }
  25. </style>
  26. <body>
  27.     <div class="box">盒子</div>
  28. </body>
  29. </html>

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

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

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

三、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>
  10.   <style>
  11.     div.em {
  12.       font-size: 2em;
  13.     }
  14.     /* 1em = 16px  可继承属性  */
  15.     /* ---------------------- */
  17.     /* 1rem = 1em = 16px */
  18.     .rem {
  19.         font-size: 1.15rem;
  20.     }
  21.     .rem p {
  22.         font-size: 1.55rem;
  23.     }
  24.     /* 解决了em的问题，使用rem可以单独使用 */
  25.   </style>
  27.   <body>
  28.     <!-- 1.em -->
  29.     <div class="em">
  30.       <p>你好</p>
  31.       <p>世界</p>
  32.     </div>
  34.     <!-- 2.rem -->
  35.     <div class="rem">
  36.         <p>rem</p>
  37.     </div>
  38.   </body>
  39. </html>
  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>vw、vh</title>
  8.   </head>
  9.   <style>
  10.     .box {
  11.         width: 100vw;
  12.         height: 100vh;
  13.         /* 背景颜色宽高将会占据窗口的100% */
  15.         width: 20vw;
  16.         height: 50vh;
  17.         /* 背景颜色宽占据窗口的20% */
  18.         /* 背景颜色高占据窗口的50% */
  20.         /* 背景颜色 */
  21.         background-color: red;
  22.     }
  23.   </style>
  24.   <body>
  26.     <div class="box"></div>
  28.   </body>
  29. </html>

总结

1.本次学习，让我了解到了CSS选择器的权重知识，以及在不知道CSS的样式写在哪的情况下该如何覆盖它上一个
2.了解到了盒模型的 宽高内外边距属性调整位置
3.CSS常用单位em、rem、自适应的知识。与手机端布局使用vw、vh其中之一

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