1. <!DOCTYPE html>
  2. <html lang="en">
  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>
  11.     <!-- <div class="box"> -->
  12.     <div class="box1">
  14.     </div>
  16.     <style>
  17.         .box {
  18.             /* em绑定当年或父级的font-size */
  19.             /* width: 160px; */
  20.             font-size: 10px;
  21.             width: 10em;
  22.             height: 150px;
  23.             border: 3px solid red;
  24.             box-sizing: border-box;
  26.         }
  28.         .box2{
  29.             /* rem永远和html中的fontsize绑定 */
  30.             font-size: 10px;
  31.             width: 10rem;
  32.             height: 150px;
  33.             border: 3px solid red;
  34.             box-sizing: border-box;
  36.         }
  38.         .box1{
  39.             /* vh,vm */
  40.             /* vm可视窗口宽度的1%， vh可视窗口的高度的1% */
  41.             width: 50vw;
  42.             height: 30vh;
  43.             background-color: red;
  46.         }
  51.     </style>
  54. </body>
  55. </html>