Web前端Public.css常用样式集锦

禁止选中文本

/* 禁止选中文本 */
.usn{
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    -o-user-select:none;
    user-select:none;
}

垂直居中

/* 垂直居中（4种） */
.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;
}

flex布局

/* 两端对齐 */
.df-sb {
    display:flex;
    align-items: center;
    justify-content: space-between;
}
/* 两侧间隔相等 */
.df-sa {
    display:flex;
    align-items: center;
    justify-content: space-around;
}

定位方式

/* 定位方式 */
.ps {position: static; }
.pr {position: relative;zoom:1; }
.pa {position: absolute; }
.pf {position: fixed; }

浮动

/* 浮动 */
.fl { float: left; }
.fr { float: right; }
/* 清除浮动 */
.clearfix { zoom: 1; }
.clearfix:after {
    content:".";
    display:block;
    clear:both;
    visibility:hidden;
    height:0;
    overflow:hidden;
}

文字排版

/* 文字排版 */
.tl { text-align: left; }
.tc { text-align: center; }
.tr { text-align: right; }
.tj { text-align: justify; text-justify: inter-ideograph; }

/*注：inter-ideograph : 为表意字文本提供完全两端对齐。他增加或减少表意字和词间的空格*/

元素类型

/* 元素类型 */
.db { display: block; }
.dn { display: none; }
.di { display: inline }
.dib {display: inline-block;}

换行

/* 强制不换行 */
.wn { 
    word-wrap:normal;
    white-space:nowrap;
}
/* 强制换行 */
.wb { 
    white-space:normal;
    word-wrap:break-word;
    word-break:break-all;
}

文字溢出省略…

/* 用于一行省略 */
.wes {
    overflow:hidden;
    word-wrap:normal;
    white-space:nowrap;
    text-overflow:ellipsis;
}
/* 用于二行省略 */
.wes-2 {
    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;
}

垂直对齐方式

/* 垂直对齐方式 */
.vt {vertical-align: top; }
.vm {vertical-align: middle; }
.vb {vertical-align: bottom; }

鼠标样式

/* 鼠标样式 */
.csd {cursor: default; }
.csp {cursor: pointer; }
.csh {cursor: help; }
.csm {cursor: move; }