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