Document

javascript的命名规范

font 字体的使用

解释:h12 ->> font-size:12px,剩下的一次类推,设置属性包括字体大小，加粗，斜体

h12 -->12px

h14 -->14px

h16 -->16px

h18 -->18px

h20 -->20px

h22 -->22px

h24 -->24px

h28 -->28px

h32 -->32px

h36 -->36px

h40 -->40px

h48 -->48px

italic {font-style:italic}

oblique {font-style:oblique}

bold500 {font-weight: 500}

bold {font-weight: bold}

bold800 {font-weight: 800}

padding 与 margin 的使用

解释: 我们使用的padding值,采用的是rem,1rem -->> 16px。

p1 -> 0.25rem, p2 -> 0.5rem, p3 -> 0.75rem, p4 -> 1rem, p5 -> 1.25rem, p6 -> 1.5rem, p7 -> 1.75rem, p8 -> 2rem, p9 -> 2.5rem, p10 -> 3rem,

p0 { padding: 0 }

pt0 { padding-top: 0 }

pr0 { padding-right: 0 }

pb0 { padding-bottom: 0 }

pl0 { padding-left: 0 }

px0 { padding-left: 0; padding-right: 0 }

py0 { padding-top: 0; padding-bottom: 0 }

p1 { padding: var(--space-1) }

pt1{ padding-top: var(--space-1) }

pr1{ padding-right: var(--space-1) }

pb1 { padding-bottom: var(--space-1) }

pl1 { padding-left: var(--space-1) }

py1 { padding-top: var(--space-1); padding-bottom: var(--space-1) }

px1 { padding-left: var(--space-1); padding-right: var(--space-1) }

m0 { margin: 0 }

mt0 { margin-tom: 0 }

mr0 { margin-right: 0 }

mb0 { margin-bottom: 0 }

ml0 { margin-left: 0 }

mx0 { margin-left: 0; margin-right: 0 }

my0 { margin-top: 0; margin-bottom: 0 }

m1 { margin: var(--space-1) }

mt1{ margin-tom: var(--space-1) }

mr1{ margin-right: var(--space-1) }

mb1 { margin-bottom: var(--space-1) }

ml1 { margin-left: var(--space-1) }

my1 { margin-top: var(--space-1); margin-bottom: var(--space-1) }

mx1 { margin-left: var(--space-1); margin-right: var(--space-1) }

position 与 flex 的使用

解释: flex是弹性布局,具体使用规则可以查看 flex阮一峰教程

relative { position: relative }

absolute { position: absolute }

fixed { position: fixed }

top-0 { top: 0 }

left-0 { left: 0 }

right-0 { right: 0 }

bottom-0 { bottom: 0 }

flex { display: flex }

flex-column { flex-direction: column }

flex-wrap { flex-wrap: wrap }

items-start { align-items: flex-start }

items-end { align-items: flex-end }

items-center { align-items: center }

items-baseline { align-items: baseline }

items-stretch { align-items: stretch }

self-start { align-self: flex-start }

self-end { align-self: flex-end }

self-center { align-self: center }

self-baseline { align-self: baseline }

self-stretch { align-self: stretch }

justify-start { justify-content: flex-start }

justify-end { justify-content: flex-end }

justify-center { justify-content: center }

justify-between { justify-content: space-between }

justify-around { justify-content: space-around }

content-start { align-content: flex-start }

content-end { align-content: flex-end }

content-center { align-content: center }

content-between { align-content: space-between }

content-around { align-content: space-around }

content-stretch { align-content: stretch }

flex-none { flex: none }

零碎属性

解释: 这要包括（vertical-align,text-align,display,visibility,overflow,clearfix,float等）

vertical,text-aligin的使用

align-baseline { vertical-align: baseline }

align-top { vertical-align: top }

align-middle { vertical-align: middle }

align-bottom { vertical-align: bottom }

left-align { text-align: left }

center { text-align: center }

right-align { text-align: right }

justify { text-align: justify }

hide { display: none !important }

visible-hidden{visibility: hidden;}

inline { display: inline }

block { display: block }

inline-block { display: inline-block }

table { display: table }

table-cell { display: table-cell }

vertical,text-aligin的使用

hidden { overflow: hidden }

hiddenX { overflow-x: hidden }

hiddenY { overflow-y: hidden }

scrollY { overflow-y: scroll }

scrollX { overflow-x: scroll }

scroll { overflow: scroll }

auto { overflow: auto }

autoY { overflow-y: auto }

autoX { overflow-x: auto }

float 一些小属性的使用

f-left { float: left }

f-right { float: right }

nowrap { white-space: nowrap }

break-word { word-wrap: break-word }

font-family-inherit { font-family: inherit }

font-size-inherit { font-size: inherit }

text-decoration-none { text-decoration: none }

border-box { box-sizing: border-box }

多行显示存在兼容性问题(只有chrome有效)

.animate-hide {
                                        position: absolute !important;
                                        height: 1px;
                                        width: 1px;
                                        overflow: hidden;
                                        clip: rect(1px, 1px, 1px, 1px);
                                        }
                                        //单行省略号隐藏
                                    .dot-hidden {
                                    max-width: 100%;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                    }

.multiple2-hidden{
                                    word-break: break-all;
                                    text-overflow: ellipsis;
                                    display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
                                    -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
                                    -webkit-line-clamp: 2; /** 显示的行数 **/
                                    overflow: hidden;  /** 隐藏超出的内容 **/
                                    }
                                    .multiple3-hidden{
                                    word-break: break-all;
                                    text-overflow: ellipsis;
                                    display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
                                    -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
                                    -webkit-line-clamp: 3; /** 显示的行数 **/
                                    overflow: hidden;  /** 隐藏超出的内容 **/
                                    }

border 的使用

解释: 由于border属性比较多，我们定义几个基础.class。后期我们使用less扩展，可以调用这些基础.calss"组件我们需要的样式

border-dashed{ border-style: dashed;}

border-solid{border-style: solid;}

border-width1{border-width: 1px;}

border-width2{border-width: 2px;}

radius-circle{border-radius: 50%;}

radius-3{border-radius: 3px;}

radius-5{border-radius: 5px;}

color颜色的使用

解释: 根据UI的设计规范，先定出了几种常用颜色我们通过这些属性class,通过less,就可以组装成各种各样的样式,

字体颜色

color-white color-smokeWhite color-title color-secondaryText color-placeholder color-disabled color-blue color-green color-yellow color-red

带颜色变化的字体颜色

color-link color-error color-success color-warning

背景

bg-fill bg-Invalid bg-ground bg-devide bg-border

组装成按钮

FDbtn FDbtn-default FDbtn FDbtn-success FDbtn FDbtn-error FDbtn FDbtn-link FDbtn FDbtn-warning

FDbtn FDbtn-success FDbtn FDbtn-success FDbtn-sm FDbtn FDbtn-success FDbtn FDbtn-success FDbtn-lg