层叠样式表/长度和单位
要指定宽度、高度和其他长度，可以使用以下表格中列出的各种单位。
| 代码 | 定义 | 注意 |
|---|---|---|
| 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 中使用 ems 中的说明。）这意味着页面将与用户的字体首选项很好地交互。使用像素 (px) 作为字体大小会导致许多问题，应避免。
绝对单位 mm、cm、pt、pc 和 in 在屏幕上效果不佳，并且在许多旧浏览器中会导致问题。最安全的方法是仅将它们用于打印媒体。即使在打印媒体中，它们也可能与用户的首选项产生不良交互。
三个单位 em、ex 和 px 被称为相对单位。这些单位不指定固定长度。相反，它们相对于某个其他量进行缩放。对于 em 和 ex，它们相对于某个元素的字体大小进行缩放。
px 单位指定 CSS 像素 中的长度。这些与文档渲染的屏幕上的像素或打印的打印机上的点不同。例如，完全有可能有两个屏幕像素或五个打印机点对应一个 CSS 像素。出于简单性考虑，许多网络浏览器使用一个屏幕像素等于一个 CSS 像素的规则，但您不能依赖于此。Opera 和 Internet Explorer 版本 7 允许用户更改每个 CSS 像素的屏幕像素数量。使用这些浏览器的视力不佳的用户通常选择将每个 CSS 像素设置为五个或六个屏幕像素。
CSS 像素的正式定义 非常复杂，但基本思想是当文档处于舒适的阅读距离时，CSS 像素看起来大小相同。因此，CSS 像素在显示器上的物理尺寸会比在手机上更大，因为显示器通常比手机离用户的眼睛更远。
将所需的边距宽度/高度除以其容器的宽度/高度以将其转换为 ems。乘以 100 以将其转换为百分比。
将所需的容器宽度除以 1.62 以使用黄金分割作为内容块的大小。从容器宽度中减去内容宽度以使用黄金分割作为侧边栏的大小。