一些常用的css类总结
.grid_2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.grid_3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.grid_4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.grid_5 {
display: grid;
grid-template-columns: repeat(5, 1fr);
}
.grid_6 {
display: grid;
grid-template-columns: repeat(6, 1fr);
}
.flex_sub {
flex: 1;
}
.flex_wrap {
flex-wrap: wrap;
}
.flex_start {
display: flex;
align-items: center;
justify-content: flex-start;
}
.flex_start_clm {
display: flex;
align-items: start;
justify-content: flex-start;
flex-direction: column;
}
.flex_center {
display: flex;
align-items: center;
justify-content: center;
}
.flex_center_clm {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.flex_around {
display: flex;
align-items: center;
justify-content: space-around;
}
.flex_around_clm {
display: flex;
align-items: center;
justify-content: space-around;
flex-direction: column;
}
.flex_between {
display: flex;
align-items: center;
justify-content: space-between;
}
.flex_between_clm {
display: flex;
align-items: flex-start;
justify-content: space-between;
flex-direction: column;
}
.overHide {
overflow: hidden;
}
.prelative {
position: relative;
}
.top50 {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.left50 {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.topleft50 {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.clearfix:after {
content: '.';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
.h100 {
height: 100%;
}
.w100 {
width: 100%;
}
.radius_4 {
border-radius: 4px;
overflow: hidden;
}
.radius_8 {
border-radius: 8px;
overflow: hidden;
}
.radius_10 {
border-radius: 10px;
overflow: hidden;
}
.radius_half {
border-radius: 50%;
overflow: hidden;
}
.radius_round {
border-radius: 9999px;
overflow: hidden;
}
.shadow_gray {
box-shadow: 0 2px 10px 0 rgb(48 48 48 / 6%);
}
.shadow_box {
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
}
.shadow_ccc {
box-shadow: 0 0 8px #ccc;
}
.cut_two {
text-align: justify;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
word-break: break-all;
}
.cut_one {
text-align: justify;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
word-break: break-all;
}
.text_cut {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.flex_gap_xs {
gap: 5px;
}
.flex_gap_sm {
gap: 10px;
}
.flex_gap {
gap: 15px;
}
.flex_gap_xl {
gap: 20px;
}
.margin_top_xs {
margin-top: 5px;
}
.margin_top_sm {
margin-top: 10px;
}
.margin_top {
margin-top: 15px;
}
.margin_top_xl {
margin-top: 20px;
}
.margin_bottom_xs {
margin-bottom: 5px;
}
.margin_bottom_sm {
margin-bottom: 10px;
}
.margin_bottom {
margin-bottom: 15px;
}
.margin_bottom_xl {
margin-bottom: 20px;
}
.margin_left_xs {
margin-left: 5px;
}
.margin_left_sm {
margin-left: 10px;
}
.margin_left {
margin-left: 15px;
}
.margin_left_xl {
margin-left: 20px;
}
.margin_right_xs {
margin-right: 5px;
}
.margin_right_sm {
margin-right: 10px;
}
.margin_right {
margin-right: 15px;
}
.margin_right_xl {
margin-right: 20px;
}
.margin_lr_xs {
margin-left: 5px;
margin-right: 5px;
}
.margin_lr_sm {
margin-left: 10px;
margin-right: 10px;
}
.margin_lr {
margin-left: 15px;
margin-right: 15px;
}
.margin_lr_xl {
margin-left: 20px;
margin-right: 20px;
}
.margin_tb_xs {
margin-top: 5px;
margin-bottom: 5px;
}
.margin_tb_sm {
margin-top: 10px;
margin-bottom: 10px;
}
.margin_tb {
margin-top: 15px;
margin-bottom: 15px;
}
.margin_tb_xl {
margin-top: 20px;
margin-bottom: 20px;
}
.padding_top_xs {
padding-top: 5px;
}
.padding_top_sm {
padding-top: 10px;
}
.padding_top {
padding-top: 15px;
}
.padding_top_xl {
padding-top: 20px;
}
.padding_bottom_xs {
padding-bottom: 5px;
}
.padding_bottom_sm {
padding-bottom: 10px;
}
.padding_bottom {
padding-bottom: 15px;
}
.padding_bottom_xl {
padding-bottom: 20px;
}
.padding_left_xs {
padding-left: 5px;
}
.padding_left_sm {
padding-left: 10px;
}
.padding_left {
padding-left: 15px;
}
.padding_left_xl {
padding-left: 20px;
}
.padding_right_xs {
padding-right: 5px;
}
.padding_right_sm {
padding-right: 10px;
}
.padding_right {
padding-right: 15px;
}
.padding_right_xl {
padding-right: 20px;
}
.padding_lr_xs {
padding-left: 5px;
padding-right: 5px;
}
.padding_lr_sm {
padding-left: 10px;
padding-right: 10px;
}
.padding_lr {
padding-left: 15px;
padding-right: 15px;
}
.padding_lr_xl {
padding-left: 20px;
padding-right: 20px;
}
.padding_tb_xs {
padding-top: 5px;
padding-bottom: 5px;
}
.padding_tb_sm {
padding-top: 10px;
padding-bottom: 10px;
}
.padding_tb {
padding-top: 15px;
padding-bottom: 15px;
}
.padding_tb_xl {
padding-top: 20px;
padding-bottom: 20px;
}
// 文字对齐
.text_center {
text-align: center;
}
.text_left {
text-align: left;
}
.text_right {
text-align: right;
}
.text_justify {
text-align: justify;
}
// 字体
.text_bold {
font-weight: bold !important;
}
.text_10 {
font-size: 12px !important;
display: inline-block;
transform: scale(0.833333333);
}
.text_12 {
font-size: 12px !important;
}
.text_13 {
font-size: 13px !important;
}
.text_14 {
font-size: 14px !important;
}
.text_16 {
font-size: 16px !important;
}
.text_18 {
font-size: 18px !important;
}
.text_20 {
font-size: 20px !important;
}
.text_22 {
font-size: 22px !important;
}
.text_24 {
font-size: 24px !important;
}
.text_26 {
font-size: 26px !important;
}
.text_30 {
font-size: 30px !important;
}
.text_36 {
font-size: 36px !important;
}
.text_100 {
font-size: 100px !important;
}
.clickactive {
position: relative;
cursor: pointer;
}
.clickactive::before {
content: '';
display: inline-block;
height: 100%;
width: 100%;
left: 0;
top: 0;
z-index: 9999;
position: absolute;
background: transparent;
pointer-events: none;
transition: all 0.3s;
}
.clickactive:active::before {
background: rgba(170, 170, 170, 0.4);
}
// 背景颜色
.bg_fff {
background: #fff !important;
}
// 文字颜色
.text_white {
color: #fff !important;
}
.cursor_pointer {
cursor: pointer;
}
.donghua {
transition: all 0.3s;
}
