Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > List of blog posts > CSS入门记录之贰
Blogger Information
Blog 6
fans 0
comment 0
visits 2122
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入门记录之贰
小白客
Original
399 people have browsed it

CSS权重、盒子与常用单位基础学习

目录：

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

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

  • 原子: id,class,tag共三类
  • 权重: id->100,class->10, tag->1

ID相当于百位数、class相当于十位数、tag相当于个位数，数值越大权重越大，故id的权重最大，但是在实际应用中不建议使用id，因为他的权重太大，使用class的比较多。

实例截图


示例代码

  1.  h1{
  2.     color: red; /*最低权重 */
  3.     }
  5.   #content1{
  6.     color: black; /* ID同！important最大权重*/
  7.  }
  9.  .content{
  10.     color: white; /* 中等权重*/
  11.  }
  12.  h1 {
  13.     color: green ;
  14.  }
  16.  h1 {
  17.     color: blue !important; /*顶级权重*/
  18.  }

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

盒子的常用属性包含
宽：width、高：heidht、
内边距:padding、边框：border、
外边框：margin

边框宽度可以用四值、三值、二值、单值表示

实例截图

示例代码

  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.   <body>
  10.     <div class="box">box</div>
  11.     <style>
  12.       .box {
  13.         width: 150px; /*宽度*/
  14.         height: 100px;/*高度*/
  15.         border: solid 2px;/*边框*/
  16.         padding: 25px 10px 15px 20px;/*四值方式，从上方顺时针排序*/
  17.         /*三值方式为 25px 23px 28px 其中第一为上方宽度、第二为宽度、第三为下方高度*/
  18.         /*双值方式为 25px 36px 其中第一为上下宽度、第二位左右宽度*/
  19.         /*单值为 25px 表示上下左右四值相等，均为25px*/
  20.         /*无论是三值还是二值方式，第二组数值均为左右宽度
  21.         background-color: rgb(53, 34, 255);
  22.         background-clip: content-box;
  23.         box-sizing: content-box;
  24.         /* 通过收缩内容区大小来实现的 */
  25.         box-sizing: border-box;
  26.       }
  27.     </style>
  28.   </body>
  29. </html>

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

3.1em和rem

em、rem均为字号单位，16px等于1em/1rem

实例截图

示例代码

  1.     <div style="font-size: 1em">
  2.       <!-- font-size:可继承属性 -->
  3.       <div>Hello</div>
  4.       <div>World</div>
  5.     </div>

3.2 vm和vh

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>视口单位:vh/vw</title>
  8.   </head>
  9.   <body>
  11.     <header>header</header>
  12.     <main>main</main>
  13.     <footer>footer</footer>
  15.     <style>
  16.       * {
  17.         margin: 0;
  18.         padding: 0;
  19.         box-sizing: border-box;
  20.       }
  22.       body > * {
  23.         outline: 1px solid;
  24.         background-color: lightblue;
  25.       }
  27.       header,
  28.       footer {
  29.         width: 100vw;
  30.         height: 5vh;
  31.       }
  33.       main {
  34.         background-color: violet;
  35.         width: 100vw;
  36.         margin: 1vh 0;
  37.         min-height: 100vh;
  38.         /* 要减去页眉页脚的5vh */
  39.         min-height: calc(100vh - 5vh - 5vh);
  40.         /* 再减去上下1vh margin  */
  41.         /* calc() 运算符二边要加空格, "/, * 可以不加, +,-要加 " */
  42.         min-height: calc(100vh - 5vh - 5vh - 1vh - 1vh);
  43.       }
  44.     </style>
  45.   </body>
  46. </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