css的高级技巧；
双飞翼布局：左右中
技巧：负边距（元素又float样式时又想移动到上一行，可加样式：margin-left：-100%）
等高：（场景是：一行排列的块级元素高度不一；操作：每个元素加：）
margin：不影响盒模型；
padidng：影响盒模型；
padding-bottom：9999px；margin-bottom：-9999px；父元素：overflow：hidden
flex布局：适用于移动端
图标可用方式：svg，iconfont，cssfont，img
bfc：块级别的盒参与块级别的渲染方式。
触发bfc的情景：
1、根元素；
2、float不为none
3、position为absolute或fixed
4、display为inline-block，table-cell，table-caption，flex，inline-flex
5、overflow不为visible
bfc布局规则：
每个元素的margin box的左边，与包含块border box的左边接触（对于从左往右的格式化，否则相反），即使存在浮动也是如此；bfc的区域不会与float box 重叠。
计算bfc的高度时，浮动元素也参与计算。
情景题：子元素浮动，父元素高度塌陷：原因：父元素生成了bfc，区域内的浮动元素也会参与计算。
margin重叠：
给下边的盒子外层套一个盒子，且加上样式overflow：hidden；原因：这样就能隔离出两个bfc，bfc时相对独立的，所以不受影响。
总结：bfc就是页面上一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
CSS HINT
1、不要使用多个class选择，如：a.foo.boo,在ie6及一下不能解释；
2、移除空的css规则，如：f{}；
3、正确使用显示属性，如：display：inline不和height，width，float，margin，padding等使用；
4、避免过多的浮动；
5、谜面使用过多的字号；
6、避免使用过多的字体；
7、避免使用id作为样式选择器；
8、标题元素只定义一次；
9、使用width：100%要小心；
10、属性值为0时不需要写单位；
