CSS3知识点总结

有很长一段时间没有更新博客了，近一段时间开始重新梳理知识点和写博客了，新的博客地址：欢迎访问。

盒子模型

在CSS中盒模型被分为两种，第一种是w3c的标准模型，另一种是IE的传统模型，它们相同之处都是对元素计算尺寸的模型，具体说不是对元素的width、height、padding和border以及元素实际尺寸的计算关系，它们不同之处是两者的计算方法不一致。
###W3C标准盒模型 ##
外盒尺寸计算（元素空间尺寸）
element空间高度＝内容高度＋内距＋边框＋外距
element空间宽度＝内容宽度＋内距＋边框＋外距
内盒尺寸计算（元素大小）
element高度＝内容高度＋内距＋边框（height为内容高度）
element宽度＝内容宽度＋内距＋边框（width为内容宽度）
###IE传统下盒模型（IE6以下，不包含IE6版本或QuirksMode下IE5.5+） ##
外盒尺寸计算（元素空间尺寸）
element空间高度＝内容高度＋外距（height包含了元素内容宽度、边框、内距）
element宽间宽度＝内容宽度＋外距（width包含了元素内容宽度、边框、内距）
内盒尺寸计算（元素大小）
element高度＝内容高度（height包含了元素内容宽度、边框、内距）
element宽度＝内容宽度（width包含了元素内容宽度、边框、内距）
###CSS3中box-sizing属性 ##

• content-box
  默认值，其让元素维持W3C的标准盒模型，也就是说元素的宽度和高度（width/height）等于元素边框宽度（border）加上元素内距（padding）加上元素内容宽度或高度（content width/ height），也就是element width/height = border + padding + content width / height
• border-box
  重新定义CSS2.1中盒模型组成的模式，让元素维持IE传统的盒模型（IE6以下版本和IE6-7怪异模式），也就是说元素的宽度或高度等于元素内容的宽度或高度。从上面盒模型介绍可知，这里的内容宽度或高度包含了元素的border、padding、内容的宽度或高度（此处的内容宽度或高度＝盒子的宽度或高度—边框—内距）。

content-box和border-box区别如下图所示：

CSS3动画

###Animation与Transition的异同##
Animation功能与Transition功能相同，都是通过改变元素的属性值来实现动画效果的，他们的区别在于：使用Transition功能时只能通过指定属性的开始值和结束值，然后在这两个属性值之间进行平滑过渡的方式来实现动画效果，因此不能实现比较复杂的动画效果。
Animation功能通过定义多个关键帧以及定义每个关键帧中元素的属性值来实现更为复杂的动画效果
Animation个属性值：
两个必要属性：

• animation-name 动画名称（关键帧名称）
• animation-duration 动画持续时间

其他属性值：

• animation-play-state 播放状态（ running 播放 和paused 暂停 ），可以用来控制动画暂停。
• animation-timing-function 动画运动形式
• animation-delay 动画延迟
• animation-iteration-count 重复次数
• animation-direction 播放前重置(alternate 动画直接从上一次停止的位置开始执行)
  ###CSS3动画小技巧##
• animation-delay 属性值允许负值，使动画跳过指定秒数马上开始
  Demo
  这是一个加载动画的小实