css样式常规类名归纳

搭建项目初期，整理出css样式类，通过直接添加类名设置样式，方便后期样式维护，后续补充~

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    list-style: none;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
}

* {
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
}

ol,
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

a:focus,
a:active {
    outline: none;
}

a,
a:focus,
a:hover {
    cursor: pointer;
    color: inherit;
    text-decoration: none;
}

div:focus {
    outline: none;
}

/* 浮动*/
.fr {
    float: right;
}

.fl {
    float: left;
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

/* 输入框*/
textarea,
select,
input {
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
}

input::-webkit-input-placeholder {
    color: #AAAAAA;
}

input:focus::-webkit-input-placeholder {
    color: #EEEEEE;
}

img {
    border: none;
}

input {
    outline: none;
    border: none;
}

*:focus {
    outline: none;
}

.clear {
    clear: both;
}

/*a标签去掉蓝边*/
a {
    text-decoration: none;
    color: #000;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
}

em,
i,
b {
    font-style: normal;
    font-weight: normal;
}

/* 显示/隐藏*/
.displayBlock {
    display: block;
}

.displayNone {
    display: none;
}

/* 鼠标样式*/
.cursorPointer {
    cursor: pointer;
}

.cursorDefault {
    cursor: default;
}

.cursorDotAllowed {
    cursor: not-allowed;
}

/* Padding */
.padding0 {
    padding: 0px;
}

.padding5 {
    padding: 5px;
}

.padding10 {
    padding: 10px;
}

.padding20 {
    padding: 20px;
}

.padding30 {
    padding: 20px;
}

.padding40 {
    padding: 40px;
}
/* Padding-top*/
.paddingT0 {
    padding-top: 0px;
}

.paddingT5 {
    padding-top: 5px;
}

.paddingT10 {
    padding-top: 10px;
}

.paddingT20 {
    padding-top: 20px;
}

.paddingT30 {
    padding-top: 20px;
}

.paddingT40 {
    padding-top: 40px;
}
/* Padding-bottom*/
.paddingB0 {
    padding-bottom: 0px;
}

.paddingB5 {
    padding-bottom: 5px;
}

.paddingB10 {
    padding-bottom: 10px;
}

.paddingB20 {
    padding-bottom: 20px;
}

.paddingB30 {
    padding-bottom: 20px;
}

.paddingB40 {
    padding-bottom: 40px;
}
/* Padding-left*/
.paddingL0 {
    padding-left: 0px;
}

.paddingL5 {
    padding-left: 5px;
}

.paddingL10 {
    padding-left: 10px;
}

.paddingL20 {
    padding-left: 20px;
}

.paddingL30 {
    padding-left: 20px;
}

.paddingL40 {
    padding-left: 40px;
}

/* Padding-right*/
.paddingR0 {
    padding-right: 0px;
}

.paddingR5 {
    padding-right: 5px;
}

.paddingR10 {
    padding-right: 10px;
}

.paddingR20 {
    padding-right: 20px;
}

.paddingR30 {
    padding-right: 20px;
}

.paddingR40 {
    padding-right: 40px;
}

/* margin */
.margin0 {
    margin: 0px;
}

.margin5 {
    margin: 5px;
}

.margin10 {
    margin: 10px;
}

.margin20 {
    margin: 20px;
}

.margin30 {
    margin: 20px;
}

.margin40 {
    margin: 40px;
}
/* margin-top*/
.marginT0 {
    margin-top: 0px;
}

.marginT5 {
    margin-top: 5px;
}

.marginT10 {
    margin-top: 10px;
}

.marginT20 {
    margin-top: 20px;
}

.marginT30 {
    margin-top: 20px;
}

.marginT40 {
    margin-top: 40px;
}
/* margin-bottom*/
.marginB0 {
    margin-bottom: 0px;
}

.marginB5 {
    margin-bottom: 5px;
}

.marginB10 {
    margin-bottom: 10px;
}

.marginB20 {
    margin-bottom: 20px;
}

.marginB30 {
    margin-bottom: 20px;
}

.marginB40 {
    margin-bottom: 40px;
}
/* margin-left*/
.marginL0 {
    margin-left: 0px;
}

.marginL5 {
    margin-left: 5px;
}

.marginL10 {
    margin-left: 10px;
}

.marginL20 {
    margin-left: 20px;
}

.marginL30 {
    margin-left: 20px;
}

.marginL40 {
    margin-left: 40px;
}

/* margin-right*/
.marginR0 {
    margin-right: 0px;
}

.marginR5 {
    margin-right: 5px;
}

.marginR10 {
    margin-right: 10px;
}

.marginR20 {
    margin-right: 20px;
}

.marginR30 {
    margin-right: 20px;
}

.marginR40 {
    margin-right: 40px;
}

/* width宽度*/
.W10 {
    width: 10%;
}

.W20 {
    width: 20%;
}

.W30 {
    width: 30%;
}

.W40 {
    width: 40%;
}

.W50 {
    width: 50%;
}

.W60 {
    width: 60%;
}

.W70 {
    width: 70%;
}

.W80 {
    width: 80%;
}

.W90 {
    width: 90%;
}

.W100 {
    width: 100%;
}

/* height高度*/
.H10 {
    height: 10%;
}

.H20 {
    height: 20%;
}

.H30 {
    height: 30%;
}

.H40 {
    height: 40%;
}

.H50 {
    height: 50%;
}

.H60 {
    height: 60%;
}

.H70 {
    height: 70%;
}

.H80 {
    height: 80%;
}

.H90 {
    height: 90%;
}

.H100 {
    height: 100%;
}

/* font-size字体大小*/
.font12 {
    font-size: 12px;
}

.font14 {
    font-size: 14px;
}

.font16 {
    font-size: 16px;
}

.font18 {
    font-size: 18px;
}

.font20 {
    font-size: 20px;
}

.fontB {
    font-weight: 600;
}

/* 文本省略*/
.textEllipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 文本对齐*/
.textCenter {
    text-align: center;
}

.textLeft {
    text-align: left;
}

.textRight {
    text-align: right;
}

/* 定位*/
.positionRelative {
    position: relative;
}

.positionAbsolute {
    position: absolute;
}

.top0 {
    top: 0px;
}

.top5 {
    top: 5px;
}

.top10 {
    top: 10px;
}

.top20 {
    top: 20px;
}

.bottom0 {
    bottom: 0px;
}

.bottom5 {
    bottom: 5px;
}

.bottom10 {
    bottom: 10px;
}

.bottom20 {
    bottom: 20px;
}

.left0 {
    left: 0px;
}

.left5 {
    left: 5px;
}

.left10 {
    left: 10px;
}

.left20 {
    left: 20px;
}

.right0 {
    right: 0px;
}

.right5 {
    right: 5px;
}

.right10 {
    right: 10px;
}

.right20 {
    right: 20px;
}

/* 弹性布局 */
.flex {
    display: flex;
}

/*flex-direction 属性指定了弹性子元素在父容器中的位置。*/
.flexRow {
    flex-direction: row;
    -webkit-flex-direction: row;
}

.flexColumn {
    flex-direction: column;
    -webkit-flex-direction: column;
}

.flexNowrap {
    flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;
}

.flexWrap {
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
}

.flexReverse {
    flex-wrap: wrap-reverse;
    -webkit-flex-wrap: wrap-reverse;
}

.justifyStart {
    justify-content: flex-start;
    -webkit-justify-content: flex-start
}

.justifyEnd {
    justify-content: flex-end;
    -webkit-justify-content: flex-end;
}

.justifyCenter {
    justify-content: center;
    -webkit-justify-content: center;
}

.justifyBetween {
    justify-content: space-between;
    -webkit-justify-content: space-between;
}

.justifyAround {
    justify-content: space-around;
    -webkit-justify-content: space-around;
}

.alignStart {
    align-items: flex-start;
    -webkit-align-items: flex-start
}

.alignEnd {
    align-items: flex-end;
    -webkit-align-items: flex-end;
}

.alignCenter {
    align-items: center;
    -webkit-align-items: center;
}

.alignBaseline {
    align-items: baseline;
    -webkit-align-items: baseline;
}

.alignStretch {
    align-items: stretch;
    -webkit-align-items: stretch;
}

/*align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。*/
.contentStart {
    align-content: flex-start;
    -webkit-align-content: flex-start;
}

.contentEnd {
    align-content: flex-end;
    -webkit-align-content: flex-end;
}

.contentCenter {
    align-content: center;
    -webkit-align-content: center;
}

.contentBetween {
    align-content: space-between;
    -webkit-align-content: space-between;
}

.contentAround {
    align-content: space-around;
    -webkit-align-content: space-around;
}

.contentStretch {
    align-content: stretch;
    -webkit-align-content: stretch;
}

/*flex 属性用于指定弹性子元素如何分配空间。*/
.flex1 {
    flex: 1
}

.flex2 {
    flex: 2
}

.flex3 {
    flex: 3
}