Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 1. 实例演示css选择器权重的计算方式 2. 实例演示盒模型常用属性与盒大小计算方式 3. 实例演示css常用单位(em,rem,vw/vh)
Blogger Information
Blog 10
fans 0
comment 1
visits 3175
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
1. 实例演示css选择器权重的计算方式 2. 实例演示盒模型常用属性与盒大小计算方式 3. 实例演示css常用单位(em,rem,vw/vh)
P粉753609736
Original
268 people have browsed it

1. 实例演示css选择器权重的计算方式

css权重计算方式 id class tag

id#权重最高 1.0.0
class.是主流 0.1.0
tag标签用来增加权重 0.0.1

实例演示

  1. <h2 class="title" id="header">hello</h2>
权重0.0.1，一个tag标签
  1. h2 {
  2. color:red;
  3. }
同样权重0.0.1 顺序决定
  1. h2 {
  2. color:red;
  3. }
权重0.0.2 两个tag标签 权重高低决定顺序
  1. body h2 {
  2. color:red;
  3. }
权重0.1.0 一个class 权重高低决定顺序
  1. .title {
  2. color:red;
  3. }
权重 一个id1.0.0 权重高低决定顺序
  1. #header {
  2. color:red;
  3. }

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

盒模型的常用属性

五大属性
  1. width
  2. height
  3. padding
  4. loorder
  5. margin
border属性,可见属性

可设置width style color

pading,matgin属性，不可见属性

可设置width
大多数内置元素都有默认的padding margin

盒大小

  1. <body>
  2.     <div class="box">hello</div>
  3.     <style>
  4.         body {
  5.             outline: 1px solid black; 
  6.         }
  7.         .box { 
  8.             width: 200px;
  9.             height: 100px;
  10.             border: 1px solid black;
  11.             padding:5px;
  12.             background-color: blueviolet;
  13.             background-clip: content-box;
  14.         }  
  15.     </style>
  16. </body>

盒大小计算方式

盒子大小212*112 源码大小200*100

标准计算：200px+10px+2px=212 *100px+10px+2px=112px

3. 实例演示css常用单位(em,rem,vw/vh)

实例演示(em,rem)

  1.  <div style="font-size: 1.25em;">
  2.         <div style="font-size: 2em">hello</div>
  3.     </div>
  1. <body>
  2.     <div style="font-size: 1.25rem;">
  3.         <div style="font-size: 2rem">hello</div>
  4.     </div>
  5. </body>
  6. </html>
  7. <style>
  8.     html {
  9.         font-size: 1rem;
  10.     }
  11. </style>

实例演示(vw/vh)

  1. <body>
  2.     <header>header</header>
  3.     <main>main</main>
  4.     <footer>footer</footer>
  5. </body>
  7. <style>
  8.     * {
  9.         margin: 0;
  10.         padding: 0;
  11.         box-sizing: border-box;
  12.     }
  14.     body > * {
  15.         outline:1px solid;
  16.         background-color:antiquewhite
  17.     }
  19.     header,
  20.     footer {
  21.         width: 100vw;
  22.         height: 5vh;
  23.         background-color:yellow;
  24.     }
  26.     main {
  27.         width: 100vw;
  28.         min-height:100vh;
  29.         margin: 0.5vh 0;
  30.         min-height: calc(100vh - 11vh);
  31.     }
  32. </style>
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