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>
  10.     <header>header</header>
  11.     <aside calss="letf">left</aside>
  12.     <main>main</main>
  13.     <aside calss="right">right</aside>
  14.     <footer>footer</footer>    
  15. <style>
  16.     *{
  17.         padding: 0;
  18.         margin: 0;
  19.         box-sizing: border-box;
  20.     }
  22.     body {
  23.         display: grid;
  24.         grid-template-rows: 2em minmax(20em,30em) 2em;
  25.         grid-template-columns: 6em 1fr 6em;
  26.     }
  28.     header,footer{
  29.         background-color: yellow;
  30.         grid-column: span 3;
  31.     }
  33.     main{
  34.         background-color: cyan;
  35.     }
  37.     aside {
  38.         background-color: lightblue;
  39.     }    
  41.     main{
  42.         background-color: green;
  43.     }
  46.     /* rem+vw进行布局，移动端不运行出现px,有px to rem的插件 */
  47. </style>
  48. </body>
  49. </html>