19、CSS 长度单位与盒模型详解

CSS 长度单位与盒模型详解

1. CSS 长度的指定方式

在 CSS 中，部分属性的值以长度形式呈现，如字体大小、行高、字间距等。长度的指定方式主要有以下三种：
- 相对单位
- 绝对单位
- 百分比

2. 相对单位

相对单位主要有三种：像素（px）、em 和 ex。
- 像素（px） ：在 CSS 里，像素（代码中用 px 表示）是最常用的长度单位。它是屏幕分辨率的最小单位，凑近屏幕能看到一个个方形小点就是像素。从技术层面讲，以像素为单位的布局尺寸会受显示介质影响，所以它属于相对单位。多数电脑屏幕分辨率是 72 点每英寸（dpi），激光和喷墨打印机分辨率通常更高，如 300 dpi，移动设备分辨率可能低于电脑屏幕，也可能更高（如 iPhone）。例如，一个宽 500 像素的表格，在 72 dpi 屏幕上宽约 9.9444 英寸，300 dpi 时宽 1.666 英寸，32 dpi 屏幕上宽 13.888 英寸。实际上，从浏览器打印网页时，会自动调整像素以呈现可读文档。CSS 建议，在这种情况下，用户代理应重新缩放像素单位，使文档在一臂之远处阅读时，1 像素约对应 0.28 毫米或 1/90 英寸。
- em ：em 相当于当前字体的高度。由于文档中字体大小会变化，em 单位的高度在文档不同部分也会不同。而且，用户能在浏览器中更改文本大小，所以 em 单位会随用户所选文本大小而变。这意味着 em 单位常用于测量包含文本的元素以及控制文本间距，比如可用于 line-height 属性来设置行间距。虽然 em 单位等同于字体