CSS布局单位详解，前端必备知识！

CSS中定义尺寸和位置时可以使用多种单位，每种单位都有自己的特点和适用范围。

1. 像素（px）

像素是CSS中最基本的单位，它表示屏幕上一个物理像素的大小。像素是不可分割的最小单位，因此可以使用它来精确控制元素的大小和位置。像素单位通常用于定义图像、图标和其他小元素的大小。

示例：

width: 100px;
height: 100px;

2. 磅（pt）

磅是另一个常用的CSS单位，它与像素类似，但磅是绝对单位，这意味着它的大小不会随着设备的不同而改变。磅通常用于定义文本的大小和行高。

示例：

font-size: 12pt;
line-height: 1.5pt;

3. 磅百分比（%）

磅百分比是基于磅的相对单位，它的大小会随着父元素的大小而改变。磅百分比通常用于定义文本的大小和行高。

示例：

font-size: 120%;
line-height: 150%;

4. 厘米（cm）

厘米是公制单位，它表示实际长度。厘米通常用于定义页面布局中的元素大小。

示例：

width: 10cm;
height: 10cm;

5. 毫米（mm）

毫米是公制单位，它表示实际长度。毫米通常用于定义页面布局中的元素大小。

示例：

width: 10mm;
height: 10mm;

6. 英寸（in）

英寸是英制单位，它表示实际长度。英寸通常用于定义页面布局中的元素大小。

示例：

width: 10in;
height: 10in;

7. 视口宽度（vw）

视口宽度是CSS3中新增的单位，它表示视口的宽度。视口宽度通常用于定义元素的宽度。

示例：

width: 100vw;

8. 视口高度（vh）

视口高度是CSS3中新增的单位，它表示视口的高度。视口高度通常用于定义元素的高度。

示例：

height: 100vh;

9. em

em是CSS中常用的相对单位，它的大小与父元素的字体大小相关。em通常用于定义文本的大小和行高。

示例：

font-size: 1.2em;
line-height: 1.5em;

10. rem

rem是CSS3中新增的相对单位，它的大小与根元素的字体大小相关。rem通常用于定义文本的大小和行高。

示例：

font-size: 1.2rem;
line-height: 1.5rem;

11. 百分比 (%)

百分比是CSS中常用的相对单位，它的大小与父元素的大小相关。百分比通常用于定义元素的大小、位置和边距。

示例：

width: 50%;
height: 50%;
margin: 10%;

12. 关键词

在CSS中，还可以使用关键词来定义元素的大小和位置。关键词通常用于定义元素的宽度、高度、边距和定位。

示例：

width: auto;
height: auto;
margin: 0;
position: absolute;

结论

CSS中的单位种类繁多，每种单位都有自己的特点和适用范围。在实际使用中，应根据不同的情况选择合适的单位。