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