层叠、优先级和继承
层叠及优先级
CSS本质是在声明规则，而层叠是为了解决规则之间冲突，优先级解决冲突的工具。
层叠优先级的判断顺序是：来源->选择器->顺序。
来源指样式的来源。网站构建者写的样式称为作者样式表；浏览器默认的叫做用户代理样式表；此外，像博客园，用户可以自定义样式，称为用户样式表，比较少见。
在声明后面、分号前面加上!important，优先级会变得最高。
行内样式是直接写在HTML标签的style属性里的样式。
选择器优先级判断规则：先看id选择器(如#main)数量，再看类选择器(如.main)数量，再看标签选择器(如h1)数量。
说明：伪类选择器(如
:hover)和属性选择器(如[type="input"])的优先级和类选择器一样，通用选择器(*)和组合器(>、+、~)对优先级无影响。
顺序指声明顺序，如果两个声明的来源和优先级相同，其中一个声明较晚出现，则它胜出，作为层叠值。
不要滥用id选择器和!important。
继承
子元素会继承祖先元素的部分属性。一般是文本属性。
inherit和initial
inherit关键字会强制继承某一属性。
initial关键字是重置为属性的初始值，而不是元素。
简写属性
简写属性是指能同时给多个属性赋值的属性。
例如font、background。
要当心，使用简写属性可能会悄悄覆盖其他属性，因为简写属性中某些没有被显示赋值的属性会被隐式地设置为初始值。
简写属性的书写顺序：
- 上右下左：
margin、padding等。 - 水平、垂直：
background-position、box-shadow、text-shadow等。
相对单位
line-height
当line-height取值为无单位数值时，子元素继承父元素的系数，子元素line-height=系数 \(\times\) 当前元素的font-size。
当line-height取值为有单位数值时，子元素直接继承该值。
像素、点、派卡
像素(px)、点(pt)、派卡(pc)都是绝对单位。
\[1in=25.4mm=2.54cm=6pc=72pt=96px \]CSS像素不严格等于显示器的像素。
em和rem
em和rem都是相对单位。
1em等于当前元素的字号。
使用em做单位可以方便缩放元素。
如果当前font-size也是用em做单位，则它是相对继承的字号而言的。
如果当前元素的字号和其他属性都采用em做单位，则先计算字号，再相对当前字号计算其他属性。
但是，使用em也得小心，因为当嵌套元素使用都使用em时，1em的大小会不断变化。
例如，
<ul>
<li>1
<ul>
<li>2
</li>
</ul>
</li>
</ul>
ul{
font-size:.8em;
}
由于继承特性，以上这种情况的字号是渐小的。
我们可以让嵌套的元素跟父级元素一致，
ul ul{
font-size:1em;
}
还有一个办法就是使用rem，他是root em的缩写。
当浏览器解析HTML文档时，会在内存里将所有元素表示为DOM(文档对象模型，Documention Object Model)。
<html>元素是顶级(根)节点。它下面是<head>和<body>子节点。
根节点还有一个伪类选择器(:root)，它的优先级相当于类选择器。
rem正是相对于根元素的单位。
一般使用rem设置字号，px设置边框，em设置其他大部分属性。
构造响应式面板
根据屏幕尺寸，用媒体查询更改根元素的字号大小，可以渲染出不同大小的面板。
:root{
font-size:0.75em;
}
@media(min-width:800px){
:root{
font-size:0.875em;
}
}
@media(min-width:1200px){
:root{
font-size:1em;
}
}
视口的相对单位
视口指浏览器窗口可见部分的边框区域，不包括浏览器地址栏、工具栏、状态栏。
- vh：视口高度的1/100；
- vw：视口宽度的1/100；
- vmin：视口宽度、高度中的最小值；
- vmax：视口宽度、高度中的最大值。
使用vw定义字号，当视口大小改变时，元素大小也会逐渐过渡。
calc()定义字号
calc()函数可以结合不同单位的值。
:root{
font-family:calc(0.5em+1vw)
}
这种方式，可以使得缩放浏览器时字体变化更平滑。
0.5em保证了最小字号，1vw确保了字体会随着视口缩放。
自定义属性
自定义属性，也叫CSS变量。
例如：
:root{
--main-font:Helvetica,Arial
}
-
变量名前必须有
--符号； -
变量在声明块内声明；
-
声明块使用
:root选择器后，变量可以在整个网页使用；
调用var函数就能使用定义的变量。
p{
font-family:var(--main-font)
}
注意，如果var函数算出的是一个非法值，相应的属性会被设置为初始值。
我们可以在容器内外自赋予同名变量不同值。
使用JS设置一个自定义属性：
var rootElement=ducument.ducumentElement;
rootElement.style.setProperty('--main-bg','#cdf');