fosung-css
v1.0.6
Published
福生共用的css样式库
Readme
flex布局
// flex布局
.fs-flex {
display: flex;
flex-direction: row;
align-items: center;
}
// 换行
.fs-flex-wrap {
flex-wrap: wrap;
}
// 不换行
.fs-flex-nowrap {
flex-wrap: nowrap;
}
// 垂直居中
.fs-col-center {
align-items: center;
}
// 与交叉轴的起点对齐, 即起点
.fs-col-top {
align-items: flex-start;
}
// 纵向终点对齐
.fs-col-bottom {
align-items: flex-end;
}
// 横向居中
.fs-row-center {
justify-content: center;
}
// 横向起点对齐
.fs-row-left {
justify-content: flex-start;
}
// 与交叉轴的终点对齐，即终点
.fs-row-right {
justify-content: flex-end;
}
// 两端对齐
.fs-row-between {
justify-content: space-between;
}
// 每根轴线两侧的间隔都相等
.fs-row-around {
justify-content: space-around;
}
// 纵向flex
.fs-flex-col {
display: flex;
flex-direction: column;
}
// flex等分
.fs-flex-0
.fs-flex-1
.fs-flex-2
.fs-flex-3
.fs-flex-12
// 横向两端对齐内容居中， 不换行
<div>
<div class="fs-flex fs-row-between fs-row-center fs-flex-wrap">
<div class="fs-flex-1">1</div>
<div class="fs-flex-2">2</div>
</div>
</div>
// 纵向两端对齐内容居中， 不换行
<div>
<div class="fs-flex-col fs-flex-wrap">
<div class="fs-flex-1">1</div>
<div class="fs-flex-6">2</div>
</div>
</div>
边框样式
// 边框 1px
<div class="fs-border"></div>
// 上边框 1px
<div class="fs-border-top"></div>
// 下边框 1px
<div class="fs-border-bottom"></div>
// 左边框 1px
<div class="fs-border-left"></div>
// 右边框 1px
<div class="fs-border-right"></div>清除浮动
<div class="fs-clearfix"></div>字体大小
// 12px
<div class="fs-font-xs"></div>
// 14px
<div class="fs-font-sm"></div>
// 16px
<div class="fs-font-md"></div>
// 18px
<div class="fs-font-lg"></div>
// 20px
<div class="fs-font-xl"></div>
// 支持 从12px 到 36px
<div class="fs-font-12"></div>
<div class="fs-font-36"></div>超出隐藏
// 超出一行 省略号
<div class="fs-line-1"></div>
// 超出二行 省略号
<div class="fs-line-2"></div>
// 超出三行 省略号
<div class="fs-line-3"></div>
// 超出四行 省略号
<div class="fs-line-4"></div>
// 超出五行 省略号
<div class="fs-line-5"></div>边距
// 支持 0-80px的padding 和 margin 不包含单数，但是包含可以被5整除的数值
// .fs-m-10 .fs-margin-10 效果相同
// .fs-m-l-10 .fs-margin-left-10 效果相同
// .fs-m-r-8 .fs-margin-right-8 效果相同
// .fs-m-b-12 .fs-margin-bottom-12 效果相同
// .fs-m-t-16 .fs-margin-top-16 效果相同
// .fs-p-10 .fs-p-10 效果相同
// .fs-p-l-10 .fs-p-l-10 效果相同
// .fs-p-r-8 .fs-p-r-8 效果相同
// .fs-p-b-12 .fs-p-b-12 效果相同
// .fs-p-t-16 .fs-p-t-16 效果相同
<div class="fs-m-10"></div>
<div class="fs-p-10"></div>定位
// 相对定位
<div class="fs-relative"></div>
// 绝对定位
<div class="fs-absolute"></div>隐藏滚动条
<div class="fs-scrollbar"></div>文本显示
文本显示
// 居左显示
<div class="fs-text-left"></div>
// 居中显示
<div class="fs-text-center"></div>
// 居右显示
<div class="fs-text-right"></div>图标居中
// icon图表和文字垂直居中
<div class="fs-icon-wrap">
<span>这个是icon图标</span>
<span></span>
</div>点击无效
<div class="fs-click-invalid"></div>禁止选中
<div class="fs-no-select"></div>集中样式
.fs-primary-color {
color:#c50405
}
.fs-primary-color-50 {
color:#c50405;
opacity:.5
}
.fs-primary-color-20 {
color:#c50405;
opacity:.2
}
.fs-primary-color-10 {
color:#c50405;
opacity:.1
}
.fs-primary-color-1 {
color:#e50202
}
.fs-primary-color-1-50 {
color:#e50202;
opacity:.5
}
.fs-primary-color-1-20 {
color:#e50202;
opacity:.2
}
.fs-primary-color-1-10 {
color:#e50202;
opacity:.1
}
.fs-primary-color-2 {
color:#800101
}
.fs-primary-color-2-50 {
color:#800101;
opacity:.5
}
.fs-primary-color-2-20 {
color:#800101;
opacity:.2
}
.fs-primary-color-2-10 {
color:#800101;
opacity:.1
}
.fs-primary-color-3 {
color:#f08116
}
.fs-primary-color-3-50 {
color:#f08116;
opacity:.5
}
.fs-primary-color-3-20 {
color:#f08116;
opacity:.2
}
.fs-primary-color-3-10 {
color:#f08116;
opacity:.1
}
.fs-system-primary {
color:#1776fa
}
.fs-system-success {
color:#50cd65
}
.fs-system-warning {
color:#f7c018
}
.fs-system-danger {
color:#ff6b6b
}
.fs-text {
color:#1a1919
}
.fs-text-2 {
color:#606266
}
.fs-text-3 {
color:#909399
}
.fs-text-4 {
color:#d7d9de
}
.fs-text-disable {
color:#dfe1e6
}
.fs-bg {
background-color:#fff
}
.fs-bg-grey {
background-color:#f9f9f9
}
.fs-bg-line-deep {
background-color:#f0f2f7
}
.fs-bg-line-shallow {
background-color:#ecedf2
}
.fs-border-color, .fs-border-deep {
border-color:#cfd4db
}
.fs-border-deep-level {
border-color:#e4e7ed
}
.fs-border-shallow {
border-color:#ebeef5
}
.fs-border-shallow-level {
border-color:#f2f6fc
}
.fs-line-40 {
line-height:40px
}
.fs-line-32 {
line-height:32px
}