属性值简写与相对单位 -

实例演示盒模型属性简写的规则

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 10em;
            height: 10em;
            padding: 1em 2em 1em 2em;
            border: 5px solid black;
            background: content-box royalblue;
            margin: 2em 5em 5em 2em;
        }
    </style>
</head>
<body>
    <div class="box">
        <p>内容文本</p>
    </div>
</body>
</html>

实例演示em与rem应用的场景,并分析区别与联系

em：子元素字体大小的em是相对于父元素字体大小。
rem：rem是全部的长度都相对于根元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        :root{
            font-size: 2em;
        }
        h1{
            font-size: 0.8rem;
        }
        p{
            font-size: 0.6rem;
        }
    </style>
</head>
<body>
    <h1>标题</h1>
    <p>内容文本</p>
</body>
</html>