1.伪类选择器
伪类是指具有特定类型/属性的元素，是指在某个元素上增加特定的属性。比如未访问的a标签，已访问的a标签，用于对不同属性下的元素进行不同的样式展示。伪类最终作用的仍然是该元素本身，只是针对的是 具有特定属性的该元素。伪类的本质是把某种幻想类关联到与伪类相关的元素。
链接伪类
CSS2.1定义了两个只应用于超链接（即有一个href属性）的伪类。
| 伪类名 | 描述 |
|---|---|
| :link | 表示作为超链接并指向一个未访问地址的所有锚 |
| :visited | 表示已访问过地址的所有锚 |
第一个伪类看起来是不是有些多余？毕竟如果一个锚尚未访问过，那它肯定是未访问的链接。其实:link属性的重点在于区分作为超链接的锚和作为锚点的锚.
a {color: blue;}
a:visited {color: red}
<a name="section4">4. The Lives of Meerkats</a>
上述例子中，第一个规则不仅会应用于未访问的链接，还会应用到上述作为锚点跳转的锚。为避免将链接样式应用到目标锚，要使用:link伪类。
动态伪类
动态伪类可以根据用户行为改变文档的外观。动态伪类可以应用到任何元素。
| 伪类名 | 描述 |
|---|---|
| :focus | 指示当前拥有输入焦点的元素 |
| :hover | 指示鼠标指针停留在哪个元素上 |
| :active | 指示被用户输入激活的元素，例如鼠标点击某个超链接时，就会激活这个超链接 |
input:focus {background: slive; font-weight: bold};
可以突出显示一个准备接受键盘输入的表单元素。
:first-chlid伪类
:first-chlid只有当前元素是某个元素的第一个元素时才能匹配。例如，p:first-child 会选择作为另外某个元素第一个子元素的所有 p 元素。一般可能认为这会选择作为段落第一个子元素的元素，但事实上并非如此，如果要选择段落的第一个子元素，应当写为 p > *:first-child。
结合伪类
可以在同一个选择器中结合使用伪类。例如，鼠标指针停留在未访问超链接上时，让这些链接变成红色；鼠标停留在已访问过的链接上时，链接变成紫红色。
a:link:hover {color: red}
a:visited:hover {color: maroon}
:link和:hover的顺序并不重要，a:link:hover和a:hover:link的效果一样；但是不要把互斥的伪类结合在一起使用，比如:link和:visited，这种写法没有任何意义，会别忽略。
伪元素选择器
就像伪类为元素制定幻想类一样，伪元素能够在文档中插入假想的元素，从而得到某种效果。 CSS2.1中定义了4个微元素：设置首字母样式，设置第一行样式，设置之前和之后元素的样式。
设置首字母样式
第一个伪元素用于设置一个块级元素首字母的样式，且仅对该首字母设置样式：
p:first-letter { color: red; }
这个规则会将每一段的第一个字母变成红色。
设置第一行的样式
类似的，:fierst-line用于影响元素中第一个文本行。
p:first-line { color: purple; }
这个样式应用于每一段所显示的第一行文本，不论显示区域多大或多小。
设置之前和之后元素的样式
该伪元素用于插入生成的内容，并设置其样式。要在一个元素后面插入内容，可以使用伪元素:after；同理，要在一个元素前面插入内容，可以使用伪元素:before.比如，在文档的最后用一个适当的结束语结束。
body:after { content: " The End. "; }
px em rem
像英尺、厘米、毫米等绝对单位很少被应用到web设计中，因为只有当浏览器知道用来显示页面的显示器、所用的打印机或其他任何用户代理的所有细节时，这些绝对单位才真正有用。在一个web浏览器上，显示会受到显示器的尺寸、分辨率等影响；而对于开发者，这些我们都无法控制。因此，我们一般会使用相对单位，如px、em、rem等。
px，像素（Pixel）相对长度单位，是相对于显示器屏幕分辨率而言的。
em是相对长度单位。基准点为父节点字体的大小，如果自身定义了font-size按自身来计算。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em，10px=0.625em。为了简化font-size的换算，可以在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将原来的px数值除以10，然后换上em作为单位就行了。
rem是CSS3新增的一个相对单位（root em，根em），使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。rem可以通过修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。
垂直对齐
行高
line-height属性是指文本线基线之间的距离，基线（base line）是英文字母“x”的下端。line-height确定了将元素框的高度增加或减少多少。在应用到块级元素时，line-height定义了元素中文本基线之间的最小距离。
文本行中的每个元素都会生成一个内容区，这由字体大小确定。这个内容区则会生成一个行内框，如果不存在其他因此，这个行内框就完全等于该元素的内容区。由line-height产生的行间距就是增加或者减少各行框高度的因素之一。
vertical-align属性只应用于行内元素和替换元素，如表单输入元素和图像。vertical-align属性不能继承。vertical-align只接受8个关键字、一个百分数值或一个长度值。这些关键字包括：baseline、sub、super、bottom、text-bottom、middle、top和text-top。
baseline要求一个元素的基线与其父元素的基线对齐。大多数情况下浏览器都会这么做。如果一个需要垂直对齐的元素没有基线，比如一个图形或表单输入元素，那么该元素的底端与其父元素的基线对齐。
sub声明会使一个元素变成下标，这意味着其基线（如果是替换元素，则是底部）相对于其父元素的基线降低。super刚好与sub相反，它将元素的基线（或替换元素的底端）相对于父元素的基线升高。
bottom将元素行内框的底端与行框的底端对齐。top的效果与bottom刚好相反。
text-bottom是指行内文本的底端。替换元素和任何其他非文本元素都会忽略这个值。
middle往往应用于图像，它一般会将行内元素框的中点与父元素基线上方0.5ex处对齐，这里的1ex相对于父元素的font-size定义。
浮动
CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
对于浮动元素有几点要记住。首先，会以某种方式将浮动元素从文档的正常流中删除，不过它还是会影响布局，因为一个元素浮动时，其他内容会“环绕”该元素。浮动元素之前的元素将不会受到影响。一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
同时浮动元素周围的外面局不会合并。就是说如果浮动一个有20px外边框的图像，那在这个图像周围将至少有20px的空间。如果其他元素与此元素相邻，而且这些元素也有外边距，那么这些外边距不会与浮动图像的外边距合并。
元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。clear 属性指定元素两侧不能出现浮动元素。，clear属性取值为：left、right、both、none。
.text_line
{
clear:both;
}
让text_line元素两边都没有浮动元素。
动画
transition
transition 属性设置元素当过渡效果，transition的属性有transition-property（css属性name，transition效果）、transition-duration（动画持续多少秒）、transition-timing-function（动画的变化过程速度曲线）、transition-delay（动画开始的时候，也就是延迟多少秒）四个简写属性为：
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
注意： 始终指定transition-duration属性，否则持续时间为0，transition不会有任何效果。
transition-timing-function属性指定切换效果的速度。此属性允许一个过渡效果，以改变其持续时间的速度。
这个三个Transition属性中的每个属性都支持多个参数值，参数值之间用逗号分隔，这样能够用一个样式规则制定多种CSS属性的变化。需要注意的是，三个Transition属性中的多个参数值的顺序一定要一致。
animation
语法
animation-timing-function和transition的transition-timing-function属性中的相同
animation-direction 属性定义是否循环交替反向播放动画。
animation-fill-mode 属性规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
默认情况下，CSS 动画在第一个关键帧播放完之前不会影响元素，在最后一个关键帧完成后停止影响元素。animation-fill-mode 属性可重写该行为。
实例
transition和animation的区别
相对于animation,transition从某种层度上讲，动画控制的更粗一些，它唯一能定义动画变化过程效果的便是transition-timing-function属性，而animation提供的keyframe方法，可以让你手动去指定每个阶段的属性。此外animation还封装了循环次数，反向循环等功能,更加自由和强大。
同时还可以这样想，transition是从：hover延伸出来的，不管是动态设置的还是非动态设置的过渡效果，只要过渡效果指定的属性值发生了变化就会按照Transition指定的方式进行过渡，动画就这么产生了，即transition不会自行触发，通过hover等动作或者结合js进行触发；而animation可以自行运行。
而animation是从flash延伸出来的，使用关键帧的概念，如果是非动态设置的，那么页面加载完后就会触发动画效果；如果是动态设置的，那么设置完后（假设没有设置 delay）就会触发动画效果。后面再改变属性值也不会触发动画效果了，除了一种情况（这种情况不会触发transition定义的过渡效果），就是元素从 display:none 状态变成非 display:none 状态时，也会触发动画效果。
Animation也是通过指定某一个属性（如width、left、transform等）在两个值之间如何过渡来实现动画的，与Transition不同的是，Animation可以通过keyframe显式控制当前帧的属性值，而Transition只能隐式来进行（不能指定每帧的属性值），所以相对而言Animation的功能更加灵活。另外一个区别是Animation通过模拟属性值改变来实现动画，动画结束之后元素的属性没有变化；而Transition确实改变了元素的属性值，动画结束之后元素的属性发生了变化；这一点，这在实际应用中会产生很大的区别，也决定了二者各有春秋。
极端条件下，animation占用的资源相应的比transition多，所以如果能用transition实现，就尽量用transition来实现，如果追求复杂更自由的动画，就可以用animation。
