一、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); /* 用数学公式计算宽度 */
}
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/150387.html
微信扫一扫 
支付宝扫一扫 