amazeui學習筆記--css（佈局相關3）--輔助類Utility
amazeui學習筆記--css（佈局相關3）--輔助類Utility
1、總結
一、元素清除浮動： 添加 am-cf 這個 class 便可css
二、水平滾動： .am-scrollable-horizontal 內容超出容器寬度時顯示水平滾動條。 <div class="am-scrollable-horizontal">html
三、垂直滾動： .am-scrollable-vertical 前端
四、浮動相關： .am-cf - 清除浮動 html5
.am-fl- 左浮動.am-fr- 右浮動.am-center- 水平居中
五、垂直對齊：vertical-align git
| Class | 描述 |
|---|---|
.am-vertical-align |
將這個 class 添加到父容器，父容器須要指定高度。 |
.am-vertical-align-middle |
須要垂直居中的元素 |
.am-vertical-align-bottom |
添加到須要底部對齊的元素 |
1 <div class="am-vertical-align" style="height: 150px;"> 2 <div class="am-vertical-align-middle"> 3 飄在半空中的 XX 4 </div> 5 </div>
六、顯示屬性：github
.am-block-display設置爲block.am-inline-display設置爲inline.am-inline-block-display設置爲inline-block
七、隱藏屬性：添加 .am-hide class。web
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>
八、尺寸：不加尺寸爲默認大小（16px），{size} 能夠爲 0, xs, sm, lg, xl 中之一。後端
xs- 5pxsm- 10px- default - 16px
lg- 24pxxl- 32px
九、文本顏色：默認黑色瀏覽器
<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>ide
十一、文字大小：
.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
十二、文本左右對齊
| 左對齊 | 右對齊 | 居中 | 自適應 |
|---|---|---|---|
.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 |
1三、文本垂直對齊
.am-text-top- 頂對齊.am-text-middle- 居中對齊.am-text-bottom- 底對齊
1四、文字換行及截斷（這個好誒）：truncate
| Class | 描述 |
|---|---|
.am-text-truncate |
禁止換行，超出容器部分截斷（以 ... 結束） |
.am-text-break |
超出文字容器寬度時強制換行，主要用於英文排版 |
.am-text-nowrap |
禁止換行，不截斷超出容器寬度部分 |
<!-- 超出 200px 的文字將會被截斷 --> <div class="am-text-truncate" style="width: 250px; padding: 10px;">千萬不要由於走得過久，而忘記了咱們爲何出發</div>
1五、圖片替換：使用 .am-text-ir class 結合背景圖片實現圖片替換。
能夠本身寫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 }
1六、圖文混排輔助：
使用 float 實現的相似 HTML align 屬性的效果，父容器要清除浮動。與 .am-fl、.am-fr 相比，浮動的元素加了 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>
1七、響應式輔助
.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區間時顯示
1八、屏幕方向：
- 橫屏：
.am-show-landscape,.am-hide-landscape - 豎屏：
.am-show-portrait,.am-hide-portrait
2、輔助類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>
- 1. 【學習筆記】CSS 佈局
- 2. ByteBuf和相關輔助類
- 3. Bootstrap css學習筆記（四）——圖片與輔助類
- 4. bootstrap -- css -- 輔助類
- 5. Bootstrap-CSS：輔助類
- 6. RxJava----Utility 輔助操作
- 7. amazeui學習筆記一（開始使用2）--佈局示例layouts
- 8. 【筆記】學習CSS佈局15——inline-box
- 9. CSS學習筆記——響應式佈局
- 10. CSS flex佈局一（學習筆記）
- 更多相關文章...
- • Eclipse 內容輔助 - Eclipse 教程
- • XML 相關技術 - XML 教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • NewSQL-TiDB相關
-
每一个你不满意的现在，都有一个你没有努力的曾经。