常用css类合集

简介：每当我们新开一个项目时，无论我们是pc端还是移动端网站，无论是引用前端框架还是自己开发，总会用到某些公用的样式，所以我将自己常用的进行了整理。

/*border*/

.border0 {
    border: 0 !important;
}


/* color */

.text-black {
    color: #333333;
}

.text-grey-weight {
    color: #666666;
}

.text-grey {
    color: #999999;
}

.bgcolor-grey {
    background: #f4f4f4;
}

.bgcolor-white {
    background: #ffffff !important;
}


/* line-height */

.small-line-height {
    line-height: 1em;
}

.default-line-height {
    line-height: 1.5em;
}

.big-line-height {
    line-height: 2em;
}


/*font-size*/

.font12 {
    font-size: 12px;
}

.font13 {
    font-size: 13px;
}

.font14 {
    font-size: 14px;
}

.font14 {
    font-size: 14px;
}

.font15 {
    font-size: 15px;
}

.font16 {
    font-size: 16px;
}

.font17 {
    font-size: 17px;
}

.font18 {
    font-size: 18px;
}

.font20 {
    font-size: 20px;
}

.font22 {
    font-size: 22px;
}

.font24 {
    font-size: 24px;
}


/*padding margin*/

.margin0 {
    margin: 0 !important;
}

.padding0 {
    padding: 0 !important;
}

.padding-right0 {
    padding-right: 0 !important;
}

.margin-common-big {
    margin: 15px;
}

.margin-common-top {
    margin-top: 15px;
}

.margin-common-right {
    margin-right: 15px;
}

.margin-common-bottom {
    margin-bottom: 15px;
}

.margin-common-left {
    margin-left: 15px;
}

.margin-big {
    margin: 20px;
}

.margin-big-top {
    margin-top: 20px;
}

.margin-big-right {
    margin-right: 20px;
}

.margin-big-bottom {
    margin-bottom: 20px;
}

.margin-big-left {
    margin-left: 20px;
}

.margin {
    margin: 10px;
}

.margin-top {
    margin-top: 10px !important;
}

.margin-right {
    margin-right: 10px;
}

.margin-bottom {
    margin-bottom: 10px !important;
}

.margin-left {
    margin-left: 10px;
}

.margin-small {
    margin: 5px;
}

.margin-small-top {
    margin-top: 5px;
}

.margin-small-right {
    margin-right: 5px;
}

.margin-small-bottom {
    margin-bottom: 5px;
}

.margin-small-left {
    margin-left: 5px;
}


/* padding */

.padding-common-big {
    padding: 15px;
}

.padding-common-top {
    padding-top: 15px;
}

.padding-common-right {
    padding-right: 15px;
}

.padding-common-bottom {
    padding-bottom: 15px;
}

.padding-common-left {
    padding-left: 15px;
}

.padding-big {
    padding: 20px;
}

.padding-big-top {
    padding-top: 20px;
}

.padding-big-right {
    padding-right: 20px !important;
}

.padding-big-bottom {
    padding-bottom: 20px;
}

.padding-big-left {
    padding-left: 20px !important;
}

.padding {
    padding: 10px !important;
}

.padding-top {
    padding-top: 10px;
}

.padding-right {
    padding-right: 10px;
}

.padding-bottom {
    padding-bottom: 10px;
}

.padding-left {
    padding-left: 10px;
}

.padding-small {
    padding: 5px;
}

.padding-small-top {
    padding-top: 5px;
}

.padding-small-right {
    padding-right: 5px;
}

.padding-small-bottom {
    padding-bottom: 5px;
}

.padding-small-left {
    padding-left: 5px;
}


/*position*/

.position-relative {
    position: relative;
}

.position-absolute {
    position: absolute;
}

.position-fixed {
    position: fixed;
}

.inline-block {
    display: inline-block !important;
}

.disblock {
    display: block !important;
}

.disflex {
    display: flex !important;
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left !important;
}

.text-right {
    text-align: right !important;
}

.pull-left {
    float: left;
}

.pull-right {
    float: right;
}