▎目錄
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屬性的aa[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下) 給我一些鼓勵。
