首页 > 代码库 > css的字体单位

css的字体单位

2024-09-01 11:02:11   215人阅读

　　今天我们来讲一下css中最常用到的三种字体单位：px,em和rem。px是相对长度单位，它的大小是相对屏幕分辨率来说的，em和rem就不一样了，简而言之，就是它们的字体大小是由参照物来决定的。对于em,它的参照物呢，就是父级的字体，也就是说，它的大小始终是根据父级的字体大小来调整的，而rem是CSS3新增的一个相对单位，这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。

　　下面我们通过一个例子来对比一下三种单位的区别：

<!DOCTYPE html>
<html>
<head>
    <meta charset = "utf-8"/>
    <title>相对与绝对字体</title>
</head>
<style type="text/css">
    .div1{
        font-size: 18px;
    }
    .div2{
        font-size:1.5em;
    }
    .div3{
        font-size:2rem;
    }
</style>
<body>
    <div class="div1">
        <span>相对与绝对</span>
        <div class="div2">
            <span>相对</span>
            <div class="div3">
                <span>绝对</span>
            </div>
        </div>
    </div>
</body>
</html>

运行结果如下：

技术分享

三行字体的大小情况如下图：

技术分享

技术分享

技术分享

下面我们来分析一下为什么会是这种情况，第一行的文字大小就是显而易见的了，因为我们设置的字体大小就是18px，第二文字的字体大小我们设置的是1.5em,1.5em为什么会是27px呢？上文我们有提到em是一个相对字体单位，它的大小是由父级的字体大小来决定的，它的父级此时指的就是就是我们的第一行文字，第一行文字的大小是18px,那么1.5em就是1.5*18也就是27px;那么第三行文字的32px又是怎么来的呢？rem也是一个相对字体单位，它的字体大小是相对于html根元素的字体大小来改变的。这里呢有一个小常识，就是浏览器的默认字体是16px,那么，2em也就是32px咯

　　　

 

css的字体单位


联系
我们