px、em、rem区别和联系PX是具体的尺寸单位，类似于平时用到的米，厘米一样em是相对于它的父级元素，font-siz

PX 是具体的尺寸单位，类似于平时用到的米，厘米一样
em 是相对于它的父级元素，font-size的倍数

rem 是相对于根元素，即HTML中 font-size的倍数

<style>
        html {font-size: 100px;}
        div {font-size: 20px;}
        p {font-size: 2em; /* 此时font-size的大小是相对于 p 的父级元素来说的，font-size:40px */
        }
        p {font-size: 2rem; /* 此时font-size的大小是相对于 根元素html来说的，font-size:20px */
        }
    </style>
</head>
<body>
    <div>
        <p>Hello World!</p>
    </div>
</body>