Common SCSS modules commonly used in development

Backup only, in development, fast to find when needed

1: Clear Float

<!-------SCSS------ -. Clear {
*zoom:1;
&:after{
Content: "";
display:table;
Clear:both;
}
}<!-------HTML------ -<Divclass= "Clear"> 　　 <Divclass= "float"></Div></Div>

2: The Almighty Inlin-block

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

Inline block will have Word spacing, module layout is not used, the character icon small icons and so on can be used.

3: Vertical Centering Solution

. 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%;
}
 　　 }
}   

Mates on Min-height,lin-height, Max-height, and the like are used Better together.

But there is a scenario for the moment there is no better solution, the time of the row is centered, if the two lines automatically center vertically, redundant two lines at the end of the second line of ellipsis, this temporarily did not think of a good plan.

5: The ellipsis is exceeded in one line

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

6: Force line break

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

7: Transparency Matte

. Mask {       width:100%;     height:22px;     position:absolute;     background: rgba (0, 0, 0, 0.5);     filter:Alpha (OPACITY=50);}

8: Triangle

. 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: Small pop-up window

#alert{position:fixed;width:100%;Height:100%;Z-index: +;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: Fixed Footer

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;}

Common SCSS modules commonly used in development