Microfaster, 让我们略微加速

AmazeUI 框架知识点-布局和样式整理

2019-07-04 15:25:23 lvesu (349阅读)

标签 HTML/CSS/XML

1、Amaze UI 将所有元素的盒模型设置为 border-box。这下好了,妈妈再也不用担心没计算好 paddingborder 而使布局破相了。

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 区间显示,如果没有设置 mdlg 区间的显隐,则元素在所有区间都显示

  .am-show-md-down: 小于 md 区间时显示

21、屏幕方向

  横屏:.am-show-landscape.am-hide-landscape

  竖屏:.am-show-portrait.am-hide-portrait


北京半月雨文化科技有限公司.版权所有 京ICP备12026184号