【前段基础入门之】=＞CSS中的常用长度单位-CSDN博客

本文链接：https://blog.csdn.net/qq_60961397/article/details/132486971

在这里插入图片描述
导语

在CSS中，存在于大量的长度布局单位换算，而不同的长度，也会导致页面结构呈现出不同的效果，本章节就梳理了在CSS中，目前常用的多种长度单位，供大家参考学习

在这里插入图片描述

绝对长度单位

当输出介质的物理性质已知时，如用于打印布局，绝对长度单位代表一个物理度量单位。

单位	描述
`px`	一像素（pixel）。对于普通的屏幕，通常是一个`设备像素（点）`。对于打印机和高分辨率屏幕，一个 CSS 像素往往占多个设备像素
`cm`	一厘米。 `1cm = 96px / 2.54`
`mm`	*一毫米。 `1mm = 1/10 1cm`**
`Q`	*四分之一毫米 `1Q = 1/40 1cm`**
`in`	一英寸。`1in = 2.54cm = 96px`
`pc`	*一十二点活字（pica），六分之一英寸。 `1pc = 12pt = 1/6 1in`**
`pt`	*一磅（point），72 分之一英寸。`1pt = 1/12 1pc = 1/72 * 1in`**

相对长度单位

相对长度代表着以其他距离为单位的一种尺寸。这个单位可以是指定字符的大小，行高，或者是视窗口的大小

字体相对长度

字体的相对长度指的是根据一个特定字符的大小或当前字符所在元素的父元素所定义的字符大小来定义长度值

在这里插入图片描述

单位	描述
`em`	相对长度单位，这个单位表示元素的 `font-size` 的计算值。如果用在 `font-size` 属性本身，它则表示元素继承的 `font-size` 值
`rem`	这个单位代表`根元素`（通常为`<html>` 元素）的 `font-size` 大小。当用在根元素的 `font-size` 上面时，它代表了它的初始值（`CSS3新增`）

视口比例（`CSS3新增`）的长度

视口百分比长度定义相对于视窗口的大小的 <length> 值，即文档的可见部分。视口长度在 @page 声明块中无效

单位	描述
`vh`	视口的初始`容器`的高度的 1%
`vw`	视口的初始`容器`的宽度的 1%
`vmin`	视口高度 `vw` 和宽度 `vh` 两者之间的`最小`值
`vmax`	视口高度 `vw` 和宽度 `vh` 两者之间的`最大`值

百分比长度

在许多情况下，百分比与长度的处理方法是一样的。百分比的问题在于，它们总是相对于其他值设置的。例如，如果将元素的字体大小设置为百分比，那么它将是元素父元素字体大小的百分比。如果使用百分比作为宽度值，那么它将是父值宽度的百分比。

单位	描述
`%`	`%`，多用于参考父级容器的值，来按比例进行分配

备注

本章节主要整理为css中，常用的长度单位，当然还能用的长度单位远不止这些，如需查看而更多 ’ 冷门 '，长度单位，请点击了解更多

🚵‍♂️ 博主座右铭：向阳而生，我还在路上！
——————————————————————————————
🚴博主想说：将持续性为社区输出自己的资源，同时也见证自己的进步！
——————————————————————————————
🤼‍♂️ 如果都看到这了，博主希望留下你的足迹！【📂收藏！👍点赞！✍️评论！】
——————————————————————————————