這篇主要會放我切版的時候遇到問題或覺得值得記錄的知識點：
圖片底部留白怎麼辦？
圖片預設是 display: inline，為了解決底部留白，改成 display: block 就可以了
怎麼做背景圖的櫥窗效果？
背景圖的櫥窗效果：設定 background-attachment: fixed
為什麼我的 margin 重疊惹？
margin 之間如果沒有其他障礙物，若兩個物件都是 block，就會發生 margin collapse
怎麼做書籤列的小 icon？
利用 Favicon Generator
一定要是矩形，最小尺寸 16*16
建議用 32*32 當標準
小圖標怎麼做？
使用 Font Awesome 的服務，它的底層技術是 icon font，所以放大不會糊掉，可以像給字體上顏色一樣換顏色，但是只能單色
CSS Sprites 怎麼做？
用 Sprties Generator 把圖片組合整理成一張圖片.PNG
用容器顯示出該 icon 位置
Flex 子層物件會自動把高度和父層等高
漸層效果怎麼弄啊啊啊？
background-image: linear-gradient(角度, 色標, 色標)
0度是由下往上
90度是由左往右
三角形怎麼切啊？
當然是利用 border 來切呀
- .border__box{
width: 100px;
height: 100px;
border-top: 50px solid #f00;
border-right: 50px solid #0f0;
border-left: 50px solid #00f;
border-bottom: 50px solid #AAA;
}
毛玻璃怎麼做？
backdrop-filter: blur(5px);
為何不用萬能選取器？
* 萬能選取器因為效能考量所以不太使用
display 怎麼做垂直居中
父層設 display: flex，子層設 margin 會把空間自動分配，可以達到垂直居中。
margin-top: auto;
margin-bottom: auto;
使用 svg 顯示圖示怎麼弄啊？
background: url('logo.svg')
怎麼讓表格中每個儲存格維持等寬？
table-layout: fixed
flex 怎麼把子物件的空白均分裡面的
justify-content: space-evenly
幫沒有 class 的連結設定預設樣式
a[href]:not([class])
等比例區塊怎麼做？
width: 40%
padding-bottom: 40%
使用 :root 選擇器來設定彈性的字體大小
:root {
font-size: calc(1vw + 1vh + 0.5vmin)
}
