CSS3核心高级技巧

CSS3开发常备核心技能

• 早期的双飞翼布局 + CSS HACK
• 基于移动端的PX与rem转换兼容方案
• 弹性盒模型与reset的选择
• 自制的ICON-FONT与常用字体排版
• CSS代码检测与团队项目规范
• CSS绘制特殊图形高级技巧
• BFC IFC GFC FFC

双飞翼布局 + CSS HACK

双飞翼布局在IE6之前 , 在flex时代前 , 可以说这个布局是首屈一指的 ; 因为在那个时候来说 , 想要做这个双飞翼部署 , 做兼容的过程包括你去做整个垂直居中和水平居中等这些最核心的布局 , 对于它来说实现是非常完整的

双飞翼布局用到css核心的知识点

• position
• float
• 负边距
• 登高
• 盒子模型
• 清除浮动

总结双飞翼布局
对于前端来说 , 绝大多数来说都是跟页面打交道 , 以前前端最多的研究也是布局上面 , 当然面试最多的问题也是问怎么布局( 吐槽 : 好怀念那些时光 , 只有我和HTML (┬＿┬) ) , 比如一列布局 , 两列布局 , 多列布局 , 双飞翼就是三列布局 , 如下图

双飞翼.png

比如 : left部分是

 .left{
    float: left;
 }

right部分是

 .right{
    float: right;
 }

然后 left + body + right 整个外层div width : 100%; left和right会因为浮动原因飘上去 , 这就可以形成了左右均占一大块 , 中间就是主体部分

这就会出现如下问题

div自动上浮.png

如果先写B块 , A和C块就会被B盖住 , 但是如果A或C先写 , B块又会自动上浮 , 这时候就有一个圣杯布局 如下

淘宝的圣杯布局.png

关于一个3D加速的问题

如果页面某些div需要做频繁的动画 , 需要在做动画的DIV添加一个transform: translate3d(0px, 0px, 0px)
这样会让我们的GPU参与合成层 , 然后减少重绘重排 , 查看重绘重排 , 打开谷歌控制台 , 打开

重排重绘

把这两个勾选即可看到重绘重排