geekman

整   理：晋 哲

时   间：2017-01-06

说   明：使用弹性布局，设置自适应布局、水平垂直居中等样式

弹性布局很早就出来了，但之前一直没有使用Flexbox主要还是考虑兼容性，且兼容性写法太冗余。目前，旧版的属性都已被重新修改，所有浏览器的兼容性也得到很大支持，移动端可以放心使用了，当然浏览器前缀还是要加上的。

能够被运用到的布局结构，如响应式布局、选项卡分布、水平垂直居中等，优先考虑使用flex，代替之前一些特殊布局所使用的传统解决方案：使用display属性或position属性或float属性。

flex常用属性

display：将元素设置为内联或者块flexbox容器元素
flex：复合属性。设置或检索弹性盒模型对象的子元素如何分配空间。
justify-content：控制flex容器内item的水平对齐方式
align-items：控制flex容器内item的垂直对齐方式
flex-direction：定义弹性盒子元素的排列方向

其属性值：

display：flex | inline-flex
flex：none | < flex-grow > | < flex-shrink > | < flex-basis >
justify-content：flex-start | flex-end | center | space-between | space-around
align-items：    flex-start | flex-end | center | baseline | stretch
flex-direction：row | row-reverse | column | column-reverse

常见用法：
一、自适应布局

<!-- HTML -->
<div class="box">
    <div class="subnav"></div>
    <div class="content"></div>
</div>

<!-- CSS -->
.box{
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
}
.subnav{
    width: 100px;
    height: 100px;
    background: #000;
}
.content{
    background: #f60;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}

解释：subnav固定宽度，content自适应撑满剩余空间

二、使用 Flexbox 的水平垂直居中布局

<!-- HTML -->
<div class="box">
    <div class="content"></div>
</div>

<!-- CSS -->
.box{
    height: 200px;
    background: #eee;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}
.content{
    width: 100px;
    height: 100px;
    background: #f60;
}

整   理：晋 哲

时   间：2017-01-06

说   明：使用Sass mixin 的方式将一些固定样式用法封装起来，能够提高样式复用性。

如水平垂直居中的示例：
常用的水平垂直居中方式是使用CSS transform属性或负向margin的方式，将这两种方法集成起来，通过判断是否有宽高值生成对应的样式。

/*定义mixin*/
@mixin center($width: null, $height: null){
     position: absolute;
     top: 50%;
     left: 50%;

     @if not $width and not $height{
          transform: translate(-50%, -50%);
     }
     @else if $width and $height{
          width: $width;
          height: $height;
          margin: -($height/2) #{0 0} -($width/2);
     }
     @else if not $height{
          width: $width;
          margin-left: -($width/2);
          transform: translate(0, -50%);
     }
     @else{
          height: $height;
          margin-top: -($height/2);
          transform: translate(-50%, 0);
     }
}

/*使用*/
.box1{
     @include center;
}
.box2{
     @include center(200px);
}
.box3{
     @include center(null, 300px);
}
.box4{
     @include center(200px, 300px);
}

整   理：晋 哲

时   间：2017-01-06

说   明：利用steps()函数的特效可以制作类gif动画的动态效果，搭配sprite图使用。

作用优势：代替gif动图的繁琐制作，调整动画便捷，较gif更清晰，图片进行压缩，文件可更小。

使用说明：animation的steps()函数内部的第一个参数设置为正整数，可以计算等分@keyframes规则内from到to的差值，最终进行动画切换。

如示例代码：

.dragon{
    width: 178px;
    height: 188px;
    background: url(images/dragon.png) 0 0 no-repeat;
    animation: run_dragon 2s steps(10) infinite;
}
@keyframes run_dragon{
    0%  {background-position: 0 0;}
    100%{background-position: -1780px 0;}
}

整   理：晋 哲

时   间：2017-01-06

说   明：主要是input的焦点事件触发弹出键盘导致fixed定位失效，安卓没有该bug

方法一：使用absolute模拟fixed
1、当触发事件时，将固定定位的元素设置为【position:absolute;top:0;】
若页面高度一屏之内，则事件结束后还原样式即可；若页面很长则继续下一步

2、当页面滚动时，添加滚动事件，更新top值，使其看似一直在顶部

window.onscroll=function(){
    $(".fixed").css("top",$(window).scrollTop());
}

缺点：因为top值时实时计算的，页面滚动时，会有缓冲时间。

方法二：将溢出内容部分设置内部滚动，设置样式【…height:100vh;overflow:auto;】
因为键盘弹出时fixed失效，元素的位置自动根据scrollTop滚动的距离去定位，所以当页面高度为屏幕高度时，系统自动的定位也就在顶部了。

优点：该方法不需要再去设置复杂的js，仅设置样式即可，也是最常用的方法。

缺点：正常情况下是没有问题的，需注意的是商品列表中商品图片使用了lazyload.js，当内容部分设置overflow后，懒加载就失效了，因为它默认是整段body进行滚动监听的。解决方法：lazyload.js有参数【container】可以设置内部框架懒加载的。

解决前：

解决后：