4.5 KiB
4.5 KiB
| title | localeTitle |
|---|---|
| Units | 单位 |
单位
许多CSS属性，如width ， margin ， padding ， font-size等需取用长度。 CSS具备一种可用多种单位表达长度的方式。长度是数字和单位的组合，没有空格。例如5px ， 0.9em等
长度
常用长度单位
CSS使用几个单位来表示长度。所有浏览器都支持旧版本：
- rem - “r”代表“root”：“root em” - ，它等于固定到根元素的字体大小（几乎总是
<html>）。 - vh和vw - 许多响应式网页设计技术重度依赖百分比规则。但是，CSS百分比度量并不总是解决所有问题的最佳方法。度量vh等于视口高度的1/100。因此，例如，如果浏览器的高度为800px，则1vh等于8px，同样，如果视口的宽度为650px，则1vw等于6.5px。
- vmin和vmax - 这些单位与vh和vw的最大值或最小值有关。例如，如果浏览器设置为1200px宽，高度为600px，则1vmin为6px，1vmax为12px。但是，如果宽度设置为700px且高度设置为1080px，则vmin将等于7px且vmax为10.8px。
- ex和ch - 这些单位与em和rem类似，取决于当前的字体和字体大小。但是，与em和rem不同，这些单元还取决于
font-family因为它们是根据每种字体特有的度量来确定的。 ch单位（“字符单位”）被定义为字符零（“0”）的宽度。 ex单位定义为“当前字体的当前x高度或1em的一半”。给定字体的height-x是该字体的小写“x”的高度。它通常是字体的中间标记。
|单位|说明| | --------------- | ----------------------- | | em | 1 em是使用它的元素上font-size的计算值。 | | ex | 1 ex是当前字体的x高度。 x高度通常（但不总是，例如，如果字体中没有'x'）等于小写'x'|的高度。 | ch | 1 ch是当前字体中'0'（零）字形的前进。 'ch'代表人物。 | | rem | 1 rem是文档根元素的字体大小属性的计算值 | vw | 1vw是视口宽度的1％。 'vw'代表'视口宽度'。 | | vh | 1vh是视口高度的1％。 'vh'代表'视口高度'。 | | vmin |等于'vw'或'vh'|中较小的一个 | vmax |等于'vw'或'vh'|中的较大者
CSS中有两种用于长度和大小的单位：相对和绝对。
相对单位
相对单位相对于元素的当前字体大小或其他设置而变化。一些相关单位是
em- 当前元素的
font-size的大写字母M的宽度。 - 字体大小从父元素继承。
- 例：
html div { font-size: 16px; } div h3 { font-size: 2rem; }这里<h3>将等于32px因为当前或父元素的font-size是16px。 rem- root
em，或默认基本font-size的大写字母M的宽度。 - 父字体大小无效。
- 例：
html body { font-size: 16px; } p { font-size: 1.5rem; }由于默认基本font-size为16px因此<p>将等于24px。 %- 相对于父级大小的百分比大小。
- 例：
html div { width: 400px; } div p { width: 75%; }由于父级的宽度为400px，内部段的宽度将为300px，即400px75％。 vw- 视图宽度，或视口宽度的1/100
- 例：
html body { width: 100vw; }无论是417像素，690像素还是任何宽度，body填满视口宽度。 vh- 视图高度，或视口高度的1/100
- 例：
html div { height: 50vh; }无论是1080px，1300px还是任何高度，此div将填充视口高度的一半。
绝对单位
无论屏幕尺寸或其他设置如何，绝对单位都是相同的。一些绝对单位是
px- 像素
- 像素数相对于观看设备屏幕的质量
in，cm，mm- 英寸，厘米，毫米
- 小屏幕或大屏幕上的英寸是一英寸
pt，pc- 分（1/72英寸）和皮卡（12分）
例
p {
font-size: 24px;
}
div {
width: 3in;
border-width: 3pt;
}
font-size: 24px段落将在手机，平板电脑或桌面屏幕上显示为24px。
div将显示为3英寸宽，无论屏幕大小如何， div上的border将为3/72英寸厚。