JavaScript常用工具方法封装

3. 公共样式提取

/* 禁止选中文本 */ 
.usn{ 
    -webkit-user-select:none; 
    -moz-user-select:none; 
    -ms-user-select:none; 
    -o-user-select:none; 
    user-select:none; 
} 
/* 浮动 */ 
.fl { float: left; } 
.fr { float: right; } 
.cf { zoom: 1; } 
.cf:after { 
    content:"."; 
    display:block; 
    clear:both; 
    visibility:hidden; 
    height:0; 
    overflow:hidden; 
} 
 
/* 元素类型 */ 
.db { display: block; } 
.dn { display: none; } 
.di { display: inline } 
.dib {display: inline-block;} 
.transparent { opacity: 0 } 
 
/*文字排版、颜色*/ 
.f12 { font-size:12px } 
.f14 { font-size:14px } 
.f16 { font-size:16px } 
.f18 { font-size:18px } 
.f20 { font-size:20px } 
.fb { font-weight:bold } 
.fn { font-weight:normal } 
.t2 { text-indent:2em } 
.red,a.red { color:#cc0031 } 
.darkblue,a.darkblue { color:#039 } 
.gray,a.gray { color:#878787 } 
.lh150 { line-height:150% } 
.lh180 { line-height:180% } 
.lh200 { line-height:200% } 
.unl { text-decoration:underline; } 
.no_unl { text-decoration:none; } 
.tl { text-align: left; } 
.tc { text-align: center; } 
.tr { text-align: right; } 
.tj { text-align: justify; text-justify: inter-ideograph; } 
.wn { /* 强制不换行 */ 
    word-wrap:normal; 
    white-space:nowrap; 
} 
.wb { /* 强制换行 */ 
    white-space:normal; 
    word-wrap:break-word; 
    word-break:break-all; 
} 
.wp { /* 保持空白序列*/ 
    overflow:hidden;text-align:left;white-space:pre-wrap;word-wrap:break-word;word-break:break-all; 
} 
.wes { /* 多出部分用省略号表示 , 用于一行 */ 
    overflow:hidden; 
    word-wrap:normal; 
    white-space:nowrap; 
    text-overflow:ellipsis; 
} 
.wes-2 { /* 适用于webkit内核和移动端 */ 
    display: -webkit-box; 
    -webkit-box-orient: vertical; 
    -webkit-line-clamp: 2; 
    overflow: hidden; 
}  
.wes-3 { 
    display: -webkit-box; 
    -webkit-box-orient: vertical; 
    -webkit-line-clamp: 3; 
    overflow: hidden; 
} 
.wes-4 { 
    display: -webkit-box; 
    -webkit-box-orient: vertical; 
    -webkit-line-clamp: 4; 
    overflow: hidden; 
} 
 
/* 溢出样式 */ 
.ofh { overflow: hidden; } 
.ofs {overflow: scroll; } 
.ofa {overflow: auto; } 
.ofv {overflow: visible; } 
 
/* 定位方式 */ 
.ps {position: static; } 
.pr {position: relative;zoom:1; } 
.pa {position: absolute; } 
.pf {position: fixed; } 
 
/* 垂直对齐方式 */ 
.vt {vertical-align: top; } 
.vm {vertical-align: middle; } 
.vb {vertical-align: bottom; } 
 
/* 鼠标样式 */ 
.csd {cursor: default; } 
.csp {cursor: pointer; } 
.csh {cursor: help; } 
.csm {cursor: move; } 
 
/* flex布局 */ 
.df-sb { 
    display:flex; 
    align-items: center; 
    justify-content: space-between; 
} 
.df-sa { 
    display:flex; 
    align-items: center; 
    justify-content: space-around; 
} 
 
/* 垂直居中 */ 
.df-c { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 
.tb-c { 
    text-align:center; 
    display:table-cell; 
    vertical-align:middle; 
} 
.ts-c { 
    position: absolute; 
    left: 50%; top: 50%; 
    transform: translate(-50%, -50%); 
} 
.ts-mc { 
    position: absolute; 
    left: 0;right: 0; 
    bottom: 0; top: 0; 
    margin: auto; 
} 
 
/* 辅助 */ 
.mask-fixed-wrapper { 
    width: 100%; 
    height: 100%; 
    position: fixed; 
    left:0;top:0; 
    background: rgba(0, 0, 0, 0.65); 
    z-index: 999; 
} 
.bg-cover { 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: center center; 
} 
.bg-cover-all { 
    background-size: 100% 100%; 
    background-repeat: no-repeat; 
    background-position: center center; 
}  

（编辑：葫芦岛站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!