amazeui学习笔记--css（布局相关3）--辅助类Utility

一、总结

1、元素清除浮动： 添加 am-cf 这个 class 即可

2、水平滚动： .am-scrollable-horizontal 内容超出容器宽度时显示水平滚动条。 <div class="am-scrollable-horizontal">

3、垂直滚动： .am-scrollable-vertical

4、浮动相关： .am-cf - 清除浮动

.am-fl - 左浮动
.am-fr - 右浮动
.am-center - 水平居中

5、垂直对齐：vertical-align

Class	描述
`.am-vertical-align`	将这个 class 添加到父容器，父容器需要指定高度。
`.am-vertical-align-middle`	需要垂直居中的元素
`.am-vertical-align-bottom`	添加到需要底部对齐的元素

 <div class="am-vertical-align" style="height: 150px;">

   <div class="am-vertical-align-middle">

     飘在半空中的 XX

   </div>

 </div>

6、显示属性：

.am-block - display 设置为 block
.am-inline - display 设置为 inline
.am-inline-block - display 设置为 inline-block

7、隐藏属性：添加 .am-hide class。

 .am-hide {

   display: none !important;

   visibility: hidden !important;

 }

 <!-- 隐藏了，Demo 里看不到按钮 -->

 <button class="am-btn am-btn-danger am-hide">I'm hidden.....</button>

8、尺寸：不加尺寸为默认大小（16px），{size} 可以为 0, xs, sm, lg, xl 中之一。

xs - 5px
sm - 10px
default - 16px
lg - 24px
xl - 32px

9、文本颜色：默认黑色

<p>...</p>

<p class="am-text-primary">...</p>

<p class="am-text-secondary">...</p>

<p class="am-text-success">...</p>

<p class="am-text-warning">...</p>

<p class="am-text-danger">...</p>

10、链接颜色变灰：超链接颜色默认为主色（蓝色），添加 .am-link-muted class 将链接颜色设置为灰色。 <a href="" class="am-link-muted">...</a>

11、文字大小：

.am-text-xs - 12px
.am-text-sm - 14px
.am-text-default - 16px
.am-text-lg - 18px
.am-text-xl - 24px
.am-text-xxl - 32px
.am-text-xxxl - 42px

12、文本左右对齐

左对齐	右对齐	居中	自适应
`.am-text-left`	`.am-text-right`	`.am-text-center`	`.am-text-justify`
`.am-sm-text-left`	`.am-sm-text-right`	`.am-sm-text-center`	`.am-sm-text-justify`
`.am-sm-only-text-left`	`.am-sm-only-text-right`	`.am-sm-only-text-center`	`.am-sm-only-text-justify`
`.am-md-text-left`	`.am-md-text-right`	`.am-md-text-center`	`.am-md-text-justify`
`.am-md-only-text-left`	`.am-md-only-text-right`	`.am-md-only-text-center`	`.am-md-only-text-justify`
`.am-lg-text-left`	`.am-lg-text-right`	`.am-lg-text-center`	`.am-lg-text-justify`

13、文本垂直对齐

.am-text-top - 顶对齐
.am-text-middle - 居中对齐
.am-text-bottom - 底对齐

14、文字换行及截断（这个好诶）：truncate

Class	描述
`.am-text-truncate`	禁止换行，超出容器部分截断（以 `...` 结束）
`.am-text-break`	超出文字容器宽度时强制换行，主要用于英文排版
`.am-text-nowrap`	禁止换行，不截断超出容器宽度部分

<!-- 超出 200px 的文字将会被截断 -->

<div class="am-text-truncate" style="width: 250px; padding: 10px;">千万不要因为走得太久，而忘记了我们为什么出发</div>

15、图片替换：使用 .am-text-ir class 结合背景图片实现图片替换。

可以自己写class啊

 <header class="doc-ir-demo">

   <h1><a href="/" class="am-text-ir">Amaze UI</a></h1>

 </header>

 .doc-ir-demo {

   background: #3bb4f2;

 }

 .doc-ir-demo h1 {

   margin:;

   padding: 10px;

 }

 .doc-ir-demo a {

   display: block;

   height: 29px;

   width: 125px;

   background: url(/i/landing/logo.png) no-repeat left center;

   -webkit-background-size: 125px 24px;

   background-size: 125px 24px;

 }

16、图文混排辅助：

使用 float 实现的类似 HTML align 属性的效果，父容器要清除浮动。与 .am-fl、.am-fr 相比，浮动的元素加了 margin。

.am-align-left
.am-align-right

 <div class="am-cf">

   <p class="am-align-left">

     <img src="..." alt=""/>

   </p>

   ...

   <p class="am-align-right">

     <img src="..." alt=""/>

   </p>

   ...

 </div>

17、响应式辅助

class 释义：

show 显示，hide 隐藏，这应该不难理解；
sm、md、lg 是划分屏幕大小区间的缩写，对应 small、medium、large，网格里面做了说明；
down 指小于区间，up 指大于区间， only 指仅在这个区间。

按照上面的翻译一下下面的 class:

.am-show-sm-only: 只在 sm 区间显示
.am-show-sm-up: 大于 sm 区间时显示
.am-show-sm: 在 sm 区间显示，如果没有设置 md、lg 区间的显隐，则元素在所有区间都显示
.am-show-md-down: 小于 md 区间时显示

18、屏幕方向：

横屏：.am-show-landscape, .am-hide-landscape
竖屏：.am-show-portrait, .am-hide-portrait

二、辅助类Utility

布局相关

容器

基本容器

~~.am-container，盒模型为 border-box，水平居中对齐，清除浮动。~~

.am-container 放到了网格里面。

水平滚动

.am-scrollable-horizontal 内容超出容器宽度时显示水平滚动条。

Copy

-= 表格标题 =-	-= 表格标题 =-	-= 表格标题 =-	-= 表格标题 =-	-= 表格标题 =-	-= 表格标题 =-	-= 表格标题 =-	-= 表格标题 =-
表格数据	表格数据	表格数据	表格数据	表格数据	表格数据	表格数据	表格数据
表格数据	表格数据	表格数据	表格数据	表格数据	表格数据	表格数据	表格数据
表格数据	表格数据	表格数据	表格数据	表格数据	表格数据	表格数据	表格数据

<div class="am-scrollable-horizontal">

  <table class="am-table am-table-bordered am-table-striped am-text-nowrap">

    ...

  </table>

</div>

垂直滚动

.am-scrollable-vertical 内容超过设置的高度以后显示滚动条，默认设置的高度为 240px。

《你不懂我，我不怪你》
作者：莫言

每个人都有一个死角，自己走不出来，别人也闯不进去。
我把最深沉的秘密放在那里。
你不懂我，我不怪你。

每个人都有一道伤口，或深或浅，盖上布，以为不存在。
我把最殷红的鲜血涂在那里。
你不懂我，我不怪你。

每个人都有一场爱恋，用心、用情、用力，感动也感伤。
我把最炙热的心情藏在那里。
你不懂我，我不怪你。

每个人都有一行眼泪，喝下的冰冷的水，酝酿成的热泪。
我把最心酸的委屈汇在那里。
你不懂我，我不怪你。

每个人都有一段告白，忐忑、不安，却饱含真心和勇气。
我把最抒情的语言用在那里。
你不懂我，我不怪你。

浮动相关

.am-cf - 清除浮动
.am-nbfc - 使用 overflow: hidden; 创建新的 BFC 清除浮动（参考）

Copy

.am-cf {

  .clearfix();

}

.am-fl - 左浮动
.am-fr - 右浮动
.am-center - 水平居中

Copy

.am-center {

  display: block;

  margin-left: auto;

  margin-right: auto;

}

示例：

Copy

向左浮动向右浮动

<div class="am-cf">

  <button class="am-btn am-btn-success am-fl">向左浮动</button>

  <button class="am-btn am-btn-success am-fr">向右浮动</button>

</div>

垂直对齐

垂直对齐的原理为把父容器内的 “幽灵”元素（使用伪元素）高度设置为 100%，再通过设置需要对齐的元素 vertical-align 属性实现（参考）。

Class	描述
`.am-vertical-align`	将这个 class 添加到父容器，父容器需要指定高度。
`.am-vertical-align-middle`	需要垂直居中的元素
`.am-vertical-align-bottom`	添加到需要底部对齐的元素

垂直居中对齐

Copy

飘在半空中的 XX

<div class="am-vertical-align" style="height: 150px;">

  <div class="am-vertical-align-middle">

    飘在半空中的 XX

  </div>

</div>

``

底部对齐

Copy

DOWN 到了谷底...降到零下几度 C

<div class="am-vertical-align" style="height: 150px;">

  <div class="am-vertical-align-bottom">

    DOWN 到了谷底...降到零下几度 C

  </div>

</div>

``

参考链接

元素显示

显示属性

.am-block - display 设置为 block
.am-inline - display 设置为 inline
.am-inline-block - display 设置为 inline-block

隐藏元素

添加 .am-hide class。

Copy

.am-hide {

  display: none !important;

  visibility: hidden !important;

}

Copy

<!-- 隐藏了，Demo 里看不到按钮 -->

<button class="am-btn am-btn-danger am-hide">I'm hidden.....</button>

内外边距

尺寸

xs - 5px
sm - 10px
default - 16px
lg - 24px
xl - 32px

class 列表

不加尺寸为默认大小（16px），{size} 可以为 0, xs, sm, lg, xl 中之一。

v2.4: 增加 0 值的内外边距辅助类。

Margin	Padding
`.am-margin` `.am-margin-{size}`	`.am-padding` `.am-padding-{size}`
水平方向外边距 `.am-margin-horizontal` `.am-margin-horizontal-{size}`	水平方向内边距 `.am-padding-horizontal` `.am-padding-horizontal-{size}`
垂直方向外边距 `.am-margin-vertical` `.am-margin-vertical-{size}`	垂直方向内边距 `.am-padding-vertical` `.am-padding-vertical-{size}`
左外边距 `.am-margin-left` `.am-margin-left-{size}`	左内边距 `.am-padding-left` `.am-padding-left-{size}`
右外边距 `.am-margin-right` `.am-margin-right-{size}`	右内边距 `.am-padding-right` `.am-padding-right-{size}`
上外边距 `.am-margin-top` `.am-margin-top-{size}`	上内边距 `.am-padding-top` `.am-padding-top-{size}`
下外边距 `.am-margin-bottom` `.am-margin-bottom-{size}`	下内边距 `.am-padding-bottom` `.am-padding-bottom-{size}`

文本工具

字体

.am-sans-serif 非衬线，Amaze UI 主要使用的。
.am-serif 衬线字体，中文为宋体，Amaze UI 中未使用。
.am-kai 应为衬线字体，中文为楷体，Amaze UI <blockquote> 使用此。
.am-monospace 等宽字体，Amaze UI 源代码中使用。

下面为几种字体系列演示：

Copy

The quick brown fox jumps over the lazy dog.
千万不要因为走得太久，而忘记了我们为什么出发。
千萬不要因為走得太久，而忘記了我們為什麼出發。

<p>...</p>

<p class="am-serif">...</p>

<p class="am-kai">...</p>

<p class="am-monospace">...</p>

文本颜色

Copy

千万不要因为走得太久，而忘记了我们为什么出发。

<p>...</p>

<p class="am-text-primary">...</p>

<p class="am-text-secondary">...</p>

<p class="am-text-success">...</p>

<p class="am-text-warning">...</p>

<p class="am-text-danger">...</p>

链接颜色减淡

超链接颜色默认为主色（蓝色），添加 .am-link-muted class 将链接颜色设置为灰色。

Copy

超级链接

<a href="" class="am-link-muted">...</a>

<h3 class="am-link-muted"><a href="">...</a></h3>

<ul class="am-link-muted">

  <li><a href="">...</a></li>

</ul>

``

文字大小

.am-text-xs - 12px
.am-text-sm - 14px
.am-text-default - 16px
.am-text-lg - 18px
.am-text-xl - 24px
.am-text-xxl - 32px
.am-text-xxxl - 42px

Copy

千万不要因为走得太久，而忘记了我们为什么出发。

<p class="am-text-xs">...</p>

<p class="am-text-sm">...</p>

<p class="am-text-default">...</p>

<p class="am-text-lg">...</p>

<p class="am-text-xl">...</p>

<p class="am-text-xxl">...</p>

<p class="am-text-xxxl">...</p>

常用字号参考：

REMs	Pixels
6.8rem	68px
5rem	50px
3.8rem	38px
3.2rem	32px
2.8rem	28px
2.4rem	24px
2.2rem	22px
1.8rem	18px
1.6rem (base)	16px (base)
1.4rem	14px
1.2rem	12px
1rem	10px
0.8rem	8px
0.5rem	5px

文本左右对齐

文字对齐辅助 class，可设置为响应式。

左对齐	右对齐	居中	自适应
`.am-text-left`	`.am-text-right`	`.am-text-center`	`.am-text-justify`
`.am-sm-text-left`	`.am-sm-text-right`	`.am-sm-text-center`	`.am-sm-text-justify`
`.am-sm-only-text-left`	`.am-sm-only-text-right`	`.am-sm-only-text-center`	`.am-sm-only-text-justify`
`.am-md-text-left`	`.am-md-text-right`	`.am-md-text-center`	`.am-md-text-justify`
`.am-md-only-text-left`	`.am-md-only-text-right`	`.am-md-only-text-center`	`.am-md-only-text-justify`
`.am-lg-text-left`	`.am-lg-text-right`	`.am-lg-text-center`	`.am-lg-text-justify`

文本垂直对齐

.am-text-top - 顶对齐
.am-text-middle - 居中对齐
.am-text-bottom - 底对齐

顶部对齐

居中对齐

底部对齐

文字换行及截断

Class	描述
`.am-text-truncate`	禁止换行，超出容器部分截断（以 `...` 结束）
`.am-text-break`	超出文字容器宽度时强制换行，主要用于英文排版
`.am-text-nowrap`	禁止换行，不截断超出容器宽度部分

单行文字截断

.am-text-truncate，元素 display 属性需为 block 或 inline-block。

Copy

.am-text-truncate {

  word-wrap: normal; /* for IE */

  text-overflow: ellipsis;

  white-space: nowrap;

  overflow: hidden;

}

Copy

千万不要因为走得太久，而忘记了我们为什么出发

<!-- 超出 200px 的文字将会被截断 -->

<div class="am-text-truncate" style="width: 250px; padding: 10px;">千万不要因为走得太久，而忘记了我们为什么出发</div>

参考链接：

多行文字截断

在只针对 PC 端开发的年代，可以通过后端控制输出文字的长度来实现固定行数的效果。

但在响应式页面，这可能不再适用，只能输出足够多的文字，然后通过前端截取需要的行数。

Webkit 内核的浏览器可以通过 -webkit-line-clamp 私有属性实现多行文字截取。其他浏览器没有这个属性，我的做法通常是把容器的高度限定为 行高 * 显示的行数，超出的部分隐藏，勉强达到目的。

Copy

.line-clamp {

  overflow : hidden;

  text-overflow: ellipsis;

  display: -webkit-box;

  -webkit-line-clamp: 2; // 这里修改为要显示的行数

  -webkit-box-orient: vertical;

}

如果需要考虑其他内核的浏览器，可以使用 Amaze UI 封装的 Mixin:

Copy

line-clamp(@lines, @line-height: 1.3em) {

  text-overflow: ellipsis;

  display: -webkit-box;

  -webkit-box-orient: vertical;

  -webkit-line-clamp: @lines; // number of lines to show

  overflow: hidden;

  line-height: @line-height;

  max-height: @line-height * @lines;

}

当然，也有一些 JS 插件可以跨浏览器实现，但个人并不推荐在这种场合使用 JS。

参考链接

图片替换

CSS Image Replacement 是一个历史悠久的技术，也随着前端技术的发展不断进化。

图片替换技术兼顾显示效果、可访性、SEO，推荐开发者在网站 Logo 、设计特殊的栏目标题等场合使用。

使用 .am-text-ir class 结合背景图片实现图片替换。

Copy

Amaze UI

<header class="doc-ir-demo">

  <h1><a href="/" class="am-text-ir">Amaze UI</a></h1>

</header>

Copy

.doc-ir-demo {

  background: #3bb4f2;

}

.doc-ir-demo h1 {

  margin: 0;

  padding: 10px;

}

.doc-ir-demo a {

  display: block;

  height: 29px;

  width: 125px;

  background: url(/i/landing/logo.png) no-repeat left center;

  -webkit-background-size: 125px 24px;

  background-size: 125px 24px;

}

图文混排辅助

使用 float 实现的类似 HTML align 属性的效果，父容器要清除浮动。与 .am-fl、.am-fr 相比，浮动的元素加了 margin。

.am-align-left
.am-align-right

Copy

那时候刚好下着雨，柏油路面湿冷冷的，还闪烁着青、黄、红颜色的灯火。我们就在骑楼下躲雨，看绿色的邮筒孤独地站在街的对面。我白色风衣的大口袋里有一封要寄给南部的母亲的信。樱子说她可以撑伞过去帮我寄信。我默默点头。

“谁叫我们只带来一把小伞哪。”她微笑着说，一面撑起伞，准备过马路帮我寄信。从她伞骨渗下来的小雨点，溅在我的眼镜玻璃上。

随着一阵拔尖的煞车声，樱子的一生轻轻地飞了起来。缓缓地，飘落在湿冷的街面上，好像一只夜晚的蝴蝶。

虽然是春天，好像已是秋深了。

她只是过马路去帮我寄信。这简单的行动，却要叫我终身难忘了。我缓缓睁开眼，茫然站在骑楼下，眼里裹着滚烫的泪水。世上所有的车子都停了下来，人潮涌向马路中央。没有人知道那躺在街面的，就是我的，蝴蝶。这时她只离我五公尺，竟是那么遥远。更大的雨点溅在我的眼镜上，溅到我的生命里来。

为什么呢？只带一把雨伞？

然而我又看到樱子穿着白色的风衣，撑着伞，静静地过马路了。她是要帮我寄信的。那，那是一封写给南部母亲的信。我茫然站在骑楼下，我又看到永远的樱子走到街心。其实雨下得并不大，却是一生一世中最大的一场雨。而那封信是这样写的，年轻的樱子知不知道呢？

妈：我打算在下个月和樱子结婚。

<div class="am-cf">

  <p class="am-align-left">

    <img src="..." alt=""/>

  </p>

  ...

  <p class="am-align-right">

    <img src="..." alt=""/>

  </p>

  ...

</div>

响应式辅助

视口大小

class 释义：

show 显示，hide 隐藏，这应该不难理解；
sm、md、lg 是划分屏幕大小区间的缩写，对应 small、medium、large，网格里面做了说明；
down 指小于区间，up 指大于区间， only 指仅在这个区间。

按照上面的翻译一下下面的 class:

.am-show-sm-only: 只在 sm 区间显示
.am-show-sm-up: 大于 sm 区间时显示
.am-show-sm: 在 sm 区间显示，如果没有设置 md、lg 区间的显隐，则元素在所有区间都显示
.am-show-md-down: 小于 md 区间时显示

显示辅助 class	隐藏辅助 class
`.am-show-sm-only` `.am-show-sm-up` `.am-show-sm` `.am-show-sm-down`	`.am-hide-sm-only` `.am-hide-sm-up` `.am-hide-sm` `.am-hide-sm-down`
`.am-show-md-only` `.am-show-md-up` `.am-show-md` `.am-show-md-down`	`.am-hide-md-only` `.am-hide-md-up` `.am-hide-md` `.am-hide-md-down`
`.am-show-lg-only` `.am-show-lg-up` `.am-show-lg` `.am-show-lg-down`	`.am-hide-lg-only` `.am-hide-lg-up` `.am-hide-lg` `.am-hide-lg-down`

Copy

medium + 可见
large 可见
仅 large 可见

<ul>

  <li class="am-show-sm-only">仅 small 可见</li>

  <li class="am-show-md-up">medium + 可见</li>

  <li class="am-show-md-only">仅 medium 可见</li>

  <li class="am-show-lg-up">large 可见</li>

  <li class="am-show-lg-only">仅 large 可见</li>

</ul>

屏幕方向

横屏：.am-show-landscape, .am-hide-landscape
竖屏：.am-show-portrait, .am-hide-portrait

Copy

横屏可见...

<ul>

  <li class="am-show-landscape">横屏可见...</li>

  <li class="am-show-portrait">竖屏可见...</li>

</ul>