AmazeUI 框架知识点－布局和样式整理
1、Amaze UI 将所有元素的盒模型设置为 border-box。这下好了，妈妈再也不用担心没计算好 padding、border 而使布局破相了。
2、Amaze UI 将浏览器的基准字号设置为 62.5%，也就是 10px，现在 1rem = 10px —— 为了计算方便。然后在body 上应用了 font-size: 1.6rem;，将页面字号设置为 16px。
3、<h1> - <h6> 保持粗体，设置了边距；<h1> 为正常字号的 1.5 倍；<h2> 为正常字号的 1.25 倍；其他保持正常字号。
4、<blockquote> 引用块
5、网格：
.am-g: 网格中的行，用于包裹列，清除列的浮动；
.am-u-xx-n: 网格中的列，xx 为视口区间，n 为该列所占的份数，如 n 为 3 时表示这一列占整行宽度的 3/12，即 1/4。
行 .am-g 的宽度被设置为 100%， 未限定最大宽度，会随着窗口自动缩放
可以在行上添加 .am-g-fixed class，将最大宽度限制为 1000px
通过 .am-g + .am-g-fixed 限制行的宽度，网格并不需要容器，这可能和某些框架不太一样。
有时某些可能是全宽的，这时候容器 .am-container就派上用场了：.am-container 和网格列设置了相同的左右 padding，可以和网格内容对齐。
实际使用中，如果行的网格数不足 12，需要在最后一列上添加 .am-u-end。这样不会最后一个向右浮动
6、视口大小：.am-[show|hide]-[sm|md|lg][-up|-down|-only]，调整浏览器窗口大小查看元素的显隐。
7、添加 am-u-sm-offset-*、am-u-md-offset-*、am-u-lg-offset-* 设置列的左边距。
8、添加 .am-u-xx-centered 实现列居中：
- 如果始终的设为居中，只需要添加
.am-u-sm-centered（移动优先，继承）； - 某些区间不居中添加，
.am-u-xx-uncentered。
9、在行 .am-g 上添加 .am-g-collapse，移除列的内边距（padding）。
10、Average Grid，均分网格（原 Block Grid），使用 ul / ol 创建等分列，用于内容的排列。
与布局网格不同的是，这里的数字表示几等分，而不是占 12 等分中的几列，比如 .am-avg-sm-2 会将子元素<li> 的宽度设置为 50%。
在 <img> 添加 .am-thumbnail 类；也可以在 <img> 外面添加一个容器，如 <div>、<figure>、<a> 等，再将 class 添加到容器上。
11、.am-container 放到了网格里面。
.am-scrollable-horizontal 内容超出容器宽度时显示水平滚动条。
.am-scrollable-vertical 内容超过设置的高度以后显示滚动条，默认设置的高度为 240px
.am-cf - 清除浮动
.am-nbfc - 使用 overflow: hidden; 创建新的 BFC 清除浮动
.am-fl- 左浮动.am-fr- 右浮动.am-center- 水平居中
12、垂直居中
.am-vertical-align 将这个 class 添加到父容器，父容器需要指定高度。
.am-vertical-align-middle需要垂直居中的元素
.am-vertical-align-bottom 添加到需要底部对齐的元素
13、隐藏：.am-hide
14、.am-margin
.am-margin-horizontal-{size}
.am-margin-vertical-{size}
.am-margin-left-{size}
.am-margin-right-{size}
.am-margin-top-{size}
.am-margin-bottom-{size}
size：xs sm lg xl;
15、字体、文本颜色、链接颜色减淡：.am-link-muted
字体大小：.am-text xs12 sm14 default16 lg18 xl24 xxl32 xxxl42
16、文本对齐或居中
.am-text-left/center/right/justify
.am-sm-text-left
.am-sm-only-text-left
.am-md-text-left
.am-md-only-text-left
.am-lg-text-left
17、文本垂直对齐
.am-text-top
.am-text-middle
.am-text-bottom
18、.am-text-truncate禁止换行，超出容器部分截断
.am-text-break超出文字容器宽度时强制换行，主要用于英文排版
.am-text-nowrap禁止换行，不截断超出容器宽度部分
19、.am-align-left
.am-align-right
20、.am-show-sm-only: 只在 sm 区间显示
.am-show-sm-up: 大于 sm 区间时显示
.am-show-sm: 在 sm 区间显示，如果没有设置 md、lg 区间的显隐，则元素在所有区间都显示
.am-show-md-down: 小于 md 区间时显示
21、屏幕方向
横屏：.am-show-landscape, .am-hide-landscape
竖屏：.am-show-portrait, .am-hide-portrait
