开发中常用到的通用 scss 模块

仅作备份，开发中，需要时能快速找到

1:清除浮动

<!-------scss-------->
.clear {
　　*zoom: 1;
　　&:after{
　　　　content: "";
　　　　display: table;
　　　　clear: both;
　　}
}
<!-------html-------->
<div class="clear">
　　<div class="float"></div>
</div>

2:万能的inlin-block

.inblock{
    display: -moz-inline-stack;
    display: inline-block;
    vertical-align: top;
    zoom: 1;
    *display: inline;
}

inline block 会存在字间距，模块布局不采用，字体内icon小图标之类的可以用。

3:垂直居中解决方案

.hv-wrap {
　　display: table;
　　overflow: hidden;  
　　margin: 0 auto;  
　　height: 100%;
   *position: relative;  position: relative;  z-index: 1;
   .hv-panel {
   　　display: table-cell;
　　　　vertical-align: middle;
　　　　*position: absolute;
　　　　top: 50%;
       .hv-inner {
       　　word-break: break-all;  
　　　　　　*position: relative;
　　　　　　*top: -50%;
　　　　}
　　}
}   

配合上 min-height,lin-height ，max-height,之类的属性一起使用更好。

但是有个场景下暂时没有比较好的解决方案，一行的时候是居中，如果两行自动垂直居中，多余两行第二行末尾省略号，这种暂时没想到好的方案。

5:一行内超出省略号

.els{ 
    white-space:nowrap;
     text-overflow:ellipsis;  
    overflow:hidden; 
}

6:强制换行

.break{　
    word-break:break-all;　
    word-wrap:break-word; 
}

7：透明度遮罩

.mask{   
    width:100%;
    height:22px;
    position:absolute;
    background: rgba(0, 0, 0, 0.5);
    filter:alpha(opacity=50);
}

8：三角

.tri{   
    border: 5px solid transparent;
    width: 0px;
    height: 0px;
    border-left: 6px solid #df1155;
    margin-right: -6px;
}

9：input textarea

input[type="text"],textarea{
    padding: 6px;
    border-radius: 2px;
    border: 1px solid #ccc;
    outline: none;
    resize:none;
}

10:小弹窗

#alert{
    position:fixed;
    width:100%;
    height:100%;
    z-index:1000;
    top:0px;
    display:none;
    .cbk{
        background:#000;
        filter:alpha(opacity=50);
        -moz-opacity:0.5;
        -khtml-opacity: 0.5;
        opacity: 0.5;
        width:100%;
        height:100%;
        position:absolute;
        z-index:1;
    }
    .panel{
        width:366px;
        position:absolute;
        z-index:2;
        top:25%;
        left:50%;
        margin-left:-150px;
        background: #fff;
        border-radius:3px;
        padding-bottom:8px;
    }
}

11：固定页脚

html,body{
    height: 100%;
    width: 100%;
}
body{  
    padding-bottom: 110px; 
    box-sizing: border-box;  
    min-height: 100%; 
    height: auto; 
    position: relative;
}
#footer{  
    position: absolute;
    bottom: 0px;
}