Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > List of blog posts > 绝对单位px和相对单位：em,rem,vh,vw和布局演示
Blogger Information
Blog 56
fans 0
comment 4
visits 38083
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
绝对单位px和相对单位：em,rem,vh,vw和布局演示
异乡客
Original
551 people have browsed it


  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>常用单位</title>
  9. </head>
  11. <body>
  12.     <!-- <header>header</header>
  13.     <aside class="left">left</aside>
  14.     <main>main</main>
  15.     <aside class="right">right</aside>
  16.     <footer>footer</footer> -->
  18.     <header>header</header>
  19.     <aside class="left">left</aside>
  20.     <main>main</main>
  21.     <aside class="right">right</aside>
  22.     <footer>footer</footer>
  24.     <style>
  25.         /* * {
  26.             padding: 0;
  27.             margin: 0;
  28.             box-sizing: border-box;
  29.         } */
  31.         * {
  32.             padding: 0;
  33.             margin: 0;
  34.             box-sizing: border-box;
  35.         }
  36.         /* body {
  37.             display: grid;
  38.             grid-template-rows: 2em minmax(20em, 30em) 2em;
  39.             grid-template-columns: 6em 1fr 6em;
  41.         } */
  43.         body {
  44.             display: grid;
  45.             grid-template-columns: 6em 1fr 6em;
  46.             grid-template-rows: 2em minmax(20em, 30em) 2em;
  47.         }
  49.         header,
  50.         footer {
  51.             /* height: 2em; */
  52.             background-color: rgb(72, 255, 0);
  53.         }
  55.         aside {
  56.             background-color: coral;
  57.         }
  59.         main {
  60.             background-color: turquoise;
  61.         }
  63.         footer,
  64.         header {
  65.             grid-column: span 3;
  66.         }
  67.     </style>
  68. </body>
  70. </html>

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>常用单位</title>
  9. </head>
  11. <body>
  12.     <!-- px,em,rem,vh,vw -->
  13.     <!-- 相对单位：em,rem,vh,vw -->
  15.     <div class="box"></div>
  16.     <div class="box1"></div>
  17.     <div class="box2"></div>
  18. </body>
  20. </html>
  22. <style>
  23.     .box {
  24.         font-size: 20px;
  25.         width: 10em;
  26.         /* 1em=16px 永远和当前或父级的font-size进行绑定*/
  27.         /* em= font-size */
  28.         height: 15em;
  29.         border: 10px dashed currentColor;
  30.         background-color: hotpink;
  31.         background-clip: content-box;
  32.         padding: 20px;
  33.         /* padding: 内边距，看不见的，呼吸区; */
  34.         /* 当前盒子的总宽度：200+20*2+10*2=260px ，这种布局改变了原来想要的盒子大小，影响布局*/
  35.         /* 因此需要改变盒子大小的计算方式，使用户设置width,height就是盒子的实际大小，以方便计算 */
  36.         box-sizing: border-box;
  37.         margin: 5px;
  38.         /* 此时width,height就是最终的盒子大小，内容压缩了 */
  39.     }
  41.     .box1 {
  42.         font-size: 40px;
  43.         /* rem:永远和html中的font-size绑定 */
  44.         width: 10rem;
  45.         height: 15rem;
  46.         border: 10px dashed currentColor;
  47.         background-color: hotpink;
  48.         background-clip: content-box;
  49.         padding: 20px;
  50.         box-sizing: border-box;
  51.         margin: 5px;
  52.     }
  54.     .box2 {
  55.         font-size: 40px;
  56.         /* vw将视口宽度分为100分，1vm=1/100 */
  57.         /* vh将视口高度分为100分，1vm=1/100 */
  58.         width: 50vw;
  59.         height: 50vh;
  60.         border: 10px dashed currentColor;
  61.         background-color: hotpink;
  62.         background-clip: content-box;
  63.         padding: 20px;
  64.         box-sizing: border-box;
  65.         margin: 5px;
  66.     }
  68.     html {
  69.         font-size: 10px;
  70.     }
  71. </style>
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