amazeui学习笔记--css（布局相关3）--辅助类Utility
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- 5pxsm- 10px- default - 16px
lg- 24pxxl- 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、响应式辅助
.am-[show|hide]-[sm|md|lg][-up|-down|-only]，调整浏览器窗口大小查看元素的显隐。
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
目录
一些常用样式的 class，与 LESS minxins 的区别在于：mixins 在样式中调用，而 utility 直接在 HTML 中引用。比如要对一个元素清除浮动，在元素上添加 am-cf 这个 class 即可。
布局相关
容器
基本容器
.am-container，盒模型为 border-box，水平居中对齐，清除浮动。
.am-container 放到了网格里面。
水平滚动
.am-scrollable-horizontal 内容超出容器宽度时显示水平滚动条。
| -= 表格标题 =- | -= 表格标题 =- | -= 表格标题 =- | -= 表格标题 =- | -= 表格标题 =- | -= 表格标题 =- | -= 表格标题 =- | -= 表格标题 =- |
|---|---|---|---|---|---|---|---|
| 表格数据 | 表格数据 | 表格数据 | 表格数据 | 表格数据 | 表格数据 | 表格数据 | 表格数据 |
| 表格数据 | 表格数据 | 表格数据 | 表格数据 | 表格数据 | 表格数据 | 表格数据 | 表格数据 |
| 表格数据 | 表格数据 | 表格数据 | 表格数据 | 表格数据 | 表格数据 | 表格数据 | 表格数据 |
<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 清除浮动（参考）
.am-cf {
.clearfix();
}.am-fl- 左浮动.am-fr- 右浮动.am-center- 水平居中
.am-center {
display: block;
margin-left: auto;
margin-right: auto;
}示例：
<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 |
添加到需要底部对齐的元素 |
垂直居中对齐
<div class="am-vertical-align" style="height: 150px;">
<div class="am-vertical-align-middle">
飘在半空中的 XX
</div>
</div>
``底部对齐
<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。
.am-hide {
display: none !important;
visibility: hidden !important;
}<!-- 隐藏了，Demo 里看不到按钮 -->
<button class="am-btn am-btn-danger am-hide">I'm hidden.....</button>内外边距
尺寸
xs- 5pxsm- 10px- default - 16px
lg- 24pxxl- 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 源代码中使用。
下面为几种字体系列演示：
The quick brown fox jumps over the lazy dog.
千万不要因为走得太久，而忘记了我们为什么出发。
千萬不要因為走得太久，而忘記了我們為什麼出發。
The quick brown fox jumps over the lazy dog.
千万不要因为走得太久，而忘记了我们为什么出发。
千萬不要因為走得太久，而忘記了我們為什麼出發。
The quick brown fox jumps over the lazy dog.
千万不要因为走得太久，而忘记了我们为什么出发。
千萬不要因為走得太久，而忘記了我們為什麼出發。
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>文本颜色
千万不要因为走得太久，而忘记了我们为什么出发。
千万不要因为走得太久，而忘记了我们为什么出发。
千万不要因为走得太久，而忘记了我们为什么出发。
千万不要因为走得太久，而忘记了我们为什么出发。
千万不要因为走得太久，而忘记了我们为什么出发。
千万不要因为走得太久，而忘记了我们为什么出发。
<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 将链接颜色设置为灰色。
<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
千万不要因为走得太久，而忘记了我们为什么出发。
千万不要因为走得太久，而忘记了我们为什么出发。
千万不要因为走得太久，而忘记了我们为什么出发。
千万不要因为走得太久，而忘记了我们为什么出发。
千万不要因为走得太久，而忘记了我们为什么出发。
千万不要因为走得太久，而忘记了我们为什么出发。
千万不要因为走得太久，而忘记了我们为什么出发。
<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。
.am-text-truncate {
word-wrap: normal; /* for IE */
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}<!-- 超出 200px 的文字将会被截断 -->
<div class="am-text-truncate" style="width: 250px; padding: 10px;">千万不要因为走得太久，而忘记了我们为什么出发</div>参考链接：
- https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
- https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow
- IE8 & 9 white-space nowrap 失效
多行文字截断
在只针对 PC 端开发的年代，可以通过后端控制输出文字的长度来实现固定行数的效果。
但在响应式页面，这可能不再适用，只能输出足够多的文字，然后通过前端截取需要的行数。
Webkit 内核的浏览器可以通过 -webkit-line-clamp 私有属性实现多行文字截取。其他浏览器没有这个属性，我的做法通常是把容器的高度限定为 行高 * 显示的行数，超出的部分隐藏，勉强达到目的。
.line-clamp {
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; // 这里修改为要显示的行数
-webkit-box-orient: vertical;
}如果需要考虑其他内核的浏览器，可以使用 Amaze UI 封装的 Mixin:
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。
参考链接
- -webkit-line-clamp
- Line Clampin’ - Truncating Multiple Line Text
- CSS Ellipsis: How to Manage Multi-Line Ellipsis in Pure CSS
- Clamp.js
- TextTailor.JS
图片替换
CSS Image Replacement 是一个历史悠久的技术，也随着前端技术的发展不断进化。
图片替换技术兼顾显示效果、可访性、SEO，推荐开发者在网站 Logo 、设计特殊的栏目标题等场合使用。
使用 .am-text-ir 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: 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
那时候刚好下着雨，柏油路面湿冷冷的，还闪烁着青、黄、红颜色的灯火。我们就在骑楼下躲雨，看绿色的邮筒孤独地站在街的对面。我白色风衣的大口袋里有一封要寄给南部的母亲的信。樱子说她可以撑伞过去帮我寄信。我默默点头。
“谁叫我们只带来一把小伞哪。”她微笑着说，一面撑起伞，准备过马路帮我寄信。从她伞骨渗下来的小雨点，溅在我的眼镜玻璃上。
随着一阵拔尖的煞车声，樱子的一生轻轻地飞了起来。缓缓地，飘落在湿冷的街面上，好像一只夜晚的蝴蝶。
虽然是春天，好像已是秋深了。
她只是过马路去帮我寄信。这简单的行动，却要叫我终身难忘了。我缓缓睁开眼，茫然站在骑楼下，眼里裹着滚烫的泪水。世上所有的车子都停了下来，人潮涌向马路中央。没有人知道那躺在街面的，就是我的，蝴蝶。这时她只离我五公尺，竟是那么遥远。更大的雨点溅在我的眼镜上，溅到我的生命里来。
为什么呢？只带一把雨伞？
然而我又看到樱子穿着白色的风衣，撑着伞，静静地过马路了。她是要帮我寄信的。那，那是一封写给南部母亲的信。我茫然站在骑楼下，我又看到永远的樱子走到街心。其实雨下得并不大，却是一生一世中最大的一场雨。而那封信是这样写的，年轻的樱子知不知道呢？
妈：我打算在下个月和樱子结婚。
<div class="am-cf">
<p class="am-align-left">
<img src="..." alt=""/>
</p>
...
<p class="am-align-right">
<img src="..." alt=""/>
</p>
...
</div>响应式辅助
视口大小
.am-[show|hide]-[sm|md|lg][-up|-down|-only]，调整浏览器窗口大小查看元素的显隐。
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 |
- 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
- 横屏可见...
<ul>
<li class="am-show-landscape">横屏可见...</li>
<li class="am-show-portrait">竖屏可见...</li>
</ul>最新文章
- python学习笔记（二）
- ConcurrentDictionary线程不安全么，你难道没疑惑，你难道弄懂了么？
- CSS3与页面布局学习笔记（二）——盒子模型(Box Model)、边距折叠、内联与块标签、CSSReset
- Solution to “VirtualBox can't operate in VMX root mode” error in Windows 7
- Cloudera Hadoop什么是CDH及CDH版本介绍
- Mater Nginx(2) - A Configuration Guide
- Android小记之--android:listSelector
- input的width和padding-left同时存在时IE兼容问题
- [ An Ac a Day ^_^ ] hdu 2830 矩阵交换II
- php笔记(二)PHP类和对象之Static静态关键字
- 前端布局常见IE6 bug的解决方法，清除浮动的几种方法以及各自的优缺点
- XGoServer 一个基础性、模块完整且安全可靠的服务端框架
- 批量录入快递地址-快宝地址服务（PHP代码示例）
- CI、CD相关概念
- 卸载(uninstalled)Mac os Jenkins pkg 安装包
- [NOI2009]二叉查找树
- Android Fragment 详解（未完...）
- 解决wireshark检测不到网卡的问题
- jboss-as- 7.1.1.Final配置jndi数据源
- 【bzoj2844】 albus就是要第一个出场