em,rem,vm,vh与实例演示 -

实例演示,em,rem,px的应用场景,并指出em,rem的区别与联系

em：子元素字体大小的em是相对于父元素字体大小。主要用在依赖字号的属性上，如外边距，内边距，长，宽等。
rem：rem是全部的长度都相对于根元素。用在font-size,设置字号
px:固定值，用在border。

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        :root{
            font-size:0.75em;
        }
        .panel{
            padding: 1em;
            border: 1px solid blueviolet;
            background-color: #ddffdd;
            margin: 2em;
        }
        .panel h2{
            font-size: 1.1rem;
            margin: 0.5em 0;
        }
        p{
            font-size: 1.1rem;
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <div class="panel">
        <h2>什么是php</h2>
        <div class="panel-body">
            <p>PHP即“超文本预处理器”，是一种通用开源脚本语言。PHP是在服务器端执行的脚本语言
            ，与C语言类似，是常用的网站编程语言。PHP独特的语法混合了C、Java、Perl以及 PHP 自创的语法
            。利于学习，使用广泛，主要适用于Web开发领域。
            </p>
        </div>
    </div>
</body>
</html>

(选作)使用vh,vw写一个三行单列的手机首页布局,色块即可不需要具体内容

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 100vw;
            height: 12vh;
            background-color: #445588;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="box">
        <p>头部区</p>
    </div>
    <div class="box">
        <p>内容区</p>
    </div>
    <div class="box">
        <p>尾部区</p>
    </div>
</body>
</html>