选择器特异度

当同一个元素遇到多个样式进行渲染，那么最终页面的渲染效果会是怎样的？

这会涉及到对“选择器特异度”的计算
数值大的优先级高，同等优先级的会选择顺序靠后
利用这个特性可以实现css代码样式的覆盖及提高css的复用性

上图就是特异度的计算方式，按id，伪类，标签的分类计算各自有多少个，得到三位数的特异度值。
如上图案例，
第一个选择器 #nav .list li a:link 有1个id，2个伪类，2个标签，那么该选择器的特异值为122。
第二个选择器 .hd ul.links a 有0个id，2个伪类，2个标签，那么该选择器的特异值为022。
122>022，第一个选择器的样式生效

盒模型

盒模型是 W3C 的规范，规定一个浏览器如何渲染、显示一个元素。

盒模型分为 标准盒模型 和 怪异盒（IE盒）模型
标准盒与怪异盒的区别在于它们的宽度和高度的定义范围是不一样的
标准盒模型的宽高是指content的width和height
怪异盒模型的宽高是指包含了 content、padding 和 border的宽高值

盒模型根据元素的种类分为行级盒子和块级盒子
行级盒子的 width\heigth 属性不适用
块级对盒模型属性不设限，都适用，块级盒子独占一行

常见的块级和行级元素

盒模型是CSS的概念，而元素是html的概念，下面是常见的块级和行级元素：

排版上下文规则总结

常规流

是指在不对页面进行任何布局控制时，浏览器默认的HTML布局方式。

行级排版上下文

块级排版上下文

FLEX排版上下文

常规流还有GRID和TABLE排版上下文，这里就不进行过多描述

小tip：

父级Span里有行级和块级盒子，但是这种并不被允许，所以会有两个匿名的盒子包裹这两段文字。