• 彻底搞懂css中的单位px、em、rem


    css单位

    px单位

    px代表着绝对尺寸,不会因其他元素的尺寸变化而变化,利用排序设置的字体集元素宽高比较稳定和精准,但是不能随着浏览器的缩放而变化,所以不适用于响应式网站

    em单位

    em和rem都是灵活的可扩展的单位,由浏览器转化为像素值,具体取决于设计图中的大小。

    很多人认为em单位是相对于父元素的字体的大小,但是根据w3标准,他是相对于使用em档位的元素的字体的大小,也就是使用em单位的元素的本身。父元素的字体大小可以影响em值,是因为继承。

    <style>
        #wrap{
          font-size: 20px;
        }
        .content{
          font-size: 14px;
          padding: 1.5em;
        }
      </style>
      <body>
        <div id="wrap">
          <div class="content">
          </div>
        </div>
      </body>
    

    image-20200829172310548

    可以看到padding值是21 而不是父元素的字体大小20*1.5

    rem单位

    当使用rem单位的时候,他们转化为像素的大小取决与页面根元素也就是html的字体大小,根元素的字体大小乘以rem值

  • 相关阅读:
    repo
    manifest
    Gerrit使用简介
    id_rsa id_rsa.pub
    数字签名原理及其应用
    RSA DSA
    ssh(安全协议外壳)
    Numpy基本数据结构
    Numpy
    .bat 批处理
  • 原文地址:https://www.cnblogs.com/my466879168/p/13601229.html
Copyright © 2020-2023  润新知