amazeui學(xué)習(xí)筆記--css（布局相關(guān)3）--輔助類Utility

一、總結(jié)

1、元素清除浮動(dòng)：?添加?am-cf?這個(gè) class 即可

2、水平滾動(dòng)：?.am-scrollable-horizontal?內(nèi)容超出容器寬度時(shí)顯示水平滾動(dòng)條。??<div class="am-scrollable-horizontal">

3、垂直滾動(dòng)：?.am-scrollable-vertical?

4、浮動(dòng)相關(guān)：?.am-cf?- 清除浮動(dòng)?

• .am-fl?- 左浮動(dòng)
• .am-fr?- 右浮動(dòng)
• .am-center?- 水平居中

5、垂直對(duì)齊：vertical-align?

Class描述

.am-vertical-align	將這個(gè) class 添加到父容器，父容器需要指定高度。
.am-vertical-align-middle	需要垂直居中的元素
.am-vertical-align-bottom	添加到需要底部對(duì)齊的元素

1 <div class="am-vertical-align" style="height: 150px;"> 2 <div class="am-vertical-align-middle"> 3 飄在半空中的 XX 4 </div> 5 </div>

6、顯示屬性：

• .am-block?-?display?設(shè)置為?block
• .am-inline?-?display?設(shè)置為?inline
• .am-inline-block?-?display?設(shè)置為?inline-block

7、隱藏屬性：添加?.am-hide?class。

1 .am-hide { 2 display: none !important; 3 visibility: hidden !important; 4 } 5 6 <!-- 隱藏了，Demo 里看不到按鈕 --> 7 <button class="am-btn am-btn-danger am-hide">I'm hidden.....</button>

8、尺寸：不加尺寸為默認(rèn)大小（16px），{size}?可以為?0, xs, sm, lg, xl?中之一。

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

9、文本顏色：默認(rèn)黑色

<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、鏈接顏色變灰：超鏈接顏色默認(rèn)為主色（藍(lán)色），添加?.am-link-muted?class 將鏈接顏色設(shè)置為灰色。?<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、文本左右對(duì)齊

左對(duì)齊右對(duì)齊居中自適應(yīng)

.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、文本垂直對(duì)齊

• .am-text-top?- 頂對(duì)齊
• .am-text-middle?- 居中對(duì)齊
• .am-text-bottom?- 底對(duì)齊

14、文字換行及截?cái)?/span>（這個(gè)好誒）：truncate

Class描述

.am-text-truncate	禁止換行，超出容器部分截?cái)?#xff08;以?...?結(jié)束）
.am-text-break	超出文字容器寬度時(shí)強(qiáng)制換行，主要用于英文排版
.am-text-nowrap	禁止換行，不截?cái)喑鋈萜鲗挾炔糠?/td>

<!-- 超出 200px 的文字將會(huì)被截?cái)?--> <div class="am-text-truncate" style="width: 250px; padding: 10px;">千萬(wàn)不要因?yàn)樽叩锰?#xff0c;而忘記了我們?yōu)槭裁闯霭l(fā)</div>

15、圖片替換：使用?.am-text-ir?class 結(jié)合背景圖片實(shí)現(xiàn)圖片替換。

可以自己寫class啊

1 <header class="doc-ir-demo"> 2 <h1><a href="/" class="am-text-ir">Amaze UI</a></h1> 3 </header> 4 5 6 .doc-ir-demo { 7 background: #3bb4f2; 8 } 9 10 .doc-ir-demo h1 { 11 margin: 0; 12 padding: 10px; 13 } 14 15 .doc-ir-demo a { 16 display: block; 17 height: 29px; 18 width: 125px; 19 background: url(/i/landing/logo.png) no-repeat left center; 20 -webkit-background-size: 125px 24px; 21 background-size: 125px 24px; 22 }

16、圖文混排輔助：

使用?float?實(shí)現(xiàn)的類似 HTML?align?屬性的效果，父容器要清除浮動(dòng)。與?.am-fl、.am-fr?相比，浮動(dòng)的元素加了?margin。

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

1 <div class="am-cf"> 2 <p class="am-align-left"> 3 <img src="..." alt=""/> 4 </p> 5 ... 6 <p class="am-align-right"> 7 <img src="..." alt=""/> 8 </p> 9 ... 10 </div>

17、響應(yīng)式輔助

.am-[show|hide]-[sm|md|lg][-up|-down|-only]，調(diào)整瀏覽器窗口大小查看元素的顯隱。

class 釋義：

• show?顯示，hide?隱藏，這應(yīng)該不難理解；
• sm、md、lg?是劃分屏幕大小區(qū)間的縮寫，對(duì)應(yīng) small、medium、large，網(wǎng)格里面做了說(shuō)明；
• down?指小于區(qū)間，up?指大于區(qū)間，?only?指僅在這個(gè)區(qū)間。

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

• .am-show-sm-only: 只在?sm?區(qū)間顯示
• .am-show-sm-up: 大于?sm?區(qū)間時(shí)顯示
• .am-show-sm: 在?sm?區(qū)間顯示，如果沒(méi)有設(shè)置?md、lg?區(qū)間的顯隱，則元素在所有區(qū)間都顯示
• .am-show-md-down: 小于?md?區(qū)間時(shí)顯示

18、屏幕方向：

• 橫屏：.am-show-landscape,?.am-hide-landscape
• 豎屏：.am-show-portrait,?.am-hide-portrait

?

二、輔助類Utility

目錄

• 布局相關(guān)
  • 容器
  • 浮動(dòng)相關(guān)
  • 垂直對(duì)齊
  • 元素顯示
  • 內(nèi)外邊距
• 文本工具
  • 字體
  • 文本顏色
  • 鏈接顏色減淡
  • 文字大小
  • 文本左右對(duì)齊
  • 文本垂直對(duì)齊
  • 文字換行及截?cái)?/li>
  • 圖片替換
  • 圖文混排輔助
• 響應(yīng)式輔助
  • 視口大小
  • 屏幕方向

一些常用樣式的 class，與 LESS minxins 的區(qū)別在于：mixins 在樣式中調(diào)用，而 utility 直接在 HTML 中引用。比如要對(duì)一個(gè)元素清除浮動(dòng)，在元素上添加?am-cf?這個(gè) class 即可。

布局相關(guān)

容器

基本容器

.am-container，盒模型為?border-box，水平居中對(duì)齊，清除浮動(dòng)。

.am-container?放到了網(wǎng)格里面。

水平滾動(dòng)

.am-scrollable-horizontal?內(nèi)容超出容器寬度時(shí)顯示水平滾動(dòng)條。

?Copy -= 表格標(biāo)題 =--= 表格標(biāo)題 =--= 表格標(biāo)題 =--= 表格標(biāo)題 =--= 表格標(biāo)題 =--= 表格標(biāo)題 =--= 表格標(biāo)題 =--= 表格標(biāo)題 =-

表格數(shù)據(jù)	表格數(shù)據(jù)	表格數(shù)據(jù)	表格數(shù)據(jù)	表格數(shù)據(jù)	表格數(shù)據(jù)	表格數(shù)據(jù)	表格數(shù)據(jù)
表格數(shù)據(jù)	表格數(shù)據(jù)	表格數(shù)據(jù)	表格數(shù)據(jù)	表格數(shù)據(jù)	表格數(shù)據(jù)	表格數(shù)據(jù)	表格數(shù)據(jù)
表格數(shù)據(jù)	表格數(shù)據(jù)	表格數(shù)據(jù)	表格數(shù)據(jù)	表格數(shù)據(jù)	表格數(shù)據(jù)	表格數(shù)據(jù)	表格數(shù)據(jù)

<div class="am-scrollable-horizontal"><table class="am-table am-table-bordered am-table-striped am-text-nowrap"> ... </table> </div>

垂直滾動(dòng)

.am-scrollable-vertical?內(nèi)容超過(guò)設(shè)置的高度以后顯示滾動(dòng)條，默認(rèn)設(shè)置的高度為?240px。

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

每個(gè)人都有一個(gè)死角， 自己走不出來(lái)，別人也闖不進(jìn)去。
我把最深沉的秘密放在那里。
你不懂我，我不怪你。

每個(gè)人都有一道傷口， 或深或淺，蓋上布，以為不存在。
我把最殷紅的鮮血涂在那里。
你不懂我，我不怪你。

每個(gè)人都有一場(chǎng)愛(ài)戀， 用心、用情、用力，感動(dòng)也感傷。
我把最炙熱的心情 藏在那里。
你不懂我，我不怪你。

每個(gè)人都有 一行眼淚， 喝下的冰冷的水，醞釀成的熱淚。
我把最心酸的委屈匯在那里。
你不懂我，我不怪你。

每個(gè)人都有一段告白， 忐忑、不安，卻飽含真心和勇氣。
我把最抒情的語(yǔ)言用在那里。
你不懂我，我不怪你。

浮動(dòng)相關(guān)

• .am-cf?- 清除浮動(dòng)

• .am-nbfc?- 使用?overflow: hidden;?創(chuàng)建新的?BFC?清除浮動(dòng)（參考）

?Copy .am-cf {.clearfix(); }

• .am-fl?- 左浮動(dòng)
• .am-fr?- 右浮動(dòng)
• .am-center?- 水平居中

?Copy .am-center {display: block;margin-left: auto;margin-right: auto; }

示例：

?Copy 向左浮動(dòng)向右浮動(dòng) <div class="am-cf"><button class="am-btn am-btn-success am-fl">向左浮動(dòng)</button> <button class="am-btn am-btn-success am-fr">向右浮動(dòng)</button> </div>

垂直對(duì)齊

垂直對(duì)齊的原理為把父容器內(nèi)的 “幽靈”元素（使用偽元素）高度設(shè)置為?100%，再通過(guò)設(shè)置需要對(duì)齊的元素?vertical-align?屬性實(shí)現(xiàn)（參考）。

Class描述

.am-vertical-align	將這個(gè) class 添加到父容器，父容器需要指定高度。
.am-vertical-align-middle	需要垂直居中的元素
.am-vertical-align-bottom	添加到需要底部對(duì)齊的元素

垂直居中對(duì)齊

?Copy 飄在半空中的 XX <div class="am-vertical-align" style="height: 150px;"> <div class="am-vertical-align-middle"> 飄在半空中的 XX </div> </div> ``

底部對(duì)齊

?Copy DOWN 到了谷底...降到零下幾度 C <div class="am-vertical-align" style="height: 150px;"> <div class="am-vertical-align-bottom"> DOWN 到了谷底...降到零下幾度 C </div> </div> ``

參考鏈接

• CSS 實(shí)現(xiàn)水平、垂直居中
• Centering in the Unknown?
• Cube Layout.css

元素顯示

顯示屬性

• .am-block?-?display?設(shè)置為?block
• .am-inline?-?display?設(shè)置為?inline
• .am-inline-block?-?display?設(shè)置為?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>

內(nèi)外邊距

尺寸

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

class 列表

不加尺寸為默認(rèn)大小（16px），{size}?可以為?0, xs, sm, lg, xl?中之一。

• v2.4:?增加?0?值的內(nèi)外邊距輔助類。

MarginPadding

.am-margin .am-margin-{size}	.am-padding .am-padding-{size}
水平方向外邊距 .am-margin-horizontal .am-margin-horizontal-{size}	水平方向內(nèi)邊距 .am-padding-horizontal .am-padding-horizontal-{size}
垂直方向外邊距 .am-margin-vertical .am-margin-vertical-{size}	垂直方向內(nèi)邊距 .am-padding-vertical .am-padding-vertical-{size}
左外邊距 .am-margin-left .am-margin-left-{size}	左內(nèi)邊距 .am-padding-left .am-padding-left-{size}
右外邊距 .am-margin-right .am-margin-right-{size}	右內(nèi)邊距 .am-padding-right .am-padding-right-{size}
上外邊距 .am-margin-top .am-margin-top-{size}	上內(nèi)邊距 .am-padding-top .am-padding-top-{size}
下外邊距 .am-margin-bottom .am-margin-bottom-{size}	下內(nèi)邊距 .am-padding-bottom .am-padding-bottom-{size}

文本工具

字體

• .am-sans-serif?非襯線，Amaze UI 主要使用的。
• .am-serif?襯線字體，中文為宋體，Amaze UI 中未使用。
• .am-kai?應(yīng)為襯線字體，中文為楷體，Amaze UI?<blockquote>?使用此。
• .am-monospace?等寬字體，Amaze UI 源代碼中使用。

下面為幾種字體系列演示：

?Copy

The quick brown fox jumps over the lazy dog.
千萬(wàn)不要因?yàn)樽叩锰?#xff0c;而忘記了我們?yōu)槭裁闯霭l(fā)。
千萬(wàn)不要因?yàn)樽叩锰?#xff0c;而忘記了我們?yōu)槭颤N出發(fā)。

The quick brown fox jumps over the lazy dog.
千萬(wàn)不要因?yàn)樽叩锰?#xff0c;而忘記了我們?yōu)槭裁闯霭l(fā)。
千萬(wàn)不要因?yàn)樽叩锰?#xff0c;而忘記了我們?yōu)槭颤N出發(fā)。

The quick brown fox jumps over the lazy dog.
千萬(wàn)不要因?yàn)樽叩锰?#xff0c;而忘記了我們?yōu)槭裁闯霭l(fā)。
千萬(wàn)不要因?yàn)樽叩锰?#xff0c;而忘記了我們?yōu)槭颤N出發(fā)。

The quick brown fox jumps over the lazy dog.
千萬(wàn)不要因?yàn)樽叩锰?#xff0c;而忘記了我們?yōu)槭裁闯霭l(fā)。
千萬(wàn)不要因?yàn)樽叩锰?#xff0c;而忘記了我們?yōu)槭颤N出發(fā)。

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

文本顏色

?Copy

千萬(wàn)不要因?yàn)樽叩锰?#xff0c;而忘記了我們?yōu)槭裁闯霭l(fā)。

千萬(wàn)不要因?yàn)樽叩锰?#xff0c;而忘記了我們?yōu)槭裁闯霭l(fā)。

千萬(wàn)不要因?yàn)樽叩锰?#xff0c;而忘記了我們?yōu)槭裁闯霭l(fā)。

千萬(wàn)不要因?yàn)樽叩锰?#xff0c;而忘記了我們?yōu)槭裁闯霭l(fā)。

千萬(wàn)不要因?yàn)樽叩锰?#xff0c;而忘記了我們?yōu)槭裁闯霭l(fā)。

千萬(wàn)不要因?yàn)樽叩锰?#xff0c;而忘記了我們?yōu)槭裁闯霭l(fā)。

<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>

鏈接顏色減淡

超鏈接顏色默認(rèn)為主色（藍(lán)色），添加?.am-link-muted?class 將鏈接顏色設(shè)置為灰色。

?Copy 超級(jí)鏈接

超級(jí)鏈接

• 超級(jí)鏈接
• 超級(jí)鏈接

<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

千萬(wàn)不要因?yàn)樽叩锰?#xff0c;而忘記了我們?yōu)槭裁闯霭l(fā)。

千萬(wàn)不要因?yàn)樽叩锰?#xff0c;而忘記了我們?yōu)槭裁闯霭l(fā)。

千萬(wàn)不要因?yàn)樽叩锰?#xff0c;而忘記了我們?yōu)槭裁闯霭l(fā)。

千萬(wàn)不要因?yàn)樽叩锰?#xff0c;而忘記了我們?yōu)槭裁闯霭l(fā)。

千萬(wàn)不要因?yàn)樽叩锰?#xff0c;而忘記了我們?yōu)槭裁闯霭l(fā)。

千萬(wàn)不要因?yàn)樽叩锰?#xff0c;而忘記了我們?yōu)槭裁闯霭l(fā)。

千萬(wàn)不要因?yàn)樽叩锰?#xff0c;而忘記了我們?yōu)槭裁闯霭l(fā)。

<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>

常用字號(hào)參考：

REMsPixels

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

文本左右對(duì)齊

文字對(duì)齊輔助 class，可設(shè)置為響應(yīng)式。

左對(duì)齊右對(duì)齊居中自適應(yīng)

.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

文本垂直對(duì)齊

• .am-text-top?- 頂對(duì)齊
• .am-text-middle?- 居中對(duì)齊
• .am-text-bottom?- 底對(duì)齊

?頂部對(duì)齊 ?居中對(duì)齊 ?底部對(duì)齊

文字換行及截?cái)?/h3> Class描述

.am-text-truncate	禁止換行，超出容器部分截?cái)?#xff08;以?...?結(jié)束）
.am-text-break	超出文字容器寬度時(shí)強(qiáng)制換行，主要用于英文排版
.am-text-nowrap	禁止換行，不截?cái)喑鋈萜鲗挾炔糠?/td>

單行文字截?cái)?/h4>

.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 千萬(wàn)不要因?yàn)樽叩锰?#xff0c;而忘記了我們?yōu)槭裁闯霭l(fā) <!-- 超出 200px 的文字將會(huì)被截?cái)?--> <div class="am-text-truncate" style="width: 250px; padding: 10px;">千萬(wàn)不要因?yàn)樽叩锰?#xff0c;而忘記了我們?yōu)槭裁闯霭l(fā)</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 失效

多行文字截?cái)?/h4>

在只針對(duì) PC 端開(kāi)發(fā)的年代，可以通過(guò)后端控制輸出文字的長(zhǎng)度來(lái)實(shí)現(xiàn)固定行數(shù)的效果。

但在響應(yīng)式頁(yè)面，這可能不再適用，只能輸出足夠多的文字，然后通過(guò)前端截取需要的行數(shù)。

Webkit 內(nèi)核的瀏覽器可以通過(guò)?-webkit-line-clamp?私有屬性實(shí)現(xiàn)多行文字截取。其他瀏覽器沒(méi)有這個(gè)屬性，我的做法通常是把容器的高度限定為?行高 * 顯示的行數(shù)，超出的部分隱藏，勉強(qiáng)達(dá)到目的。

?Copy .line-clamp {overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2; // 這里修改為要顯示的行數(shù)-webkit-box-orient: vertical; }

如果需要考慮其他內(nèi)核的瀏覽器，可以使用 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; }

當(dāng)然，也有一些 JS 插件可以跨瀏覽器實(shí)現(xiàn)，但個(gè)人并不推薦在這種場(chǎng)合使用 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 是一個(gè)歷史悠久的技術(shù)，也隨著前端技術(shù)的發(fā)展不斷進(jìn)化。

圖片替換技術(shù)兼顧顯示效果、可訪性、SEO，推薦開(kāi)發(fā)者在網(wǎng)站 Logo 、設(shè)計(jì)特殊的欄目標(biāo)題等場(chǎng)合使用。

使用?.am-text-ir?class 結(jié)合背景圖片實(shí)現(xiàn)圖片替換。

?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; }

• Update CSS image replacement technique
• CSS-Tricks | Search Results for 'image replace'

圖文混排輔助

使用?float?實(shí)現(xiàn)的類似 HTML?align?屬性的效果，父容器要清除浮動(dòng)。與?.am-fl、.am-fr?相比，浮動(dòng)的元素加了?margin。

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

?Copy

那時(shí)候剛好下著雨，柏油路面濕冷冷的，還閃爍著青、黃、紅顏色的燈火。我們就在騎樓下躲雨，看綠色的郵筒孤獨(dú)地站在街的對(duì)面。我白色風(fēng)衣的大口袋里有一封要寄給南部的母親的信。櫻子說(shuō)她可以撐傘過(guò)去幫我寄信。我默默點(diǎn)頭。

“誰(shuí)叫我們只帶來(lái)一把小傘哪。”她微笑著說(shuō)，一面撐起傘，準(zhǔn)備過(guò)馬路幫我寄信。從她傘骨滲下來(lái)的小雨點(diǎn)，濺在我的眼鏡玻璃上。

隨著一陣拔尖的煞車聲，櫻子的一生輕輕地飛了起來(lái)。緩緩地，飄落在濕冷的街面上，好像一只夜晚的蝴蝶。

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

她只是過(guò)馬路去幫我寄信。這簡(jiǎn)單的行動(dòng)，卻要叫我終身難忘了。我緩緩睜開(kāi)眼，茫然站在騎樓下，眼里裹著滾燙的淚水。世上所有的車子都停了下來(lái)，人潮涌向馬路中央。沒(méi)有人知道那躺在街面的，就是我的，蝴蝶。這時(shí)她只離我五公尺，竟是那么遙遠(yuǎn)。更大的雨點(diǎn)濺在我的眼鏡上，濺到我的生命里來(lái)。

為什么呢？只帶一把雨傘？

然而我又看到櫻子穿著白色的風(fēng)衣，撐著傘，靜靜地過(guò)馬路了。她是要幫我寄信的。那，那是一封寫給南部母親的信。我茫然站在騎樓下，我又看到永遠(yuǎn)的櫻子走到街心。其實(shí)雨下得并不大，卻是一生一世中最大的一場(chǎng)雨。而那封信是這樣寫的，年輕的櫻子知不知道呢？

媽：我打算在下個(gè)月和櫻子結(jié)婚。

<div class="am-cf"><p class="am-align-left"> <img src="..." alt=""/> </p> ... <p class="am-align-right"> <img src="..." alt=""/> </p> ... </div>

響應(yīng)式輔助

視口大小

.am-[show|hide]-[sm|md|lg][-up|-down|-only]，調(diào)整瀏覽器窗口大小查看元素的顯隱。

class 釋義：

• show?顯示，hide?隱藏，這應(yīng)該不難理解；
• sm、md、lg?是劃分屏幕大小區(qū)間的縮寫，對(duì)應(yīng) small、medium、large，網(wǎng)格里面做了說(shuō)明；
• down?指小于區(qū)間，up?指大于區(qū)間，?only?指僅在這個(gè)區(qū)間。

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

• .am-show-sm-only: 只在?sm?區(qū)間顯示
• .am-show-sm-up: 大于?sm?區(qū)間時(shí)顯示
• .am-show-sm: 在?sm?區(qū)間顯示，如果沒(méi)有設(shè)置?md、lg?區(qū)間的顯隱，則元素在所有區(qū)間都顯示
• .am-show-md-down: 小于?md?區(qū)間時(shí)顯示

顯示輔助 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 + 可見(jiàn)
• large 可見(jiàn)
• 僅 large 可見(jiàn)

<ul><li class="am-show-sm-only">僅 small 可見(jiàn)</li> <li class="am-show-md-up">medium + 可見(jiàn)</li> <li class="am-show-md-only">僅 medium 可見(jiàn)</li> <li class="am-show-lg-up">large 可見(jiàn)</li> <li class="am-show-lg-only">僅 large 可見(jiàn)</li> </ul>

屏幕方向

• 橫屏：.am-show-landscape,?.am-hide-landscape
• 豎屏：.am-show-portrait,?.am-hide-portrait

?Copy

• 橫屏可見(jiàn)...

<ul><li class="am-show-landscape">橫屏可見(jiàn)...</li> <li class="am-show-portrait">豎屏可見(jiàn)...</li> </ul>

?

轉(zhuǎn)載于:https://www.cnblogs.com/Renyi-Fan/p/9008149.html

總結(jié)

以上是生活随笔為你收集整理的amazeui学习笔记--css（布局相关3）--辅助类Utility的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。