CSS
CSS units 单位
CSS 有几种表示长度的不同单位
许多 CSS 属性接受长度值：width, margin, padding, font-size等
长度是一个后面跟着长度单位的数字：10px, 2em等
h1 {
font-size: 60px;
}
p {
font-size: 25px;
line-height: 50px;
}
数字和单位之间不能出现空格
如果值为 0，则可以省略单位
对于某些 CSS 属性，允许使用负的长度
长度单位有两种类型：绝对单位和相对单位
绝对长度
绝对长度单位是固定的，用任何一个绝对长度表示的长度都将恰好显示为这个尺寸
不建议在屏幕上使用绝对长度单位，因为屏幕尺寸变化很大
但是，如果已知输出介质，则可以使用它们，例如用于打印布局（print layout）
| 单位 | 描述 |
|---|---|
| cm | 厘米 |
| mm | 毫米 |
| in | 英寸(1in = 96px =2.54cm) |
| px | 像素(1px = 1/96 of 1in) |
| pt | 点(1pt = 1/72 of 1in) |
| pc | 派卡(1pc = 12pt) |
像素（px）是相对于观看设备的
对于低 dpi 的设备，1px 是显示器的一个设备像素（点）
对于打印机和高分辨率屏幕，1px 表示多个设备像素
相对长度
相对长度单位规定相对于另一个长度属性的长度
相对长度单位在不同渲染介质之间缩放表现得更好
| 单位 | 描述 |
|---|---|
| em | 相对于元素的字体大小（font-size）（2em表示当前字体大小的2倍） |
| ex | 相对于当前字体的 x-height（极少使用） |
| ch | 相对于"0"的宽度 |
| rem | 相对于根元素的字体大小（font-size） |
| vw | 相对于视口宽度的1% |
| vh | 相对于视口高度的1% |
| vmin | 相对于视口较小尺寸的1% |
| vmax | 相对于视口较大尺寸的1% |
| % | 相对于父元素 |
em 和 rem 单元可用于创建完美的可扩展布局
视口（Viewport）= 浏览器窗口的尺寸。如果视口为 50 厘米宽，则 1vw = 0.5 厘米
css specificity 特异性
如果有两条或两条以上指向同一元素的冲突 CSS 规则，则浏览器将遵循一些原则来确定哪一条是最具体的，并因此胜出
将特异性（specificity）视为得分/等级，能够确定最终将哪些样式声明应用于元素
通用选择器（*）具有较低的特异性，而 ID 选择器具有较高的特异性
注意：这种特异性是 CSS 规则不适用于某些元素的常见原因，尽管您可能会认为应该适用
特异性层次
每个选择器在特异性层次结构中都有其位置
以下四种类别定义了选择器的特异性级别：
行内样式 - 行内（内联）样式直接附加到要设置样式的元素，如
ID - ID 是页面元素的唯一标识符，例如 #navbar，如#navbar
类、属性和伪类 - 此类别包括 .classes、[attributes] 和伪类，如:hover，:focus等
元素和伪元素 - 此类别包括元素名称和伪元素，如h1，div，:before，:after等
计算特异性
从 0 开始，为 style 属性添加 1000，为每个 ID 添加 100，为每个属性、类或伪类添加 10，为每个元素名称或伪元素添加 1
A: h1
B: #content h1
C: <div id="content"><h1 style="color: #ffffff">Heading</h1></div>
A 的特异性为 1
B 的特异性为101
C 的特异性为1000 （行内样式）
由于 1 < 101 < 1000，因此第三条规则（C）具有更高的特异性，所以将被应用
特异性规则 1：
在特异性相同的情况下：最新的规则很重要 - 如果将同一规则两次写入外部样式表，那么样式表中后面的规将更靠近要设置样式的元素，因此会被应用
特异性规则 2：
ID 选择器比属性选择器拥有更高的特异性
div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}
第一条规则比其他两条更具体，因此将被应用
特异性规则 3：
上下文选择器比单一元素选择器更具体
嵌入式样式表更靠近要设置样式的元素
来自外部 CSS 文件：
#content h1 {background-color: red;}
在 HTML 文件中：
<style>
#content h1 {
background-color: yellow;
}
</style>
将适用后一条规则
特异性规则 4：
类选择器会击败任意数量的元素选择器
