CSS 專家密技/CSS Protips 01-06
GitHub CSS 專家密技 / CSS Protips 第 01-06 項的筆記
02/26 跟了 Amos 的直播，看完之後收穫很多。除了學到新的技巧，也釐清一些觀念，所以趕快記錄下來。以下有原文的部分內容、Amos 的說明跟補充，也加入我的想法和整理。
- 原文：AllThingsSmitty/css-protips (Will 保哥翻譯的中文版)
- 影片：CSS專家密技 — CSS Protips — 阿莫斯の網頁料理室
▎01. 使用 CSS Reset
因為各家瀏覽器的內部設定不同(比如：內距、行高)，CSS Reset 可以幫你在不同的瀏覽器上維持一致的樣式風格。你可以使用 CSS Reset 套件：
- Reset.css：有部分的人覺得這個套件矯枉過正，比如 head, blod 的粗體都拿掉。
- Normalize.css：有需要格式一樣的才一樣，不需要的就不去 reset。
或使用更簡潔的 CSS Reset 方法：
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}[ 返回目錄 ]
▎02. 繼承 box-sizing
這裡原文說的是讓 box-sizing 屬性自動從 html 元素繼承下來 ：
html {
box-sizing: border-box;
}*,
*::before,
*::after {
box-sizing: inherit;
}
不過 Amos 在這部分的補充讓我了解 box-sizing: border-box 原來是這麼一回事！
我原本以為 padding (內距) 跟 margin (外距) 是距離，而 border (邊框) 是框線，充其量屬最裡面的 content (內容) 算是一個實體的 box。但看了 Amos 的說明之後才知道原來 box model 真的是 box model (不然還有假的嗎？)。
這麼說好了，可以想像 div 是俄羅斯娃娃，由多個大小不一的 box 層疊而成。由內而外為：content box → padding box → border box → margin box
舉例：
- 指定一個 div 的
width: 300px，這時候 border-box 跟 content-box 寬度都是 300px。 - 加上
padding: 100px之後，會把 border 向外撐開，所以：
- border-box 總寬度是 500px (左內距 100px + 內容寬度 300px + 右內距 100px)。
- content-box 總寬度仍然是 300px
3. 如果我們要讓 div 最寬只有 300px，同時又有內距 100px，通常會加上box-sizing: border-box 。這時候：
- border-box 總寬度是 300px。因為你讓 box-sizing 等於 border-box 了。
- content-box 總寬度內縮成 100px。要讓 div 總寬度是 300px ，又希望邊框和內容之間有 100px 的距離，那就只能縮裡面的 content-box 了。
之前使用 box-sizing: border-box 的時候不會聯想到 box model，現在總算將這個 border-box 跟 box model 聯想在一起了。
[ 返回目錄 ]
▎03. 使用 unset 而不是重置所有屬性
當重置元素的屬性時，並不需要重置元素中每個屬性：
button {
background: none;
border: none;
color: inherit;
font: inherit;
outline: none;
padding: 0;
}你可以用 all 來代表元素中所有的樣式屬性。 將該值設定為 unset 意味著將元素中所有樣式屬性回復到預設值：
button {
all: unset;
}注意： 目前 all 屬性在 IE11 並不支援，而目前 Edge 瀏覽器則正在考慮支援。IE11 不支援 unset 用法！
[ 返回目錄 ]
▎04. 使用 :not() 選擇器決定表單是否顯示邊框
假設你用以下樣式先替元素新增邊框
/* 新增邊框 */
.nav li {
border-right: 1px solid #666;
}然後在最後一個元素去除邊框
/* 去掉邊框 */
.nav li:last-child {
border-right: none;
}不過你可以改用 :not() 偽類別 (pseudo-class) 來做到完全相同的效果：
.nav li:not(:last-child) {
border-right: 1px solid #666;
}[ 返回目錄 ]
▎05. 將 line-height 加入到 body 元素
你不必為分別為每一個 <p>、<h*> 元素加入 line-height 樣式，相反的，你應該直接新增到 body 元素，所有的文字元素預設就會繼承 body 的樣式。
body {
line-height: 1.5;
}[ 返回目錄 ]
▎06. 為表單元素設置 focus
給予使用者回饋，讓使用者可以距焦、確定所在位置。
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
box-shadow: none;
outline: #000 dotted 2px;
outline-offset: .05em;
}▎可以玩表單的延伸效果
有些表單的一端會有個放大鏡圖示，但表單寬度為 0px。當使用者把滑鼠移到放大鏡圖示時，表單會增加寬度，製造出表單從放大鏡圖示延伸出來的效果。像是 這支影片。
▎focus 也可以用在超連結中
考量到 CSS 的優先權 (寫在下面的 > 寫在上面的)，以及為了讓使用者有良好體驗，在超連結中要注意擺放順序，由上而下依序為：
a:link {}
a:visited {}
a:focus {}
a:hover {}
a:active {}- 有沒有加
:link的差別：
有加的話，只針對超連結去作用；沒有加的話，會連錨點一起作用。所以有加:link會是比較標準的做法。
[ 返回目錄 ]
▎後記
本次筆記分享到這邊，剩下的就跟著 Amos 的進度走囉，新的內容會另外開新的文章。另外，雖然知道用 GitHub gist 嵌入程式碼有 highlight 看起來比較舒適，不過程式碼太多段，就懶得用了~
CSS 專家密技系列
如果想看更多文章，點擊以下連結可以看到我的文章清單：
* 所有文章清單如果您喜歡這篇文章，或覺得這篇文章有幫到您，想給我一些支持，可以這麼做：
1. 登入 Liker 點擊下方 LikeButton 免費按讚(按5下)，或直接打賞 LikeCoin
2. 透過街口支付請我喝杯咖啡！
3. 拍拍手(1~50下) 給我一些鼓勵。
