search

博客列表 >1. 实例演示css选择器权重的计算方式 2. 实例演示盒模型常用属性与盒大小计算方式 3. 实例演示css常用单位(em,rem,vw/vh)

1. 实例演示css选择器权重的计算方式 2. 实例演示盒模型常用属性与盒大小计算方式 3. 实例演示css常用单位(em,rem,vw/vh)

P粉753609736
P粉753609736原创
2023年02月12日 18:34:34264浏览

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>
上一条：flex容器的项目属性下一条：CSS选择器权重
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多