css - px和em的区别

CSS 中的 px 和 em 是两种不同的长度单位，主要区别如下：

1. 定义与类型

• px（像素）：绝对单位，表示屏幕上的物理像素点，不受其他元素影响。
• em：相对单位，基于父元素的字体大小（若无父元素则继承根元素 html 的默认值 16px）。

2. 计算方式

• px：固定值（如 10px 始终为 10 像素）。
• em：
  • 若父元素字体为 16px，则 1em = 16px，2em = 32px。
  • 若父元素字体为 20px，则 1em = 20px。

3. 使用场景

• px：适合固定尺寸（如边框、图标大小）。
• em：适合响应式设计或嵌套层级较少的场景（如按钮缩放）。

4. 优缺点对比

5. 示例代码

/* px 示例 */
.box-px { width: 100px; } /* 始终为 100 像素 */

/* em 示例 */
html { font-size: 16px; }
.parent { font-size: 20px; }
.child-em { font-size: 2em; } /* 继承父元素 20px，最终为 40px */

总结

• 优先用 px：需固定尺寸时（如布局基准值）。
• 优先用 em：需响应字体缩放时（如文本大小调整）。

示例：首行缩进2个字符

{
	text-indent: 2em
}