1.line-height

1.给line-height:200% line-height*font-size
2.line-height:2; //特殊 div的行高 line-height*div(font-size)

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <style>
  9.     /*
  10.     1.给line-height:200%   line-height*font-size
  11.     2.line-height:2;   //特殊 div的行高 line-height*div(font-size)
  12.     */
  13.     *{margin:0;padding:0;}
  14.     body{
  15.         font-size: 20px;
  16.         line-height: 3;
  17.     }
  18.     div{
  19.         font-size: 18px;
  20.     }
  21. </style>
  22. <body>
  23.     <div>
  24.         hello world
  25.     </div>
  26. </body>
  27. </html>

2.em,rem,vw,vh

px 绝对单位
em 相对单位 相对于父元素的font-size(了解)
rem (root em) 相对于根元素(html)的font-size而言

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /*
    px 绝对单位
    em 相对单位 相对于父元素的font-size(了解)
    rem (root em) 相对于根元素(html)的font-size而言
    */
    *{margin:0;padding:0;}
    html{
        font-size: 10px;
    }
    .parent{
        width:200px;
        height: 200px;
        background-color: red;
        font-size: 20px;
    }
    .child{
        width:2em;
        height:2em;
        background-color: yellow;
    }
    .rem{
        width:10rem;
        height: 10rem;
        background-color: blue;
    }
</style>
<body>
    <div class="parent">
     <div class="child"></div>
    </div>
    <div class="rem"></div>
</body>
</html>

3.vw.vh

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{margin:0;padding: 0;}
    .parent{
        width:50vw;
        height:50vh;
        background-color: red;
    }
</style>
<body>
    <div class="parent"></div>
</body>
</html>

1.PNG

4.vw布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{margin:0;padding: 0;}
    div{
        box-sizing: border-box;
    }
    .parent{
        display: grid;
        grid-template-columns: repeat(5,20vw);
        grid-template-rows: repeat(2,20vw);
    }
    .parent div{
        border: 1px solid #333;
    }
</style>
<body>
    <div class="parent">
        <div></div>
    </div>
</body>
</html>

1.PNG