https://blog.csdn.net/qq_40001322/article/details/80867289

1.em

在做手机端的时候经常会用到的做字体的尺寸单位

说白了 em就相当于“倍”，比如设置当前的div的字体大小为1.5em，则当前的div的字体大小为：当前div继承的字体大小*1.5

但是当div进行嵌套的时候，em始终是按照当前div继承的字体大小来缩放，参照后面的例子。

2.rem

这里的r就是root的意思，意思是相对于根节点来进行缩放，当有嵌套关系的时候，嵌套关系的元素的字体大小始终按照根节点的字体大小进行缩放。

参照后面给的demo

3.vh

vh就是当前屏幕可见高度的1%，也就是说

height:100vh == height:100%;

但是有个好处是当元素没有内容时候，设置height:100%该元素不会被撑开，

但是设置height:100vh，该元素会被撑开屏幕高度一致。

4.vw

vw就是当前屏幕宽度的1%

补充一句，当设置width:100%，被设置元素的宽度是按照父元素的宽度来设置，

但是100vw是相对于屏幕可见宽度来设置的，所以会出现50vw 比50%大的情况

  1. <!DOCTYPE html>
  2.  
    <html lang="Zh-cn">
  3.  
    <head>
  4.  
    <meta charset="UTF-8">
  5.  
    <title>恭贺新春</title>
  6.  
    </head>
  7.  
    <style type="text/css" media="screen">
  8.  
    html{
  9.  
    font-size: 14px;
  10.  
    }
  11.  
    .em,
  12.  
    .em > .em-son,
  13.  
    .em > .em-son > .em-grandson {
  14.  
    font-size: 1.2em;
  15.  
    }
  16.  
    .rem,
  17.  
    .rem > .rem-son,
  18.  
    .rem > .rem-son > .rem-grandson {
  19.  
    font-size: 1.2rem;
  20.  
    }
  21.  
    .rem-box {
  22.  
    background: #d60b3b;
  23.  
    width:10rem;
  24.  
    height: 10rem;
  25.  
    color: #fff;
  26.  
    text-align: center;
  27.  
    line-height:5rem;
  28.  
    }
  29.  
    .vhvw-box {
  30.  
    background: #d60b3b;
  31.  
    width:50vw;
  32.  
    height: 50vh;
  33.  
    color: #fff;
  34.  
    text-align: center;
  35.  
    line-height:25vh;
  36.  
    }
  37.  
    </style>
  38.  
    <body>
  39.  
    <h1>em 继承父元素的字体大小，来变大或变小，多层嵌套字体变化</h1>
  40.  
    <div class="em">
  41.  
    字体大小 1.2 * 14（父元素body） = 16px
  42.  
    <div class="em-son">
  43.  
    字体大小 1.2 * 16(父元素em) = 20px
  44.  
    <div class="em-grandson">
  45.  
    字体大小 1.2 * 20(父元素em-son) = 24px
  46.  
    </div>
  47.  
    </div>
  48.  
    </div>
  49.  
    <br>
  50.  
    <h1>rem 继承根节点元素的字体大小，来变大或变小，多层嵌套字体不变化</h1>
  51.  
    <div class="rem">
  52.  
    字体大小 1.2 * 14（根节点html） = 16px
  53.  
    <div class="rem-son">
  54.  
    字体大小 1.2 * 14（根节点html） = 16px
  55.  
    <div class="rem-grandson">
  56.  
    字体大小 1.2 * 14（根节点html） = 16px
  57.  
    </div>
  58.  
    </div>
  59.  
    </div>
  60.  
    <br>
  61.  
    <h1>rem 也可作为固定长度单位设置宽高等</h1>
  62.  
    <div class="rem-box">
  63.  
    宽：14 * 10 = 140px<br>
  64.  
    高：14 * 10 = 140px
  65.  
    </div>
  66.  
    <br>
  67.  
    <h1>vh,vw 屏幕可见区域的高度，宽度的1%</h1>
  68.  
    <div class="vhvw-box">
  69.  
    宽：屏幕宽度的50%<br>
  70.  
    高：屏幕高度的50%
  71.  
    </div>
  72.  
    </body>
  73.  
    </html>
    1. <!DOCTYPE html>
    2.  
      <html lang="Zh-cn">
    3.  
      <head>
    4.  
      <meta charset="UTF-8">
    5.  
      <title>恭贺新春</title>
    6.  
      </head>
    7.  
      <style type="text/css" media="screen">
    8.  
      html{
    9.  
      font-size: 14px;
    10.  
      }
    11.  
      .em,
    12.  
      .em > .em-son,
    13.  
      .em > .em-son > .em-grandson {
    14.  
      font-size: 1.2em;
    15.  
      }
    16.  
      .rem,
    17.  
      .rem > .rem-son,
    18.  
      .rem > .rem-son > .rem-grandson {
    19.  
      font-size: 1.2rem;
    20.  
      }
    21.  
      .rem-box {
    22.  
      background: #d60b3b;
    23.  
      width:10rem;
    24.  
      height: 10rem;
    25.  
      color: #fff;
    26.  
      text-align: center;
    27.  
      line-height:5rem;
    28.  
      }
    29.  
      .vhvw-box {
    30.  
      background: #d60b3b;
    31.  
      width:50vw;
    32.  
      height: 50vh;
    33.  
      color: #fff;
    34.  
      text-align: center;
    35.  
      line-height:25vh;
    36.  
      }
    37.  
      </style>
    38.  
      <body>
    39.  
      <h1>em 继承父元素的字体大小，来变大或变小，多层嵌套字体变化</h1>
    40.  
      <div class="em">
    41.  
      字体大小 1.2 * 14（父元素body） = 16px
    42.  
      <div class="em-son">
    43.  
      字体大小 1.2 * 16(父元素em) = 20px
    44.  
      <div class="em-grandson">
    45.  
      字体大小 1.2 * 20(父元素em-son) = 24px
    46.  
      </div>
    47.  
      </div>
    48.  
      </div>
    49.  
      <br>
    50.  
      <h1>rem 继承根节点元素的字体大小，来变大或变小，多层嵌套字体不变化</h1>
    51.  
      <div class="rem">
    52.  
      字体大小 1.2 * 14（根节点html） = 16px
    53.  
      <div class="rem-son">
    54.  
      字体大小 1.2 * 14（根节点html） = 16px
    55.  
      <div class="rem-grandson">
    56.  
      字体大小 1.2 * 14（根节点html） = 16px
    57.  
      </div>
    58.  
      </div>
    59.  
      </div>
    60.  
      <br>
    61.  
      <h1>rem 也可作为固定长度单位设置宽高等</h1>
    62.  
      <div class="rem-box">
    63.  
      宽：14 * 10 = 140px<br>
    64.  
      高：14 * 10 = 140px
    65.  
      </div>
    66.  
      <br>
    67.  
      <h1>vh,vw 屏幕可见区域的高度，宽度的1%</h1>
    68.  
      <div class="vhvw-box">
    69.  
      宽：屏幕宽度的50%<br>
    70.  
      高：屏幕高度的50%
    71.  
      </div>
    72.  
      </body>
    73.  
      </html>

一些css单位的更多相关文章

  1. 你可能没注意的CSS单位

    扶今追昔 CSS中的单位我们经常用到px.pt.em.百分比,px和pt不用多说 em em是相对单位,参考物是父元素的font-size,具有继承的特点 如果字体大小是16px(浏览器的默认值),那 ...

  2. css单位盘点

    css单位有:px,em,rem,vh,vw,vmin,vmax,ex,ch 等等 1.px单位最常见,也最直接,这里不做介绍. 2.em:em的值并不是固定,它继承父级元素的字体大小,所以层数越深字 ...

  3. 你可能不知道的7个CSS单位

    如果你是一名前端开发工程师,一般px和em使用频率比较高.但是今天本文的重点是介绍一些我们使用很少.甚至么有听说的单位. 一.重温em <style type="text/css&qu ...

  4. 学习网页制作中如何在正确选取和使用 CSS 单位

    在 CSS 测量系统中,有好几种单位,如像素.百分比.英寸.厘米等等,Web 开发人员很难了解哪些单位在何处使用,如何使用.很多人习惯了总是使用同一种单位,但这一决定可能会严重限制你的设计的执行. 这 ...

  5. 七个你可能不了解的CSS单位

    我们很容易无法摆脱的使用我们所熟悉的CSS技术,当新的问题出现,这样会使我们处于不利的地位. 随着Web继续的发展,对新的解决方案的需求也会继续增大.因此,作为网页设计师和前端开发人员,我们别无选择, ...

  6. css单位分析、颜色设置与调色板

    CSS单位分析 px:单位代表像素,1px代表一个像素点. %:设置子元素为父容器的占比. em:代表该元素中一个字体所占字符,常用在文字首行缩进.其具有继承性. rem:始终代表html中的字符所在 ...

  7. CSS：CSS 单位

    ylbtech-CSS:CSS 单位 1.返回顶部 1. 尺寸 单位 描述 % 百分比 in 英寸 cm 厘米 mm 毫米 em 1em 等于当前的字体尺寸. 2em 等于当前字体尺寸的两倍. 例如, ...

  8. rem — 一个低调的css单位

    原文  http://www.zhaoan.org/1825.html rem这是个低调的 css 单位,近一两年开始崭露头角,有许多同学对rem的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃 ...

  9. css单位中px和em,rem的区别

    css单位中分为相对长度单位.绝对长度单位. 今天我们主要讲解rem.em.px这些常用单位的区别和用法. px(绝对长度单位) 相信对于前端来说px这个单位是大家并不陌生,px这个单位,兼容性可以说 ...

  10. CSS单位计算总结

    CSS单位总结 公共部分css body { background-color: #000; color: skyblue; margin: 0; padding: 0; } body>div& ...

随机推荐

  1. 34. ClustrixDB 降低集群的容量-Flex down

    有时,可能需要减少集群的容量: 减少高峰事件后的运营成本 为其他目的分配服务器. 删除故障硬件.(参见删除ALTER CLUSTER以删除永久失败的节点.) 在ClustrixDB中缩小集群的过程很简 ...

  2. 使用kombu的producer pool 向rabbitmq瞬间发送大量消息

    kombu比pika感觉考虑得全面多了,不知道为什么用的人好像少? 生产端是 python-socket.io 的client   接受socketio 消息后, 发到rabbitmq 按时序进行处理 ...

  3. 51 Nod1042 数字0到9的数量

    1042 数字0-9的数量  基准时间限制:1 秒 空间限制:131072 KB 分值: 10 难度:2级算法题  收藏  关注 给出一段区间a-b,统计这个区间内0-9出现的次数. 比如 10-19 ...

  4. codeforces297B

    Fish Weight CodeForces - 297B It is known that there are k fish species in the polar ocean, numbered ...

  5. flask 第六篇 flask内置的session

    Flask中的Session非常的奇怪,他会将你的SessionID存放在客户端的Cookie中,使用起来也非常的奇怪 1. Flask 中 session 是需要 secret_key 的 from ...

  6. TCP输入 之 tcp_v4_rcv

    tcp_v4_rcv函数为TCP的总入口,数据包从IP层传递上来,进入该函数:其协议操作函数结构如下所示,其中handler即为IP层向TCP传递数据包的回调函数,设置为tcp_v4_rcv: sta ...

  7. pandas.DataFrame 中的insert(), pop()

    pandas.DataFrame 中的insert(), pop() 在pandas中,del.drop和pop方法都可以用来删除数据,insert可以在指定位置插入数据. 可以看看以下示例. imp ...

  8. 【React自制全家桶】三、React使用ref操作DOM与setState遇到的问题

    在React中同时使用ref操作DOM与setState常常会遇到 比如操作的DOM是setState更新之前的DOM内容,与想要的操作不一致.导致这样的原因是setState函数是异步函数. 就是当 ...

  9. C# lock 为什么要设置成只读

    首先给出MSDN的定义: lock 关键字可以用来确保代码块完成运行,而不会被其他线程中断.这是通过在代码块运行期间为给定对象获取互斥锁来实现的. 先来看看执行过程,代码示例如下: 假设线程A先执行, ...

  10. 前端Ajax跨域解决方案

    业务场景: 前后端分离需要对接数据接口. 接口测试是在postman做的,今天才开始和前端对接,由于这是我第一次做后端接口开发(第一次嘛,问题比较多)所以在此记录分享我的踩坑之旅,以便能更好的理解,应 ...