CSS 单位总结

上次更新 2025年5月17日星期六 16:9:59 字数 0 字 时长 0 分钟

1. 常见单位

类型	单位	说明	应用场景
相对单位	em	相对于当前元素的字体大小	文字大小、间距
	rem	相对于根元素(html)的字体大小	响应式布局、文字大小
	vw	视窗宽度的 1%	响应式布局、大屏展示
	vh	视窗高度的 1%	响应式布局、大屏展示
	vmin	vw 和 vh 中的较小值	响应式布局
	vmax	vw 和 vh 中的较大值	响应式布局
	%	相对于父元素	布局、间距
绝对单位	px	像素	固定布局、边框
	pt	点，1pt = 1/72 英寸	打印排版
	pc	派卡，1pc = 12pt	打印排版
	in	英寸，1in = 96px	打印排版
	cm	厘米，1cm = 37.8px	打印排版
	mm	毫米，1mm = 3.78px	打印排版

2. px、em 和 rem 三者的区别

• px 是绝对单位，在一定程度上属于相对单位，因为它是相对于显示器的分辨率而言的。
• em 是相对单位，相对于父元素字体大小。
• rem 也是相对单位，它是相对于 html 更元素的字体大小。

3. 扩展知识 px 影响因素

• 设备像素比（DPR）：设备像素比（Device Pixel Ratio）是指物理像素和设备独立像素的比值。设备像素比可以通过 window.devicePixelRatio 获取。在移动端，设备像素比通常为 2 或 3，这意味着一个 CSS 像素等于 2 或 3 个物理像素。
• px 与 dpr 的关系：在移动端，1px 的 CSS 像素等于 2 或 3 个物理像素。例如，如果设备像素比为 2，那么 1px 的 CSS 像素等于 2 个物理像素；如果设备像素比为 3，那么 1px 的 CSS 像素等于 3 个物理像素。

css 居中

上次更新 2025年5月17日星期六 16:9:59 字数 0 字 时长 0 分钟

1. 水平居中

• 行内元素 使用：text-align: center;
• 块级元素使用 margin: 0 auto;
• flex 布局 使用：justify-content: center;
• grid 布局 使用：place-items: center;
• 绝对定位 使用：left: 50%; transform: translateX(-50%);

2. 垂直居中

• 单行文本 使用：line-height: height;
• flex 使用：display: flex; align-items: center;
• grid 使用：display: grid; place-items: center;
• 绝对定位 使用：top: 50%; transform: translateY(-50%);

隐藏元素

上次更新 2025年5月17日星期六 16:9:59 字数 0 字 时长 0 分钟

1. 站位隐藏

• visibility: hidden;
• opacity: 0;
• position: absolute; left: -9999px;
• margin-left: -9999px;
• width: 0; height: 0; overflow: hidden;
• clip-path: polygon(0 0, 0 0, 0 0, 0 0);

2. 不站位隐藏

• display: none;
• input[type="hidden"]
• 标签 hidden 属性

3. 语义化隐藏

• aria-hidden="true"

浮动

上次更新 2025年5月17日星期六 16:9:59 字数 0 字 时长 0 分钟

1. 浮动的出现是 是为了解决图文环绕的问题