css小技巧总结

wap中，如果是不需要隐藏的导航，而且不需要在其内部使用滚轮，那可以直接使用css3属性代替js

    .sticky {
        position: -webkit-sticky;
        position: -moz-sticky;
        position: -ms-sticky;
        position: -o-sticky;
        position: sticky;
        top: 15px; /* 和relative一样的用法 */
    }

网站上很多使用 new 标识，有切图的有 coding 的，不建议切图，使用下面的写法在黑背景下能有比较好的效果：

a:after {
    position: absolute;
    margin-left: 2px;
    margin-top: -3px;
    content: 'NEW';
    color: #e56a69;
    white-space: nowrap; /* 不让其换行 */
    -webkit-transform: scale(.6);
    transform: scale(.6);
    font-weight: 700;
    font-size: 14px;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0; /* 缩放后回归起点位置 */
}

均分父元素宽度的几种方法

• 百分数width
• box-flex

    .test {
        display: list-item;
        -webkit-box-flex: 1;
        width: auto;
    }

• flex-grow

    .father {
        display: -webkit-flex;
        display: flex;
    }
    .child {
        flex-grow: 1;
    }

• 如果是下面这种首尾都有元素怎么办？

  
  
  

  image
  
  

  很简单，将前面那个搅屎的子元素踢出去就行，其余元素均分宽度：

    .father {
        margin-left: 35px; /* 腾出空间 */
    }
    .child:first-child {
        margin-left: -35px; /* 第一个子元素归位 */
    }
    .child {
        width: 25%; /* 用上面你喜欢的方法均分宽度 */
    }

• 用rem写的宽度，但是还要求居中，即复杂场景，需要在草纸上计算下，可以参考造作的会员邀请web页进度条写法
  
  

  image
  
  会员邀请页

未完待续...