HTML和CSS基础系列（三）

伪类、伪元素的区别

举几个例子：

伪类：:link,:visited,:hove,:active,:focus,:disable,:first-child,:last-child,:nth-child(n)

伪元素：::after,::before,::first-letter,first-line,selection

1. 写法区别。双冒号代表伪元素，单冒号代表伪类。
2. 概念区别。伪类侧重丰富选择器的选择语法范围内元素的选择能力，伪元素侧重表达或者定义不在语法定义范围内的抽象元素。

css选择器优先级（权重问题）

！important > 行内样式 > ID选择器 > Class选择器 > 标签 > 通配符 > 继承 > 浏览器默认样式

css标准盒子和怪异盒子

W3C标准盒模型 IE怪异盒模型

标准盒模型下：盒子实际内容（content）的width/height=我们设置的width/height;盒子总宽度/高度=width/height+padding+border+margin。也就相当于css3中设置属性box-sizing:content-box。

怪异盒模型下：设置的width/height=盒子（content）的width/height+内边距padding+边框border宽度，盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin。也就相当于css3中设置属性box-sizing:border-box。

css提升性能的方式

1. 合并css文件
2. 减少css嵌套层级
3. 建立公共样式类，把相同样式提取出来
4. 减少通配符的使用
5. 用雪碧图
6. gzip压缩（关于gzip的原理：简单聊聊 GZIP 的压缩原理与日常应用）
7. 开启硬件加速，transform、opacity、filters等动画效果不会引起回流重绘
8. 使用文档片段DocumentFragment存储变化的元素，然后依次添加

可继承属性

可继承属性：颜色，文字，字体间距行高对齐方式，和列表的样式。

• 所有元素可继承：visibility和cursor。
• 内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。
• 终端块状元素可继承：text-indent和text-align。
• 列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。

继承让开发更容易，大大减小了CSS文件的体积。

注意：font-size是继承计算后的值。

visib