CSS 專家密技/CSS Protips 07–13
GitHub CSS 專家密技 / CSS Protips 第 07–13 項的筆記
▎目錄
07. 將所有元素設定垂直居中
08. 逗號分隔列表
09. 使用負數的 nth-child 來選擇元素
10. 使用 SVG 圖示
11. 使用 “貓頭鷹” 的選擇器
12. 使用 max-height 來建立純 CSS 的捲動軸
13. 讓表格中每個儲存格維持等寬
▎07. 將所有元素設定垂直居中
以下的方式可以將 body 中第一層的元素垂直居中，但 flex 無法繼承，裡面的子元素要另外設定。
html,
body {
height: 100%;
margin: 0;
}body {
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-flex;
display: flex;
}
CSS Grid 也可以做到垂直居中：
body {
display: grid;
height: 100vh;
margin: 0;
place-items: center center;
}原文推薦可參考 CSS-TRICK 的文章，裡面提到各種置中排版技巧：
Amos 也有寫文章整理不少垂直置中的方法：
另外也可以看 CSS Flex 與 Grid 的操作影片深入了解這些屬性：
補充： align-items 和 align-content 的差異
- align-items 影響單行
- align-content 影響多行
探討：學了 flex ，還有需要學 float 嗎？
從開發者的角度來看，能越省事、越快達到自己要的效果越好。但實務上可能會碰到較早期、使用 float 的專案，或者面試時被主考官詢問。比如，有人去面試的時候遇到這樣的問題：「如果有個專案，不能夠使用 float, flex, grid, position，請問要怎麼排版？」
這個時候就得看我們自身對於網頁排版的基礎是否扎實、是否懂得夠多，能夠滿足客戶的需求。
[ 返回目錄 ]
▎08. 逗號分隔列表
如果要讓列表的每項都由逗號分隔，但最後一項不用加逗號，可以用 :not() 偽類別 (pseudo-class) 。
ul > li:not(:last-child)::after {
content: ‘,’;
}如果是列表中第一項不用加逗號，則可以使用相鄰選擇器 (+) 來達成：
ul > li + li::after {
content: ‘,’;
}注意：
這一技巧對於無障礙網頁，特別是螢幕閱讀器而言，並不理想。而且預設要複製貼網頁內容時，並不會包含 CSS 動態產生的內容，這點必須特別注意。
[ 返回目錄 ]
▎09. 使用負數的 nth-child 來選擇元素
使用負數的 nth-child 可以選擇 1 至 n 個元素。
li {
display: none;
}/* 選擇第 1 至第 3 個元素並顯示出來 */
li:nth-child(-n+3) {
display: block;
}
或者，你已經知道 「04. 使用 :not() 選擇器來決定表單是否顯示邊框」 這個技巧，你可以試試：
/* 選擇除了前 3 個之外的所有項目，並顯示出來 */
li:not(:nth-child(-n + 3)) {
display: none;
}關於 :nth-child() 的使用， Amos 有一篇講得比較深入：
[ 返回目錄 ]
▎10. 使用 SVG 圖示
SVG 在所有解析度下都可以良好縮放，並且支援 IE9 之後的所有瀏覽器。
.logo {
background: url(‘logo.svg’);
}這比較沒什麼特別的，所以直播沒額外多說什麼。
[ 返回目錄 ]
▎11. 使用 “貓頭鷹” 的選擇器
這個 “Lobotomized Owl” (貓頭鷹) 選擇器，是將 通用選擇器 (*) 和 相鄰選擇器 (+) 一起使用，因為看似貓頭鷹而以此命名：
* + * {
margin-top: 1.5em;
}在此範例中，在檔案中所有的元素，只要緊接著其他元素，就會套用一個 margin-top: 1.5em 樣式。
更多 “貓頭鷹” (Lobotomized Owl) 選擇器，可參考 A List Apart 上面關於 Heydon Pickering 的文章
以上是原文內容，但據說這樣的方式效能較不好，比較不建議這樣使用。
[ 返回目錄 ]
▎12. 使用 max-height 來建立純 CSS 的捲動軸
你可以透過 max-height 與 overflow-y: hidden 來實作出 CSS-only 的捲動軸。當滑鼠移到 .slider 的元素時，元素的內容如果過多，最大高度只會擴展到 max-height 的值，而且會自動顯示捲動軸。
.slider {
max-height: 200px;
overflow-y: hidden;
width: 300px;
}.slider:hover {
max-height: 600px;
overflow-y: scroll;
}
為什麼要這樣用？什麼時候會用到這個？看直播的大家好像也都蠻疑惑的。只知道，這樣的做法有好有壞，好處是滑鼠沒有移入時，捲軸被隱藏起來，不會影響美觀。但壞處是捲軸被隱藏起來，有可能會讓使用者以為內容只有顯現出來的這些，不知道還有一部分的內容需要滑鼠移入後才看得到。
[ 返回目錄 ]
▎13. 讓表格中每個儲存格維持等寬
表格中要維持每一格都等寬，可以用 table-layout: fixed ：
.calendar {
table-layout: fixed;
}Amos 在影片中另外做了兩個嘗試：
1. td {width: 100%}
表格沒有出現想像的等寬效果，此方法不可行。
2. td {width: 1000px}
用像素去設定欄寬，會自動轉換成百分比，分配每個欄位的寬度，這樣也能達到表格等寬的效果。
[ 返回目錄 ]
▎後記
我不是偷懶才遲了一個星期，是因為沒 follow 到直播，幾天後看到小鈴鐺通知才發現錯過了。雖然我知道沒人在等，不過我要對自己有個交代~
CSS 專家密技系列
如果想看更多文章，點擊以下連結可以看到我的文章清單：
* 所有文章清單如果您喜歡這篇文章，或覺得這篇文章有幫到您，想給我一些支持，可以這麼做：
1. 登入 Liker 點擊下方 LikeButton 免費按讚(按5下)，或直接打賞 LikeCoin
2. 透過街口支付請我喝杯咖啡！
3. 拍拍手(1~50下) 給我一些鼓勵。
