一、BFC：
BFC(Block formatting context)直译为"块级格式化上下?文"。它是?一个独?立的渲染区域，只有Block-level box参
与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干
BFC布局规则：
内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。
即使存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器?里?面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算
注：overflow：hidden（可以触发BFC环境）
1.独立区域
2.需要触发
二、IFC：
IFC(inline formatting context),即行内格式化上下文，与之对应的是BFC(block formating context),块格式化上下文。
思路：创建一个IFC的环境，让行框的高度是包含块的?高度的100%，让行框内部的元素使用vertical-align：middle，就可以实
现垂直居中。因此，我们可以在行框中插入一个高度100%的inline-block元素，把整个行框撑高直到包含块的100%。
IFC；行内元素；行内格式化上下文
1.不需要触发
2.可以转换成BFC环境，行内元素加<div>
三、CSS3边框
属性：
border-image 设置所有 border-image-* 属性的简写属性。 3
border-radius 设置所有四个 border-*-radius 属性的简写属性。 3
box-shadow 向方框添加一个或多个阴影
四、CSS 2D转换
属性：
translate(x,y) 定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n) 定义 2D 转换，沿着 X 轴移动元素。
translateY(n) 定义 2D 转换，沿着 Y 轴移动元素。
3D转换
属性：
translate3d(x,y,z) 定义 3D 转化。
translateX(x) 定义 3D 转化，仅使用用于 X 轴的值。
translateY(y) 定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z) 定义 3D 转化，仅使用用于 Z 轴的值。
