當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發布時間：2023/12/20 编程问答 33 豆豆

生活随笔收集整理的這篇文章主要介紹了 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	添加到需要底部對齊的元素

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?設置為?block
.am-inline?-?display?設置為?inline
.am-inline-block?-?display?設置為?inline-block

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

1 .am-hide { 2 display: none !important; 3 visibility: hidden !important; 4 } 5 6  7 <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、文本顏色：默認黑色

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	禁止換行，不截斷超出容器寬度部分

<div class="am-text-truncate" style="width: 250px; padding: 10px;">千萬不要因為走得太久，而忘記了我們為什么出發</div>

15、圖片替換：使用?.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 }

16、圖文混排輔助：

使用?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>

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

布局相關
- 容器
- 浮動相關
- 垂直對齊
- 元素顯示
- 內外邊距
文本工具
- 字體
- 文本顏色
- 鏈接顏色減淡
- 文字大小
- 文本左右對齊
- 文本垂直對齊
- 文字換行及截斷
- 圖片替換
- 圖文混排輔助
響應式輔助
- 視口大小
- 屏幕方向

一些常用樣式的 class，與 LESS minxins 的區別在于：mixins 在樣式中調用，而 utility 直接在 HTML 中引用。比如要對一個元素清除浮動，在元素上添加?am-cf?這個 class 即可。

布局相關

容器

基本容器

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

參考鏈接

CSS 實現水平、垂直居中
Centering in the Unknown?
Cube Layout.css

元素顯示

顯示屬性

.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  <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?值的內外邊距輔助類。

MarginPadding

.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.
千萬不要因為走得太久，而忘記了我們為什么出發。
千萬不要因為走得太久，而忘記了我們為什麼出發。

文本顏色

?Copy

千萬不要因為走得太久，而忘記了我們為什么出發。

鏈接顏色減淡

超鏈接顏色默認為主色（藍色），添加?.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

千萬不要因為走得太久，而忘記了我們為什么出發。

常用字號參考：

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

文本左右對齊

文字對齊輔助 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 千萬不要因為走得太久，而忘記了我們為什么出發  <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?私有屬性實現多行文字截取。其他瀏覽器沒有這個屬性，我的做法通常是把容器的高度限定為?行高 * 顯示的行數，超出的部分隱藏，勉強達到目的。

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

參考鏈接

-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 結合背景圖片實現圖片替換。

?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?實現的類似 HTML?align?屬性的效果，父容器要清除浮動。與?.am-fl、.am-fr?相比，浮動的元素加了?margin。

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

?Copy

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

“誰叫我們只帶來一把小傘哪。”她微笑著說，一面撐起傘，準備過馬路幫我寄信。從她傘骨滲下來的小雨點，濺在我的眼鏡玻璃上。

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

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

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

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

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

媽：我打算在下個月和櫻子結婚。

響應式輔助

視口大小

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

橫屏可見...

轉載于:https://www.cnblogs.com/Renyi-Fan/p/9008149.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： cocos2dx3.0五种屏幕适配模式,
下一篇：八个老师随机分配三个办公室

编程问答

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

amazeui學習筆記--css（布局相關3）--輔助類Utility

一、總結

二、輔助類Utility

目錄

布局相關

容器

基本容器

水平滾動

垂直滾動

浮動相關

垂直對齊

垂直居中對齊

底部對齊

參考鏈接

元素顯示

顯示屬性

隱藏元素

內外邊距

尺寸

class 列表

文本工具

字體

文本顏色

鏈接顏色減淡

超級鏈接

文字大小

文本左右對齊

文本垂直對齊

文字換行及截斷

單行文字截斷

多行文字截斷

圖片替換

Amaze UI

圖文混排輔助

響應式輔助

視口大小

屏幕方向

總結