实例演示em rem的区别和联系使用vh vw写一个三行单列的布局 -

em rem的区别与联系

区别:em是根据元素的父级，没有父级时根据当前元素的字体大小来确定的；

联系：em和rem都是通过像素px来计算值的大小的；

实例演示上代码！

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>em应用场景演示</title>
    <style>
      :root {
        font-size: 1em;
      }
      .box {
        /* 当前盒子字体大小根据是body继承的html（：root）的字体大小确定的 */
        background-color: aquamarine;
        /* 边框的大小一般用绝对值px来描述 */
        border: 1px solid #000;
        /* 2em代表的是2*16=32  也就是说margin的值是32xp */
        margin: 2em;
        /* 1.5em代表的是1.5*16=24px  也就是padding的值是24px */
        padding: 1.5em;
        width: 10em;
        background-clip: content-box;
      }
    </style>
  </head>
  <body>
    <div class="box">演示一下</div>
  </body>
</html>

效果图

再来一个！！

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>em应用场景演示</title>
    <style>
      :root {
        font-size: 1em;
      }
      body {
        /* 我现在把盒子的父级字体大小设定为20ox */
        font-size: 20px;
      }
      .box {
        /* 当前盒子字体大小继承的是body的字体大小 也就是20px */
        background-color: aquamarine;
        /* 边框的大小一般用绝对值px来描述 */
        border: 1px solid #000;
        /* 2em代表的是2*20=40  也就是说margin的值是40xp */
        margin: 2em;
        /* 1.5rem代表的是相对于根元素 而不是父级元素 1.5*16=24px  也就是padding的值依然是24px */
        padding: 1.5rem;
        width: 10em;
        /* 现在width的值应该是10*20=200px */
        background-clip: content-box;
      }
    </style>
  </head>
  <body>
    <div class="box">演示一下</div>
  </body>
</html>

效果图

总结： em,rem相对于font-size来定义em在padding、margin、border-radius、width、height中可以放心使用。

em:在设置字号的时候,font-size,在元素嵌套时一定要小心，rem可以在设置字号时使用，rem的大小时根据根元素的字体大小来计算的，不会出现由于父级元素层层叠加而出现的字体逐渐变大或逐渐变小的情况；

边框要用绝对值px，不要用em或者rem

使用vh vw写一个三行单列的布局

话不多说直接上代码:

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>演示vw vh</title>
    <style>
      .box {
        width: 100vw;
        height: 12vw;
        background-color: aquamarine;
        text-align: center;
        line-height: 9em;
      }
    </style>
  </head>
  <body>
    <div class="box">演示</div>
    <br />
    <div class="box">演示</div>
    <br />
    <div class="box">演示</div>
  </body>
</html>

效果图在这

总结：vw是视口初始包含块宽度的百分之一，vh是视口初始包含块高度的百分之一;vmin代表选择视口宽或高中较小的一个值;vmax代表选择视口宽或高中较大的一个值；

实例演示em rem的区别和联系 使用vh vw写一个三行单列的布局

em rem的区别与联系

使用vh vw写一个三行单列的布局

实例演示em rem的区别和联系使用vh vw写一个三行单列的布局