浮动Float

.fl 元素向左浮动 .fr 元素向右浮动 .fc 元素居中浮动 

  1. CSS:
  2. .fl {float:left;}
  3. .fr {float:right !important;}
  4. .fc {float:none !important;margin-left:auto;margin-right:auto;}

转换元素Element

.ib 转换为内联元素 .show 显示被隐藏的元素 .hide 隐藏元素 .hidei 隐藏元素优先级 

  1. CSS:
  2. .ib {display:inline-block;}
  3. .show {display:block !important;}
  4. .hide {display:none;}
  5. .hidei {display:none !important;}

外间距Margin

被赋予!important优先权

.mt 向上外间距auto .mt0 向上外间距0 .mt1 向上外间距0.25rem .mt2 向上外间距0.375rem .mt3 向上外间距0.5rem .mt4 向上外间距0.75rem .mt5 向上外间距1rem .mt6 向上外间距1.25rem .mt7 向上外间距1.5rem .mt8 向上外间距1.75rem .mt9 向上外间距2rem

.mr~.mr9 向右外间距 .mb~.mb9 向下外间距 .ml~.ml9 向左外间距 

  1. CSS:
  2. .mt {margin-top:auto !important;}
  3. .mt0 {margin-top:0 !important;}
  4. .mt1 {margin-top:.25rem !important;}
  5. .mt2 {margin-top:.375rem !important;}
  6. .mt3 {margin-top:.5rem !important;}
  7. .mt4 {margin-top:.75rem !important;}
  8. .mt5 {margin-top:1rem !important;}
  9. .mt6 {margin-top:1.25rem !important;}
  10. .mt7 {margin-top:1.5rem !important;}
  11. .mt8 {margin-top:1.75rem !important;}
  12. .mt9 {margin-top:2rem !important;}

内间距Padding

被赋予!important优先权

.pt0 向上内间距0 .pt1 向上内间距0.25rem .pt2 向上内间距0.375rem .pt3 向上内间距0.5rem .pt4 向上内间距0.75rem .pt5 向上内间距1rem .pt6 向上内间距1.25rem .pt7 向上内间距1.5rem .pt8 向上内间距1.75rem .pt9 向上内间距2rem

.pr0~.pr9 向右内间距 .pb0~.pb9 向下内间距 .pl0~.pl9 向左内间距 

  1. CSS:
  2. .pt0 {padding-top:0 !important;}
  3. .pt1 {padding-top:.25rem !important;}
  4. .pt2 {padding-top:.375rem !important;}
  5. .pt3 {padding-top:.5rem !important;}
  6. .pt4 {padding-top:.75rem !important;}
  7. .pt5 {padding-top:1rem !important;}
  8. .pt6 {padding-top:1.25rem !important;}
  9. .pt7 {padding-top:1.5rem !important;}
  10. .pt8 {padding-top:1.75rem !important;}
  11. .pt9 {padding-top:2rem !important;}

内容对齐Text Align

被赋予!important优先权

.tl 内容向左对齐 .tr 内容向右对齐 .tc 内容居中对齐 

  1. CSS:
  2. .tl {text-align:left !important;}
  3. .tr {text-align:right !important;}
  4. .tc {text-align:center !important;}

格式Format

被赋予!important优先权

属性 Attr - 图1

  1. CSS:
  2. .del {text-decoration:line-through !important;}
  3. .ins {text-decoration:underline !important;}
  4. .capitalize {text-transform:capitalize !important;}
  5. .uppercase {text-transform:uppercase !important;}
  6. .lowercase {text-transform:lowercase !important;}
  7. .b {font-weight:bold !important;}
  8. .i {font-style:italic !important;}

字号Font Size

被赋予!important优先权

属性 Attr - 图2

  1. CSS:
  2. .fs1 {font-size:.875rem !important;}
  3. .fs2 {font-size:1rem !important;}
  4. .fs3 {font-size:1.125rem !important;}
  5. .fs4 {font-size:1.25rem !important;}
  6. .fs5 {font-size:1.5rem !important;}
  7. .fs6 {font-size:1.75rem !important;}
  8. .fs7 {font-size:2rem !important;}
  9. .fs8 {font-size:2.25rem !important;}
  10. .fs9 {font-size:2.5rem !important;}

行间距Line Height

被赋予!important优先权

.lh100 行间距100% .lh125 行间距125% .lh150 行间距150% .lh175 行间距175% .lh200 行间距200% 

  1. CSS:
  2. .lh100 {line-height:1 !important;}
  3. .lh125 {line-height:1.25 !important;}
  4. .lh150 {line-height:1.5 !important;}
  5. .lh175 {line-height:1.75 !important;}
  6. .lh200 {line-height:2 !important;}

颜色Color

被赋予!important优先权

属性 Attr - 图3

  1. CSS:
  2. .c-000 {color:#000000 !important;}
  3. .c-333 {color:#333333 !important;}
  4. .c-666 {color:#666666 !important;}
  5. .c-999 {color:#999999 !important;}
  6. .c-fff {color:#ffffff !important;}
  7. .c-red {color:#d22020 !important;}
  8. .c-orange {color:#ff6a13 !important;}
  9. .c-yellow {color:#ffd400 !important;}
  10. .c-tan {color:#d8c69d !important;}
  11. .c-brown {color:#905b35 !important;}
  12. .c-marron {color:#752438 !important;}
  13. .c-lime {color:#abd83e !important;}
  14. .c-green {color:#269c35 !important;}
  15. .c-forest {color:#224e35 !important;}
  16. .c-lightblue {color:#4ecff7 !important;}
  17. .c-blue {color:#2077d2 !important;}
  18. .c-navy {color:#1c406d !important;}
  19. .c-pink {color:#fd6298 !important;}
  20. .c-magenta {color:#ec2292 !important;}
  21. .c-purple {color:#852dd6 !important;}

背景颜色Background Color

被赋予!important优先权

属性 Attr - 图4

  1. CSS:
  2. .bg-000 {background-color:#000000 !important;}
  3. .bg-333 {background-color:#333333 !important;}
  4. .bg-666 {background-color:#666666 !important;}
  5. .bg-999 {background-color:#999999 !important;}
  6. .bg-fff {background-color:#ffffff !important;}
  7. .bg-red {background-color:#d22020 !important;}
  8. .bg-orange {background-color:#ff6a13 !important;}
  9. .bg-yellow {background-color:#ffd400 !important;}
  10. .bg-tan {background-color:#d8c69d !important;}
  11. .bg-brown {background-color:#905b35 !important;}
  12. .bg-marron {background-color:#752438 !important;}
  13. .bg-lime {background-color:#abd83e !important;}
  14. .bg-green {background-color:#269c35 !important;}
  15. .bg-forest {background-color:#224e35 !important;}
  16. .bg-lightblue {background-color:#4ecff7 !important;}
  17. .bg-blue {background-color:#2077d2 !important;}
  18. .bg-navy {background-color:#1c406d !important;}
  19. .bg-pink {background-color:#fd6298 !important;}
  20. .bg-magenta {background-color:#ec2292 !important;}
  21. .bg-purple {background-color:#852dd6 !important;}

不透明度Opacity

添加class="o1"~"o9"改变元素的不透明度

属性 Attr - 图5

  1. <div class="o1">10%不透明度</div>
  2. <div class="o2">20%不透明度</div>
  3. <div class="o3">30%不透明度</div>
  4. <div class="o4">40%不透明度</div>
  5. <div class="o5">50%不透明度</div>
  6. <div class="o6">60%不透明度</div>
  7. <div class="o7">70%不透明度</div>
  8. <div class="o8">80%不透明度</div>
  9. <div class="o9">90%不透明度</div>

去色Gray

添加class="gray"使元素去色

属性 Attr - 图6

  1. <img src="imgurl" class="gray">
  2. or:
  3. <div class="gray"><img src="imgurl"></div>

模糊Blur

添加class="blur"使元素模糊

属性 Attr - 图7

  1. <img src="imgurl" class="blur">
  2. or:
  3. <div class="blur"><img src="imgurl"></div>