// 单行文字隐藏
.ell {
// display: block;
// 文本超出省略
text-overflow: ellipsis;
// 隐藏周围其他内容
white-space: nowrap;
// 溢出隐藏
overflow: hidden;
width: 250px;
}
//多行文字隐藏
.ells {
display: block;
height: 55px;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
// 共同公共样式
// pc常用公共样式
// 透明背景
.op {
opacity: 0.5;
}
// 自动适应宽
.wa {
width: calc((100vw - 33px)/3);
}
// 小圆角
.r {
border-radius: 5px;
}
// 圆
.rr {
border-radius: 50%;
}
// 去边框
.qb{
border: none;
outline: none;
}
// 底部
.b{
bottom: 0;
}
// 顶部
.t{
top:0;
}
// 左浮
.fl {
float: left;
}
// 右浮
.fr {
float: right;
} // 清除浮动
.clear:after {
content: "";
display: block;
clear: both;
visibility: hidden;
}
// 溢出隐藏
.ovh {
overflow: hidden;
}
// 溢出自动
.ova {
overflow: auto;
}
// 移动端常用公共样式
// 字体颜色
.gray1 {
color: #525252;
}
//灰色的边框
.bd {
border: 1px solid gray;
}
//100%的高
.h100pc {
height: 100%;
}
//100%的宽
.w100pc {
width: 100%;
}
//隐藏元素
.dsn {
display: none;
}
//字体加粗
.bold {
font-weight: bold;
}
//字体减粗
.fw400 {
font-weight: 400;
}
//传统盒子模型
.bzb {
box-sizing: border-box;
}
//固定定位
.fixed {
position: fixed;
}
//相对定位
.rel {
position: relative;
}
//固定定位
.abs {
position: absolute;
}
//单行文本水平居中
.tac {
text-align: center;
}
//单行文本水平居右
.tar {
text-align: right;
}
// 字体颜色设置
//红色
.red {
color: #ff5f16;
}
//灰色
.gray {
color: #adadad;
}
//白色
.fff {
color: #ffffff;
}
//背景颜色
.bg-green {
background: green;
}
.bg-gray {
background: gray;
}
.bg-fff {
background: #ffffff;
}
.bg-black {
background: #222426;
}
.bg-red {
background: #f05045;
}
// 高度
.h10 {
height: 10px;
}
.h20 {
height: 20px;
}
.h26 {
height: 26px;
}
.h30 {
height: 30px;
}
.h40 {
height: 40px;
}
.h50 {
height: 50px;
}
.h60 {
height: 60px;
}
.h70 {
height: 70px;
}
.h80 {
height: 80px;
}
.h90 {
height: 90px;
}
.h100 {
height: 100px;
}
// 宽
.w10 {
width: 10px;
}
.w20 {
width: 20px;
}
.w26 {
width: 26px;
}
.w30 {
width: 30px;
}
.w40 {
width: 40px;
}
.w50 {
width: 50px;
}
.w60 {
width: 60px;
}
.w70 {
width: 70px;
}
.w80 {
width: 80px;
}
.w90 {
width: 90px;
}
.w100 {
width: 100px;
}
// 行高
.lh15 {
line-height: 1.5;
}
.lh10 {
line-height: 10px;
}
.lh20 {
line-height: 20px;
}
.lh29 {
line-height: 29px;
}
.lh30 {
line-height: 30px;
}
.lh40 {
line-height: 40px;
}
.lh50 {
line-height: 50px;
}
.lh60 {
line-height: 60px;
}
.lh70 {
line-height: 70px;
}
.lh80 {
line-height: 80px;
}
.lh90 {
line-height: 90px;
}
// (12) 字体大小
@0px: 0px; // margin-left
.font(@n, @i: 6) when (@i =< @n) {
.f@{i} {
font-size: @i+@0px;
}
.font(@n, (@i + 2)); // +2得到的结果是1,3,5,7
// .mg-l(@n, (@i + 2));
}
.font(36);
// (13) margin-left
@0px: 0px; // margin-left
.mg-l(@n, @i: 1) when (@i =< @n) {
.mg-l-@{i} {
margin-left: @i+@0px;
}
.mg-l(@n, (@i + 1)); // +2得到的结果是1,3,5,7
// .mg-l(@n, (@i + 2));
}
.mg-l(50);
// (13) margin-right
@0px: 0px; // margin-right
.mg-r(@n, @i: 1) when (@i =< @n) {
.mg-r-@{i} {
margin-right: @i+@0px;
}
.mg-r(@n, (@i + 1)); // +2得到的结果是1,3,5,7
// .mg-r(@n, (@i + 2));
}
.mg-r(50);
// (14) margin-top
.mg-t(@n, @i: 1) when (@i =< @n) {
.mg-t-@{i} {
margin-top: @i+@0px;
}
.mg-t(@n, (@i + 1));
}
.mg-t(60);
// 内边距-右
.pd-l(@n, @i: 1) when (@i =< @n) {
.pd-l-@{i} {
padding-left: @i+@0px;
}
.pd-l(@n, (@i + 1));
}
.pd-l(40);
//内边距-上
.pd-t(@n, @i: 1) when (@i =< @n) {
.pd-t-@{i} {
padding-top: @i+@0px;
}
.pd-t(@n, (@i + 1));
}
.pd-t(40);
//内边距-下
.pd-b(@n, @i: 1) when (@i =< @n) {
.pd-b-@{i} {
padding-bottom: @i+@0px;
}
.pd-b(@n, (@i + 1));
}
.pd-b(50);
// flex相关
// 所有元素水平居中,垂直居中
.fcc {
display: flex;
justify-content: center;
align-items: center;
}
// 行内所有元素居中
.ifcc {
display: inline-flex;
justify-content: center;
align-items: center;
}
// 垂直居中,两端对齐
.flex-sb {
display: flex;
justify-content: space-between;
align-items: center;
}
// 垂直居中,分散对齐
.flex-sa {
display: flex;
justify-content: space-around;
align-items: center;
}
// 剩余空间分配
.fg1 {
flex-grow: 1;
}
.fg2 {
flex-grow: 2;
}
// 纵向排列
// 所有元素垂直居中
.fdcc {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
// 单个组合模式:
// 进入弹性布局模式:
.flex {
display: flex;
}
// 默认情况下就是这个垂直靠左
.fdc {
display: flex;
flex-direction: column;
}
// 原点
.jc-start {
justify-content: flex-start;
}
// 水平居中
.jc-center {
justify-content: center;
}
// 两端对齐
.jc-sb {
justify-content: space-between;
}
// 水平分散
.jc-sa {
justify-content: space-around;
}
// 垂直居中
.ai-center {
align-items: center;
}