选择器优先级
如果一个元素使用了多个选择器，则会按照选择器的优先级来定样式。先给个栗子：
<div id="app">
<h1 class="title">少年<h1>
</div>
<style>
.title {
color: red;
}
div h1 {
color: pink;
}
</style>
复制代码
以上代码产生的效果如何呢？这取决于选择器的特异度（Specificity），也就是说特异度大的优先级也就越高。那么虚则气的特异度究竟是怎样的呢？
内联样式，优先级1000
id选择器，优先级100
类和伪类，优先级10
元素和伪元素，优先级1
通配选择器，优先级0
分析一个例子：
#nav .list li a:link：id 选择器有 1个（#nav），类与伪类共有 2个（.list 与 :link）,元素与伪元素共有 2个（li 与 a）,所以在 1 中的特异度为 122..hd ul .links aid 选择器有 0个，类与伪类共有 2个（.hd 与 .links）,元素与伪元素共有 2个（ul 与 a）。所以在 2 中的特异度为 22.
css计算
块级元素
什么是块级元素：
- 块级元素结独占一行
- 允许设置宽高
- 可设置width、height、margin、padding
常见块级元素：div、p、h1-h6、form、ul、ol、dl、dt、dd、li、table、tr、td、th、hr
行内元素
- 不能独占一行，与其他行内元素排成一行
- 不能设置width、height、margin、padding
- 默认宽度为其内容宽度（盒子宽高由内容撑起）
常见行内元素：span、img、a、label、code、input、abbr、em、b
行内块元素
- 可设宽高（默认是内容宽高），也可以设置内外边距
- 默认宽度就是他本身内容的宽度
- 和相邻行内块在一行上，但是之间会有空白间隙
注：添加css可转化为行内块：display: inline-block
布局
布局是什么？
- 确定内容的大小和位置的算法
- 依据元素，容器，兄弟节点和内容等信息来计算
静态布局
- 布局特点：静态布局是最为原始的布局方式，制作的网页上的元素尺寸一律以px为单位。
- 优点：这种布局对于新手而言较为简单，容易让人学会。这种布局一般用于企业的门户网站。
- 缺点：大小固定死，不会随屏幕大小而发生变化。
流式布局
- 布局特点：流式布局是用于解决类似的设备不同分辨率之间的兼容 (一般分辨率差异较少)，使用百分比布局，页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。代表作栅栏系统（网格系统）。
- 优点：用来应对不同尺寸的PC屏幕，在移动端开发也是常用布局方式
- 缺点：如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。
自适应布局
- 布局特点：屏幕分辨率变化时，页面里面元素的位置会变化而大小不会变化。
- 优点：对网站的复杂程度兼容性更大，测试时更加容易，运营相对更加精准。
- 缺点：需要根据不同使用场景开发多套界面。
响应式布局
- 布局特点：每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变。
- 优点：适应pc和移动端，如果足够耐心，效果完美
- 缺点：（1）媒体查询是有限的，也就是可以枚举出来的，只能适应主流的宽高。（2）要匹配足够多的屏幕大小，工作量不小，设计也需要多个版本。
弹性布局
- 布局特点：包裹文字的各元素的尺寸采用em/rem做单位，而页面的主要划分区域的尺寸仍使用百分数或px做单位，使用em/rem做单位，可以使包裹文字的元素随着文字的缩放而缩放。
- 优点：理想状态是所有屏幕的高宽比和最初的设计高宽比一样，或者相差不多，完美适应。
- 缺点：高度没有做到自适应，一些对高度，或者元素间距要求比较高的设计，则这种布局没有太大的意义。如果只是宽度自适应，更推荐响应式设计。
