AmazeUI布局

　　AmazeUI使用了12列的响应式网络系统。使用时需在外围容器上添加.am-g class，在列上添加.am-u-[sm|md|lg]-[1-12] class，然后根据不同的屏幕需求设置不同的宽度。　　

　am-u-sm-*  0-640px     am-u-md-*  641px-1024px  am-u-lg-* 1025px+

　AmazeUI以移动优先的理念开发，若不设置大屏的网络，应用到小屏幕的样式会继承到更大的屏幕上。

　am-g：网格的行，用于包裹列，清楚列的浮动

　am-u-xx-n：网格中的列，xx为视口区间，n为该列所占的份数

　sm区间两列是等分的，md区间为1:2划分，lg区间为1:3划分

　.am-g的宽度别设置为100%，为限定最大宽度，会随着窗口自动缩放。可以在行内添加,am-g-fixed class，将最大宽度(max-width)限制为1000px。

　全宽的行 .am-container。am-container和网格列设置了相同的左右padding，可以和网格内容对齐。

　网格拆分时使用了非证书百分比(100/12*n)，浏览器在计算的时候会有差异，最终所有列的宽度可能没有达到100%，导致网格右侧会有很小的空隙。实际使用中，若网格数不足12，需要在最后一列加上.am-u-end。

　　响应式布局

　响应式辅助类控制元素显隐 am-show-md-down  am-hide-md-down

　边距离 am-u-sm-offset-1（1-10）

　列居中 am-u-xx-centered  如 am-u-sm-centered　　

　列不居中 am-u-xx-uncentered  如  am-u-sm-uncentered

　列排序：处于SEO考虑，有时会有一些结构和表现不一致的情况，可以通过am-u-xx-push-*/am-u-xx-pull-*来实现。

　移出行内边距 am-g-collapse

　　

　　AVG-Grid（均分网格） 使用ul/ol创建等分列，用于内容的排列。只能用于<ul><ol>结构。

　am-avg-sm-*  0-640px

　am-avg-md-*  641px-1024px

　am-avg-lg-*    1024px+　

　　*表示几等分，而不是占12列中的几列。

　只添加.am-avg-sm-*应用于所有屏幕尺寸。

　<ul class="am-avg-sm-4 am-thumbnails">

　　<li><img class="am-thumbnail" src="" /></li>

　</ul>

　　九宫格

　<ul class="am-avg-sm-3 boxes">

　　　<li class="box box-1">1</li>

　　　　...

　　　<li class="box box-9">9</li>

　</ul>

　　水平滚动 am-scrollable-horizontal

　　垂直滚动 am-scrollable-vertical

　　清除浮动 am-cf

　　创建新的BFC清除浮动  am-nbfc

　　左浮动 am-fl

　　右浮动 am-fr

　　水平居中 am-center

　　垂直对齐原理是把父容器内的“幽灵”元素的高度设置为100%，再通过设置需要对齐的元素vertical-align属性实现。

　　am-vertical-align  将这个class添加到父容器中，父容器需要指定高度

　　am-vertical-align-middle  需要垂直居中的元素

　　am-vertical-align-bottom  添加到需要底部对齐的元素

　　am-block  display设置为block

　　am-inline  display设置为block

　　am-inline-block display设置为inline-block　

　　am-hide 隐藏元素

　　尺寸 xs：5px  sm：10px  default：16px  lg：24px  xl：32px

　　文本颜色  am-text-xx(primary;secondary,success,warning,danger)

　　链接颜色默认为蓝色，使用am-link-muted可以将链接颜色设置为灰色

　　文字大小 am-test-xs：12px am-text-sm：14px am-text-default：16px am-text-lg：18px am-text-xl：24px  am-text-xxl：32px am-text-xxxl：42px

　　文本对齐 am-text-left（左对齐） am-text-right（右对齐） am-text-center（居中） am-text-justify（自适应）

　　文本垂直对齐 am-text-top顶对齐   am-text-middle居中对齐   am-text-bottom底对齐

　　am-text-truncate 禁止换行，超出容器部分阶段。以...结束

　　am-text-break 超出文字容器宽度时强制换行，主要用于英文排版

　　am-text-nowrap 禁止换行，不截断超出容器宽度部分

　　Webkit内核的浏览器可以通过-webkit-line-clamp私有属性实现多行文字截取。其他浏览器没有这个属性，通常做法是把容器的高度限定为行高*显示的行数，超出的部分隐藏。

　　.line-clamp {
　　　　overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
　　　　-webkit-line-clamp: 2; // 这里修改为要显示的行数
　　　　-webkit-box-orient: vertical;
　　}

　　

　　CSS Image Replacement，图片替换计算兼顾显示效果、可仿性、SEO。使用am-text-ir class结合背景图片实现图片替换

　　使用float实现类似html的align属性的效果，父容器要清楚浮动。与.am-fl、am-fr相比，浮动的元素添加了margin。am-align-right am-align-left

　　调整浏览器窗口大小查看元素的显隐 am-[show|hide]-[sm|md|lg][-up|-down|-only]

　　am-show-sm-only 只在sm区间显示

　　am-show-sm-up  大于sm区间时显示

　　am-show-md-down 小于sm区间时显示

　　am-show-sm 在sm区间显示

　　横屏 am-show-landscape  am-hide-landscape

　　竖屏 am-show-portrait  am-hide-portrait