层叠样式表/长度和单位
要指定宽度、高度和其他长度，您可以使用各种单位，如下表所示。
| 代码 | 定义 | 注意 |
|---|---|---|
| em | 元素字体的的高度。 | |
| ex | 元素字体中字母 'x' 的高度。 | |
| px | 像素 | |
| mm | 毫米 | |
| cm | 厘米 | |
| pt | 磅 (1/72 英寸) | |
| pc | 皮卡 (12 磅 = 1/6 英寸) | |
| in | 英寸 |
长度也可以指定为另一个长度的百分比。使用百分比可能很复杂，因为基准长度因属性而异。例如，当百分比与 margin 属性一起使用时，计算基于包含块的宽度。当百分比与 font-size 属性一起使用时，计算基于父元素的 font-size，但对于 line-height，它是基于当前元素的 font-size。
屏幕上的字体大小最好以百分比或 em 形式给出。（请参阅有关 在 Internet Explorer 中使用 em 的说明。）这意味着页面将与用户的字体偏好优雅地交互。使用像素 (px) 作为字体大小会导致许多问题，应避免使用。
绝对单位 mm、cm、pt、pc 和 in 在屏幕上效果不好，并且在许多旧浏览器中会导致问题。最安全的做法是只将它们用于打印媒体。即使在打印媒体中，它们也可能与用户的偏好产生不良交互。
三个单位 em、ex 和 px 称为相对单位。这些单位不指定固定长度。相反，它们相对于其他一些量进行缩放。对于 em 和 ex，它们相对于某个元素的字体大小进行缩放。
px 单位指定以 CSS 像素 为单位的长度。这些与文档渲染的屏幕上的像素或打印的打印机上的点不同。例如，完全有可能存在两个屏幕像素或五个打印点对应一个 CSS 像素。许多网络浏览器出于简单性考虑使用一个屏幕像素等于一个 CSS 像素的规则，但您不能依赖于这一点。Opera 和 Internet Explorer 版本 7 允许用户更改每个 CSS 像素的屏幕像素数量。视力不佳的用户在使用这些浏览器时，通常会选择每个 CSS 像素对应五个或六个屏幕像素。
CSS 像素的 正式定义 非常复杂，但基本思想是，当文档处于舒适的阅读距离时，CSS 像素看起来大小相同。因此，CSS 像素在显示器上会比在手机上物理尺寸更大，因为显示器通常比手机离用户的眼睛更远。
将所需的边距宽度/高度除以其容器的宽度/高度，将其转换为 em。乘以 100 将其转换为百分比。
将所需的容器宽度除以 1.62 以使用黄金分割作为内容块的大小。将内容宽度从容器宽度中减去以使用黄金分割作为侧边栏的大小。