CSS测量单位列表

一、em和rem

em是相对单位，相对于元素的字体大小。它可以用来设置元素的宽度、高度、内边距和外边距。它的计算方式是与父元素的字体大小相关联的，在一定程度上提供了更好的可预测性。然而，当多层嵌套时，其中的em可能变得复杂难以管理。

    
        .parent {
            font-size: 16px;
        }
        .child {
            font-size: 1.2em; /* 相对于父元素16px来计算 */
            width: 10em; /* 相对于自己的字体大小来计算 */
        }
    

rem是相对单位，相对于根元素的字体大小。它的计算方式类似于em，但其基准是根元素的字体大小，保持不变，使其更为可靠。使用rem随着浏览器的缩放，元素的大小会随之调整。

    
        html {
            font-size: 16px; /* 基础字体大小 */
        }
        .child {
            font-size: 1.2rem; /* 相对于根元素，即16px*1.2 */
            width: 10rem; /* 相对于根元素，即16px*10 */
        }
    

二、px

px是绝对单位，它是一个基于物理像素的单位，使得元素可以按具体像素来设置，在不同的设备上显示效果一致。但是，由于像素的大小是相对的，可能在高分屏上显示不够清晰。

    
        .child {
            font-size: 16px;
            width: 200px; /* 直接设置像素值 */
            height: 100px;
        }
    

三、vw和vh

vw和vh是相对单位，相对于视口宽度和高度的百分比。它们提供了在响应式Web设计中调整元素大小的可靠方法。

    
        .child {
            font-size: 16px;
            width: 50vw; /* 相对于视口宽度50% */
            height: 25vh; /* 相对于视口高度25% */
        }
    

四、%和calc()

%相对于父元素的宽度或高度计算，可以用于设置元素的大小，边距和位置。calc()允许在数学表达式中使用各种单位来计算元素的大小和位置。

    
        .parent {
            width: 500px;
            height: 300px;
            margin: 10%; /* 相对于父元素的宽度、高度的10% */
        }
        .child {
            width: calc(50vw - 200px); /* 用数学公式计算宽度 */
        }