第三周

BFC

bfc是一个块级格式化上下文，它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

 bfc：指它里面的子元素不会影响到外面的元素，
        加上一个overflow:hilden该元素的子元素是一个bfc下面
       只要触发的是个bfc那么它对外面都没有影响。

块级元素，在浏览器中通常是垂直布局，然后可以用margin来控制块级元素之间的间距

而行内元素是以水平的方式布局，垂直方向的margin，padding都是无效的，并且设置的宽高也是无效的。

IFC

IFC为"内联格式化上下文"，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来的

 1.IFC中的line box一般左右都贴紧整个IFC，但是会因为float元素而扰乱。float元素会位于IFC与与line box之间，使得line box宽度缩短。 
2.水平居中：当一个块要在水平居中时，设置为inline-block则会在外层产生IFC，通过text-align可以水平居中。
3.垂直居中：创建一个IFC，用其中一个元素撑开父元素的高度，然后设置其vertical-align:middle，其他行内元素则可以在此父元素下垂直居中。

CSS3 @keyframes 规则

如需在 CSS3 中创建动画，您需要学习 @keyframes 规则。

@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

当在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。

通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：

• 规定动画的名称
• 规定动画的时长 

必须定义动画的名称和时长。如果忽略时长，则动画不会允许，因为默认值是 0。

用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。

0% 是动画的开始，100% 是动画的完成。

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

@-moz-keyframes myfirst 
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

@-o-keyframes myfirst 
{
from {background: red;}
to {background: yellow;}

CSS3 使用 3D 转换来对元素进行格式化。

3D 转换方法：

• rotateX()
• rotateY() 

rotateX() 方法

通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转。

rotateY() 旋转

通过 rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转。

2D 转换

 2D 转换方法：

• translate()
• rotate()
• scale()
• skew()
• matrix() 

translate() 方法

通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：

div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px);		
-webkit-transform: translate(50px,100px);	
-o-transform: translate(50px,100px);		
-moz-transform: translate(50px,100px);

div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg);		
-webkit-transform: rotate(30deg);	
-o-transform: rotate(30deg);		
-moz-transform: rotate(30deg);

scale() 方法

通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：

div
{
transform: scale(2,4);
-ms-transform: scale(2,4);	
-webkit-transform: scale(2,4);	
-o-transform: scale(2,4);	
-moz-transform: scale(2,4);}

skew() 方法

通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：

实例

div
{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg);	
-webkit-transform: skew(30deg,20deg);	
-o-transform: skew(30deg,20deg);	
-moz-transform: skew(30deg,20deg);	
}

第三周

原文：http://www.cnblogs.com/zcb912/p/5024708.html