web前端基础篇④

1.BFC－块级元素－块级格式化上下文
布局规则：
独立区域，与外部毫不相关
内部box会在垂直方向，一个个放置
box垂直方向距离由margin决定
BFC的区域不会与float box重叠
计算BFC高度时，也要计算浮动元素
它是被触发（被生成）的
会触发生成BFC环境的元素：
根元素
float属性不为none
position为absolute或fixed
display为inline－block，table－cell，table－caption，flex，inline flex
overflow不为visible
使用overflow－hidden可以最大程度的在不影响其他元素的情况下避免生成BFC环境。

IFC－行内元素－行内格式化上下文
不需要触发
创建一个IFC的环境,让行框的高度是包含块的高度的100%,让行框内部的元素使用vertical-align:middle,就可以实现垂直居中。因此,我们可以在行框中插入一个高度100%的inline-block元素,把整个行框撑高直到包含块的100%。
2.css3浏览器前缀
－webkit－谷歌或苹果
－o－欧朋
－moz－火狐
－ms－ie9
3.边框圆角 简写属性
border－radius：10px 四个角
               10px 20px 左上右下、右上左下 对角线
               10px 20px 30px 左上、右上左下、右下
               10px 20px 30px 40px 由左上开始 顺时针方向
4.边框阴影 简写属性
box－shadow：10px 20px 30px grey
            水平  垂直  模糊  颜色
可接负值，为相反方向。
5.文字阴影
text－shadow 使用同上
6.transform 2d转换
translate偏移 rotate旋转角度 scale按比例缩放 skew倾斜转换