常用css小封装

葉幺

已于 2022-08-05 11:42:18 修改

阅读量996

点赞数

分类专栏： css3 前端文章标签： css 前端 html

于 2022-07-15 10:58:40 首次发布

本文链接：https://blog.csdn.net/weixin_42861240/article/details/125799737

版权

前端同时被 2 个专栏收录

43 篇文章 0 订阅

订阅专栏

css3

5 篇文章 0 订阅

订阅专栏

/* font */
.text-12{
  font-size: 12px;
}
.text-14{
  font-size: 14px;
}
.text-16{
  font-size: 16px;
}
.text-bold{
  font-weight: bold;
}
.text-bold-400{
  font-weight: 400;
}
.text-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}
.hr {
  border: 1px dashed #EEEAEF;
}
.radius-5{
  border-radius: 5px;
}
.radius-half{
  border-radius: 50%;
}

/* padding */
.padding-sm{
  padding:5px;
}
.padding{
  padding:10px;
}
.padding-lg{
  padding:15px;
}
.padding-t{
  padding-top:10px;
}
.padding-t-sm{
  padding-top:5px;
}
.padding-t-lg{
  padding-top:15px;
}
.padding-b{
  padding-bottom:10px;
}
.padding-b-sm{
  padding-bottom:5px;
}
.padding-b-lg{
  padding-bottom:15px;
}

/* margin */
.margin-sm{
  margin:5px;
}
.margin{
  margin:10px;
}
.margin-lg{
  margin:15px;
}
.margin-lr{
  margin-left:10px;
  margin-right:10px;
}
.margin-lr-sm{
  margin-left:5px;
  margin-right:5px;
}
.margin-lr-lg{
  margin-left:15px;
  margin-right:15px;
}
.margin-tb{
  margin-top:10px;
  margin-bottom:10px;
}
.margin-tb-sm{
  margin-top:5px;
  margin-bottom:5px;
}
.margin-tb-lg{
  margin-top:15px;
  margin-bottom:15px;
}
.margin-t{
  margin-top:10px;
}
.margin-t-sm{
  margin-top:5px;
}
.margin-t-lg{
  margin-top:15px;
}
.margin-b{
  margin-bottom:10px;
}
.margin-b-sm{
  margin-bottom:5px;
}
.margin-b-lg{
  margin-bottom:15px;
}
.margin-l-sm{
  margin-left:5px;
}
.margin-r-sm{
  margin-right:5px;
}


/* flex */
.shrink-0{
  flex-shrink: 0;
}
.flex-column {
  display: flex;
  flex-direction: column;
}
.flex-wrap {
  display: flex;
  flex-wrap: wrap;
}
.flex-between {
  display: flex;
  justify-content: space-between;
}
.flex-justify-around {
  display: flex;
  justify-content: space-around;
}
.flex-justify-center {
  display: flex;
  justify-content: center;
}
.flex-justify-between {
  display: flex;
  justify-content: space-between;
}
.flex-between-center{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.flex-center-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.flex-end-center {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.flex-column-center {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

/* table */
/* 设置奇偶数行颜色根据需求加减修改 */
table tr:nth-child(odd) {
  background: #fafafa;
}
table tr:nth-child(even) {
  background: #FFFFFF;
}

/* 常用根据项目修改 */
.icon-img{
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.btn{
  padding:10px 30px;
  text-align: center;
  background: blue;
  border-radius: 5px;
}

后续会更新