CSS 知识点：盒子模型、伪类、伪元素

什么是 CSS 盒子模型

当对文档进行布局时，浏览器渲染引擎会根据 CSS 盒子模型将元素表现为一个个的矩形盒子，CSS 决定这些盒子的大小、位置以及背景颜色等属性。

每个盒子由四部分组成：

默认情况下，盒子的总宽高是这样计算的：

总宽度 = 左边距 + 左边框 + 左填充 + 宽度 + 右填充 + 右边框 + 右边距

总高度 = 上边距 + 上边框 + 上填充 + 高度 + 下填充 + 下边框 + 下边距

上面所说的都是针对于标准盒子模型，而在老旧的浏览器如 IE5,6 中则默认表现为怪异盒子模型，即盒子的宽度（这里指 width 属性）包含了 border 和 padding

CSS 中提供了一个 box-sizing 属性，可以通过这个属性改变盒子的表现形式，其取值如下：

另外，HTML 页面一定要设置正确的 DTD，如 <!DOCTYPE html>，告诉浏览器使用标准模式进行解析。

CSS 伪类是添加到选择器末尾的关键字，指定要选择的元素的特殊状态。比如 a:hover 可被用于在用户将鼠标悬停在链接上时改变链接的颜色或添加下划线。

常用的伪类有：:hover, :first-child, :nth-child, :empty 等，更多伪类可参考这里：Pseudo-classes

a 标签伪类书写顺序注意：务必按照 link–visited–hover-active 的顺序，即 LoVe, HAte

同伪类一样，CSS 伪元素也是添加到选择器末尾的关键字，可以对被选择元素的特定部分进行样式修改，或者「创建」新的元素，比如使用 ::first-letter 修改首个字符的样式，使用 ::after 创建一个新元素进行装饰。

与伪类不同的是，伪元素一般使用双冒号::进行表示，但是为了兼容更早的规范，即使写成单引号也能被识别，不过为了更加规范还是使用双冒号表示伪元素。

CSS2 中伪类、伪元素都是以单冒号:表示 CSS2.1 后及 CSS3 规定伪类⽤单冒号:表示，伪元素⽤双冒号::表示

常用的伪元素有：::before, ::after, ::first-letter, ::selection 等，更多伪元素可以参考这里：Pseudo-elements