CSS中的长度单位

2021-07-23 21:33:38 阅读：167 来源： 互联网

CSS中常用的长度单位有px(像素)，em，%(百分比)。

px

像素：指的是显示器上的小点，CSS规范中假设90像素=1英寸。实际浏览器会使用显示器的实际像素值，网页设计中像素使用的比较频繁。

em

em就是font-size的值，假如font-size=14px，那么1em=14px，假如font-size=18px，那么1em=18px。

p {
    font-size: 16px;
    text-indent: 2em;
}

如上代码就是p元素的内容缩进两个字体大小的距离，即32px。
注：如果一个元素的font-size单位设置为em，此时计算标准以该元素的父元素的font-size为基础。示例如下：
HTML代码

<body>
    <p>这是一个<span>示例</span></p>
</body>

CSS代码

<style type="text/css">
    p {font-size: 16px;}
    span {font-size: 0.6em;}
</style>

效果如下：

效果中的文字示例的字体大小计算为：16*0.6=9.6px

%

<style type="text/css">
    p {
        font-size: 16px;
        line-height: 120%;
    }
</style>

如上代码中line-height的值得计算为：16*1.2=19.2px
另外

      font-size是可以继承的。即假如改变一个元素的字体大小，可能会导致其子元素字体大小成比例变化。假如把body元素的font-size设置为200%，那么页面中所有元素的文本都会增大一倍。
      出现这种效果，是因为浏览器样式表在设置所有元素的字体大小时，使用的都是相对单位em，例如：h1是2em，h2是1.5em。默认情况下，1em=16px，h1就是32px，h2就是24px。
      此时如果把body的字体大小设置为20px，就重新设置了基准大小，h1就是40px，h2就是30px，但是那些以像素为单位设置字体大小的元素，不会继承body的字体大小，这些元素会按照自身设置的大小显示。

标签：em,字体大小,元素,像素,单位,长度,font,CSS,size
来源： https://www.cnblogs.com/dyfblogs/p/15053869.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

CSS中的长度单位

px

em

%