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