层叠样式表/长度和单位
要指定宽度、高度和其他长度，可以使用以下表格中列出的各种单位。
| 代码 | 定义 | 注意 |
|---|---|---|
| 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 像素有 5 或 6 个屏幕像素。
关于 CSS 像素的 正式定义 非常复杂，但基本思想是，当文档处于舒适的阅读距离时，CSS 像素看起来大小相同。因此，CSS 像素在显示器上的物理尺寸将比在手机上更大，因为显示器通常比手机离用户的眼睛更远。
将所需的边距宽度/高度除以其容器的宽度/高度，将其转换为 em。乘以 100 以将其转换为百分比。
将所需的容器宽度除以 1.62 以使用黄金分割作为内容块的大小。从容器宽度中减去内容宽度以使用黄金分割作为侧边栏的大小。