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