2. 样式计算
# 2. 样式计算
# 优先级别
- 使用
就近原则 继承样式的优先级别最低 任何继承来的样式的优先都降为1级!important样式的优先级别最高，若冲突则重新计算
# 权重 不完全正确
10000：
!important1000：
内联样式、外联样式100：
ID选择器10：
类选择器、伪类选择器、属性选择器1：
标签选择器、伪元素选择器0：
通配选择器、后代选择器、兄弟选择器
一 以下为单选择器 行内样式 权重 1000 ！important 权重比单个最大 ie6不支持，权重 的大小按着256进制计算 可以叠加，但是只限于同一级别的选择器， 并不是10比1大9的关系
# css选择器的优先级和权重问题
如果想深入了解，请点击这里
# CSS选择器的种类：
CSS选择器的种类：
1.id选择器如：（id=”name”,id=”name_txt）（*name）
2.class选择器（如：class=”head”,class=”head_logo”）(#head)
3.标签选择器（如：body,div,p,h1,form）
4.全局选择器（如：*号）
5.组合选择器（如：.head .head_logo,注意两选择器用空格键分开）
6.继承选择器（如：div p,注意两选择器用空格键分开）
7.伪类选择器（如：就是链接样式,a元素的伪类，4种不同的状态：link、visited、active、hover。）
# CSS的优先级
CSS的优先级
选择器的优先级分为两种情况，第一种是选择器在同一级别的情况下，第二种是选择器在不同级别的情况下
不同选择器级别：
1.在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
作为style属性写在元素内的样式
2.id选择器
3.类选择器
4.标签选择器
5.通配符选择器
6.浏览器自定义或继承
总结：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
2.同一级别的选择器的优先级：
同一级别中后写的会覆盖先写的样式
# CSS选择器的权重分析：
CSS选择器的权重分析：
第一等：代表 内联样式，如: style=””，权值为:1000。
第二等：代表 ID选择器，如：#content，权值为:0100。
第三等：代表 类，伪类和属性选择器，如: .content , :hover , [type="text"] 权值为:0010。
第四等：代表 标签选择器和伪元素选择器，如: p ，::first-line 权值为:0001。
通配符、子选择器、相邻选择器等的。如: *、>、+,权值为:0000。
继承的样式没有权值，通配选择器定义的规则优先级高于元素继承过来的规则的优先级。
最后比较特殊的一个标志!important（权重），它没有特殊性值，但它的优先级是最高的，为了方便记忆，可以认为它的特殊性值为1,0,0,0,0。
# 优先级别相同的规则使用最后出现的规则
.input-box {
color: #f66;
}
:focus {
color: #66f;
}
[type=text] {
color: #f90;
}
虽然类选择器、伪类选择器和属性选择器三者的优先级别相同，但最后出现的规则其优先级别最高，所以<input>最终会显示#f90。
# 优先级别无视节点在DOM树中的距离
html h1 {
color: #f66;
}
body h1 {
color: #66f;
}
虽然<html>包含着<body>，但依据就近原则，所以<h1>最终会显示#66f。
# 不同规则作用于相同节点使用优先级别最高的规则
#bruce {
color: #f66;
}
[id=bruce] {
color: #66f;
}
虽然两者规则都作用于ID为bruce的<div>，但ID选择器的优先级比属性选择器高，所以<div>最终会显示#f66。
# :not()不参与优先级别的计算
:not()在优先级别计算中不会被看成伪类，但会把:not()里的选择器当作普通选择器计数。简单来说就是忽略:not()，其他伪类照常参与优先级别计算。
# 规则
- 规则的权值不同时，权值高的规则优先
- 规则的权值相同时，后定义的规则优先
- 属性后面追加
!important时，规则无条件绝对优先
# 长度单位
| 单位 | 定义 | 类型 | 描述 |
|---|---|---|---|
| px | 像素 | 绝对单位 | - |
| pt | 点 | 绝对单位 | 1pt = 1/72in |
| pc | 派 | 绝对单位 | 1pc = 12pt |
| mm | 毫米 | 绝对单位 | - |
| cm | 厘米 | 绝对单位 | - |
| in | 英寸 | 绝对单位 | 1in = 96px = 2.54cm |
| % | 百分比 | 相对单位 | 相对父节点，宽度对应，高度不一定对应 |
| em | M的宽度 | 相对单位 | 相对当前节点字体 |
| rem | M的宽度 | 相对单位 | 相对根结点字体 |
| ch | 0的宽度 | 相对单位 | 相对当前节点字体 |
| ex | x的宽度 | 相对单位 | 相对当前节点字体 |
| vw | 1%视窗宽度 | 相对单位 | 相对视窗 |
| vh | 1%视窗高度 | 相对单位 | 相对视窗 |
| vmin | vw/vh最小者 | 相对单位 | 相对视窗 |
| vmax | vw/vh最大者 | 相对单位 | 相对视窗 |
# 屏幕分辨率
屏幕分辨率指横纵向上的像素点数，单位是px。屏幕分辨率确定计算机屏幕上能显示多少信息的，以水平和垂直像素衡量。屏幕尺寸一致的情况下，屏幕分辨率越低在屏幕上显示的像素就越少，单个像素尺寸也比较大，屏幕分辨率越高在屏幕上显示的像素越多，单个像素尺寸也比较小。
屏幕分辨率就是屏幕上显示的像素个数，分辨率1920×1080意味着水平方向含有1920个像素数，垂直方向含有1080个像素数。屏幕尺寸一致的情况下，屏幕分辨率越高，显示效果就越细腻。
# em/rem区别
em和rem是移动端布局上常用的长度单位，两者的后缀都一致。rem全称是root em，意思是相对根节点作为参考的长度单位。
- em：当前节点字体宽度，准确来说是一个M的宽度
- rem：默认字体宽度，准确来说是一个M的宽度
两者区别在于：em相对父节点，rem相对根节点。em以当前节点字体宽度作为参考，rem以根节点<html>字体宽度作为参考，默认是16px。
# 视窗比例单位
在CSS3中增加了与viewport相关的四个长度单位，随着时间推移，目前大部分浏览器对这四个长度单位都有比较好的兼容，这也是未来最建议在伸缩方案中使用的长度单位。
1vw表示1%视窗宽度1vh表示1%视窗高度1vmin表示1%视窗宽度和1%视窗高度中最小者1vmax表示1%视窗宽度和1%视窗高度中最大者
视窗宽高在JS中分别对应window.innerWidth和window.innerHeight。
可以使用 calc 解决移动端的伸缩方案。
html {
font-size: calc(100vw / 7.5);
}
# 移动端适配
# rem
em是一个字的大小，rem就是root em，意思就是相对于根元素(html)的字体大小
em单位在排版中有它的起源，em是作为给定类型字体大小的相对大小。在过去，打印都是关于凸版印刷排版，用金属将信印在纸上所以被叫做空铅(最初的嵌块)。这些空铅都有相同的高度，可以适合给定大小和类型的字母表中的每一个字母。然而，他们有不同的宽度，因为大写的字母“M”在宽度和高度上接近相等，所以约定俗成的将"M"的宽度作为相对单位建立。因此em单位名的起源只是因为这个是字母"M"的语音表达(ɛm)(我找不到对这个起源的任何历史证明，但是人们似乎认为这是最合理的解释)。著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
相对单位
em和ex是相对于元素本身的字体大小的。在CSS1中唯一的例外是font-size属性,它的em和ex值指的是父元素的字体大小。著作权归作者所有。
但是em有一个相当大的缺点。像在规范中列出的，它是继承的，如果你有多个嵌套的元素重载em的字体大小，每次你想计算DOM中深层的节点的字体大小的时候，你都需要经过很多数学运算。
让我们通过观察下面的代码片段来快速的说明这个问题：
<div class="level-1">
<div class="level-2">
<div class="level-3">
<p>Hello!</p>
</div>
</div>
</div>
html {
font-size: 20px;
}
.level-1, .level-2 {
font-size: 0.5em;
}
.level-3 {
font-size: 2em;
}
你觉得“Hello”文本的字体大小是多少呢？因为em的值随着DOM的级联和嵌套变化，所以真的很难跟踪发生了什么。在这个例子中,文本的字体大小是10px,因为html元素最初的20px在乘以2之前乘了两次0.5。
最后，用CSS3解决上面的问题。REM表示“Root EM”,字面上指的是根元素的em大小。在Web文档的上下文中，根元素就是你的html元素。
这个简直太奇妙了！我们可以方便的使用相对字体大小，而且还避免了使用嵌套的em结构的混乱。几乎每一个开发人员接受这个新的、奇特的CSS长度单位，它变得非常受欢迎。
唯一的问题是缺少IE8的支持。自2005年CSS3的第二稿以来，REM没有被认为重要的足以包括在四年以后发布的IE8中。不管怎样，正如我们知道如何解决IE的问题一样，我们开始使用REM的像素后退模式。
.my-text {
font-size: 32px;
font-size: 2rem;
}
CSS是温和的，它总是建立在优雅降级的概念上。如果渲染引擎不理解一个属性或者值，它只是忽略它。这使得现代浏览器支持用rem指定属性，而老的浏览器只是忽略后面用rem指定属性的那行。
今天我们生活在一个移动时代，这从两端改变了互联网，我们如何使用它以及我们如何建立它。响应式网页设计变得非常流行，并且可能是最常用的专业术语。虽然在2010年媒体查询模块已经被Håkon Wium Lie具体说明，但它加入到CSS3规范中是在相对较晚的工作草案8中，同时这也是最后使用的工作草案。
现今每个前端工程师意识到媒体查询是一个很有用的东西，在某种程度上我们几乎在每个项目中都用到它。在媒体查询变得流行，人们开始为移动设备设计他们的网站之后没多久开始了一些争论，关于使用像素还是相对字体单位rem或em来指定媒体查询。让我们来看看Zurb在2011年十月发布的响应式CSS框架Foundation2：
/* Mobile */
@media only screen and (max-width: 767px) {}
/* Modernizr-enabled tablet targeting */
@media only screen and (max-width: 1280px) and (min-width: 768px) {}
你可以看到768px-1280px是用于桌面宽屏(PC宽屏)，768px以下的是用于移动宽屏（手机宽屏）。
你还可以观察到，像素单位被用来指定媒体查询。让我们来看看Foundation更新的版本。Foundation 5是移动优先的，并且基于媒体查询的所有屏幕尺寸都是用em为单位的。
/* xs up */
@media only screen {}
/* small up */
@media only screen and (min-width: 40.063em) {}
/* medium up */
@media only screen and (min-width: 64.063em) {}
/* large up */
@media only screen and (min-width: 90.063em) {}
/* xlarge up */
@media only screen and (min-width: 120.063em) {}
如果我们假定浏览器默认的字体大小是16px，基于这个大小来计算我们的em，那么这些媒体查询的计算结果分别是640px,1024px,1440px,1920px。
乍一看，这非常有意义，因为现在我们有了基于根元素字体大小的媒体查询，这意味着我们的媒体查询是按照浏览器字体大小按比例缩放的。然而，在结论部分你将发现在媒体查询中用em或者rem会有大量的问题。
英文：https://mindtheshift.wordpress.com/2015/04/02/r-i-p-rem-viva-css-reference-pixel/