em rem 的区别

最新推荐文章于 2023-02-01 15:04:45 发布

爱生活，爱编程

最新推荐文章于 2023-02-01 15:04:45 发布

阅读量153

点赞数

分类专栏： html + css

本文链接：https://blog.csdn.net/qq_15009739/article/details/108768841

版权

html + css 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

这个很简单，

rem root em 这个是相对于html 元素中字体大小设定的

html{ font-size: 12px} 那么此时10rem == 10 * 12 = 120px

em 相对于父元素字体大小设定的，当然假如自身有 font-size属性，则相对于自身设定

举个列子：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        div {
            font-size: 20px;
        }

        p {
            width: 10em;
            height: 10em;
            /* font-size: 14px; */
            background: #CCC;

        }
    </style>


</head>

<body>
    <div>
        <p>java</p>
    </div>
</body>

</html>

此时 p 元素的宽高为 10 * 20 = 200 200 * 200的盒子

将16 行的 font-size:14px 打开注释，则p 元素盒子大小为; 140 * 140 px的盒子！