這些類其實和bootstrap中的一些類很相似，可以多記記，這樣效率會高點，當(dāng)然也可以不記，用的時候查文檔也行，但是推薦一勞永逸的做法。

默認(rèn)class中以am開頭的，非特殊情況下都是amazeUI中的類名。

另外自己在命名類名的時候盡量不要以am開頭，類似與angular中的指令都是以ng-開頭，自己封裝指令的話盡量不要與官方寫法相同，以免沖突。

設(shè)置容器

.am-container 放到網(wǎng)格中

設(shè)置 水平/垂直 滾動條

• .am-scrollable-horizontal 內(nèi)容超出容器寬度時顯示水平滾動條。
• .am-scrollable-vertical 內(nèi)容超過設(shè)置的高度以后顯示滾動條，默認(rèn)設(shè)置的高度為 240px。

關(guān)于浮動

• .am-fl 左浮動（float left）；
• .am-fr 右浮動；
• .am-center 水平居中；

.am-center {
        display: block;
        margin-left: auto;
        margin-right: auto;
}

• .am-cf 清除浮動 (clean float)
• .am-nbfc 使用overflow: hidden; 創(chuàng)建新的BFC清除浮動。

.am-cf {
  .clearfix();
}

示例：

<div class="am-cf">
  <button class="am-btn am-btn-success am-fl">向左浮動</button>
  <button class="am-btn am-btn-success am-fr">向右浮動</button>
</div>

設(shè)置垂直對齊

原理： 將父容器內(nèi)的 “幽靈”元素（使用偽元素）高度設(shè)置為 100%，再通過設(shè)置需要對齊的元素 vertical-align 屬性實現(xiàn)。

怎么玩？

• .am-vertical-align 將這個 class 添加到父容器，父容器需要指定高度。
  • .am-vertical-align-middle 需要垂直居中的元素
  • .am-vertical-align-bottom 添加到需要底部對齊的元素

示例1：

<div class="am-vertical-align" style="height: 150px;">
  <div class="am-vertical-align-middle">
    我是需要垂直居中的元素！
  </div>
</div>

示例2：

<div class="am-vertical-align" style="height: 150px;">
  <div class="am-vertical-align-bottom">
    我是底部對齊的元素！
  </div>
</div>

無論該元素是垂直居中對齊，還是底部對齊，都要給包裹該元素的父元素添加一個類 .am-vertical-align;

設(shè)置元素的顯示/隱藏

• .am-block 顯示，display 設(shè)置為 block；
• .am-inline 顯示，display 設(shè)置為 inline；
• .am-inline-block 顯示，display 設(shè)置為 inline-block；
• .am-hide 隱藏

原理如下：

.am-hide {
  display: none !important;
  visibility: hidden !important;
}

尺寸

• xs 5px
• sm 10px
• default 16px
• lg 24px
• xl 32px

class 列表

不加尺寸為默認(rèn)大小（16px），{size} 可以為 0, xs, sm, lg, xl 中之一。

v2.4: 增加 0 值的內(nèi)外邊距輔助類

示例：設(shè)置外邊距

• .am-margin
• .am-margin-{size}
  水平方向外邊距
• .am-margin-horizontal
• .am-margin-horizontal-{size}
  垂直方向外邊距
• .am-margin-vertical
• .am-margin-vertical-{size}
  左外邊距
• .am-margin-left
• .am-margin-left-{size}
  右外邊距
• .am-margin-right
• .am-margin-right-{size}
  上外邊距
• .am-margin-top
• .am-margin-top-{size}
  下外邊距
• .am-margin-bottom
• .am-margin-bottom-{size}

同理，可以設(shè)置 上/下/左/右/水平/垂直 方向的 內(nèi)邊距，只需將上面類中的margin改為 padding 即可；