一、像素（Pixel）
像素是最常见的CSS高度和宽度单位之一，也是最基础的单位之一。像素是屏幕上最小的物理点，通常用来描述屏幕上的图像的分辨率。在CSS中，像素被用来精确地设置元素的大小。
.box {
width: 200px; /* 使用像素设置元素的宽度为200个像素 */
height: 100px; /* 使用像素设置元素的高度为100个像素 */
}
使用像素设置元素的大小可以精确地控制元素的大小，但是需要注意的是，使用像素设置元素大小可以导致在高分辨率的屏幕上显示得太小，同时在低分辨率的屏幕上显示得太大。
二、百分比（Percentage）
百分比是另一个常见的CSS高度和宽度单位。当使用百分比设置元素的大小时，元素的大小相对于其包含块（父元素）的大小来计算。因此，百分比在响应式设计时非常有用。
.parent {
width: 500px;
height: 200px;
}
.child {
width: 50%; /* 子元素的宽度是父元素宽度的一半 */
height: 50%; /* 子元素的高度是父元素高度的一半 */
}
使用百分比设置元素大小可以使元素在不同的屏幕大小下自适应，并且可以充分利用父元素的大小，不会造成浪费。但是需要注意的是，百分比计算可能会受到盒模型和padding、border、margin等因素的影响，需要根据具体情况进行处理。
三、视区单位（Viewport Units）
视区单位是相对于浏览器视口大小的CSS单位。视口坐标如下图所示：
+---------> X axis
|
|
|
V
Y axis
其中X轴和Y轴的起点都是浏览器窗口的左上角，可以使用vw和vh表示相对于视口的宽度和高度。此外，还可以使用vmax和vmin分别表示同一维度的最大和最小值，例如手机浏览器竖屏使用vmin，横屏使用vmax。
.box {
width: 50vw; /* 元素宽度为视口宽度的50% */
height: 50vh; /* 元素高度为视口高度的50% */
}
视区单位可以使元素在不同的屏幕大小下自适应，并且能够直接使用视口大小进行计算，非常方便。但是需要注意的是，视口大小不包括浏览器工具栏和滚动条，需要根据具体情况进行调整。
四、EM和REM
EM和REM是相对单位，它们的值不是固定的，而是相对于父元素或根元素的字体大小进行计算。其中，EM是相对于父元素的字体大小进行计算的，而REM是相对于根元素（通常是HTML元素）的字体大小进行计算的。
.parent {
font-size: 18px;
}
.child {
width: 20em; /* 元素宽度为父元素字体大小的20倍 */
height: 10em; /* 元素高度为父元素字体大小的10倍 */
}
EM和REM可以使元素的大小根据字体大小而发生变化，非常适合需要根据用户设置的字体大小进行调整的设计。但是需要注意的是，使用EM和REM进行设置大小需要考虑到父元素和根元素的字体大小，需要进行相应的计算。
五、自适应单位（Flexible Units）
自适应单位是指不固定单位，它们的值根据不同的屏幕大小和分辨率进行自适应调整。常见的自适应单位包括：
- em，设置字体大小为相对单位，同时也可用于宽、高、边框和 margin、padding 间距等
- rem，与em类似，不过是相对root html字体大小
- vm, vh ，设置元素高度和宽度为视口单位
- Ch，根据0的width得到
- ex，相当于小写字母x的高度
- vw，宽度是相对于视口，即浏览器可视区域的宽度的1/100
- vh，高度是相对于视口的高度的1/100
- vmin,宽度和高度是相对于vw和vh两者中较小的那个。
- vmax,宽度和高度是相对于vw和vh两者中较大的那个
- Rem在层级结构中只相对于根元素，所以可以被认为是唯一的相对宽度测量单位
- Em作为相对单位，为s、px等固定宽度单位设计了伸缩性，可用于各种宽度定义
总结
在CSS中，常用的高度和宽度单位包括像素、百分比、视区单位、EM和REM以及自适应单位。根据具体情况来可视情况选择适当的单位。同时，较多的开发人员同时混杂使用百分比和像素值，以便更好的熟悉它们之间的差异并减少错误的发生。因此，正确地选择CSS高度和宽度单位显得尤为重要，它不仅可以在不同的屏幕大小下保持元素的正确比例，而且还可以使设计的页面自适应，并且能够适应不同的屏幕大小。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/276066.html
微信扫一扫 
支付宝扫一扫 