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