▎目錄
14. 利用 Flexbox 去除多餘的 Margin 技巧
16. 幫沒有類別的連結設定一個預設樣式
17. 一致的垂直韻律
18. 等比例的方塊
19. 為破圖定義樣式
20. 用 rem
來調整全域大小;用 em
來調整區域大小
21. 隱藏沒有靜音並設定自動播放的影片
22. 使用 :root
選擇器來設定彈性的字體大小
23. 為了更好的行動體驗來設定表單元素的 font-size
24. 使用指標事件來控制滑鼠事件
▎14. 利用 Flexbox 去除多餘的 Margin 技巧
排版的時候,為了設計出每一欄的間隙 (gutters),一般都會用到像是 nth-、first- 和 last-child 的技巧,來去除頭尾多餘的間隙,不如使用 Flexbox 的 space-between 屬性:
.list {
display: flex;
justify-content: space-between;
}.list .person {
flex-basis: 23%;
}
補充:space-between / space-around / space-evenly 的差異
[ 返回目錄 ]
▎15. 利用屬性選擇器填滿空白連結的文字內容
當 <a>
元素沒有文字內容,但有 href
屬性的時候,可以這樣做:
a[href^='http']:empty::before {
content: attr(href);
}
補充:CSS 選擇器說明
a[href]
選擇所有具有href
屬性的a
a[href^="http"]
選擇所有具有href
屬性且開頭為http
的a
:empty
選擇沒有任何子代的元素,這裡的子代包含文字
[ 返回目錄 ]
▎16. 幫沒有類別的連結設定一個預設樣式
幫沒有套用 class 的超連結設定一個預設樣式:
a[href]:not([class]) {
color: #008000;
text-decoration: underline;
}
使用者透過後台 CMS 系統插入的超連結通常沒有 class 屬性,以上樣式可以針對這些超連結進行設定,且不會影響其它樣式定義。
[ 返回目錄 ]
▎17. 一致的垂直韻律
在元素中使用 通用選擇器 (*) ,可以確保一致的垂直韻律 (consistent vertical rhythm):
.intro > * {
margin-bottom: 1.25rem;
}
一致的垂直韻律可以提供視覺美感,並且讓內容更具可讀性
[ 返回目錄 ]
▎18. 等比例的方塊
要建立一個固定比例的方塊 (Box),你需要的就是將 padding-top
或 padding-bottom
設定到 div 元素:
.container {
height: 0;
padding-bottom: 20%;
position: relative;
}.container div {
border: 2px dashed #ddd;
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
}
在 padding-bottom
設定 20%
意味著各個 div 方塊的高度等同於 20% 的寬度。無論 Viewport 現在的寬度多少,子元素的 div 將維持其寬高比(100% / 20% = 5:1)。
補充:使用 padding-top
或 padding-bottom
的差異
[ 返回目錄 ]
▎19. 為破圖定義樣式
只要一點 CSS 就可以美化所有破圖:
img {
display: block;
font-family: sans-serif;
font-weight: 300;
height: auto;
line-height: 2;
position: relative;
text-align: center;
width: 100%;
}
接著新增一個 偽元素規則 (pseudo-elements rules) 來顯示使用者訊息,以及這張破圖的 URL 參考:
img::before {
content: "We're sorry, the image below is broken :(";
display: block;
margin-bottom: 10px;
}img::after {
content: '(url: ' attr(src) ')';
display: block;
font-size: 12px;
}
想學習更多這類樣式技巧,可以參考 Ire Aderinokun 的 原始文章。
[ 返回目錄 ]
▎20. 用 rem 來調整全域大小;用 em 來調整區域大小
在根元素設定基礎字體大小後 (html { font-size: 100%; }), 使用 em 設定文字元素的字體大小:
h2 {
font-size: 2em;
}p {
font-size: 1em;
}
然後設定模組的字體大小為 rem:
article {
font-size: 1.25rem;
}aside .module {
font-size: 0.9rem;
}
現在,每個模組變得獨立,更容易、靈活的樣式便於維護。
[ 返回目錄 ]
▎21. 隱藏沒有靜音並設定自動播放的影片
當你在一個可以自訂樣式的後台環境設定網站樣式時,這是一個不錯的小技巧。畢竟自動撥放影片是蠻惱人的,這個技巧可以幫助你避免影片在沒有靜音的情況下自動撥放。
video[autoplay]:not([muted]) {
display: none;
}
[ 返回目錄 ]
▎22. 使用 :root 選擇器來設定彈性的字體大小
在響應式版面(responsive layout)中,字體大小通常需要根據不同的 Viewport (畫面大小) 進行調整。你可以根據 :root 所定義的 Viewport 高度與寬度來調整字體大小:
:root {
font-size: calc(1vw + 1vh + 0.5vmin);
}
現在你便能使用依 :root 字級為基準的 rem 單位了。
body {
font: 1rem/1.6 sans-serif;
}
補充:CSS 單位 vw, vh, vmin, vmax
- 1vw=1% 螢幕的寬度
- 1vh=1% 螢幕的高度
- 1vmin=裝置中寬度or高度較小的那個值
- 1vmax=裝置中寬度or高度較大的那個值
[ 返回目錄 ]
▎24. 使用指標事件来控制滑鼠事件
指標事件允許您指定滑鼠如何與其觸控的元素進行互動。 要停用按鈕上的預設指標事件,例如:
.button-disabled {
opacity: .5;
pointer-events: none;
}
簡單來說,就是讓滑鼠失效。
[ 返回目錄 ]
▎後記
CSS 專家秘技筆記到此結束。身為初學者,這裡面提到的很多內容之前沒看過也沒用過,影片看完不代表融會貫通,但也非一無所獲。有些技巧透過影片說明、實際操作、資料搜尋,足夠開開眼界、增加印象、理解觀念。之後看到其它前端相關影片,有時間的話也會像這樣整理出來。
CSS 專家密技系列
如果想看更多文章,點擊以下連結可以看到我的文章清單:
* 所有文章清單如果您喜歡這篇文章,或覺得這篇文章有幫到您,想給我一些支持,可以這麼做:
1. 登入 Liker 點擊下方 LikeButton 免費按讚(按5下),或直接打賞 LikeCoin
2. 透過街口支付請我喝杯咖啡!
3. 拍拍手(1~50下) 給我一些鼓勵。