CSS 筆記
CSS選擇器
https://www.w3school.com.cn/cssref/css_selectors.asp
CSS選擇器
| 選擇器 | 例子 | 描述 |
|---|---|---|
| .class | .intro | 選 class="intro" 的所有元素 |
| .class1.class2 | .name1.name2 | 選同時有 name1, name2 的元素 |
| .class1 .class2 | .name1 .name2 | 選 name1 後代所有 name2 的元素 |
| element+element | div + p | 選擇<div> 元素的第一個 <p> 元素 |
| [attribute=value] | [target=_blank] | 選擇帶有 target="_blank" 屬性的所有元素。 |
| [attribute^=value] | a[href^="https"] | 選擇 href 屬性以 https 開頭的 a 元素 |
| [attribute$=value] | a[href$=".pdf"] | 選擇 href 屬性以 .pdf 結尾的 a 元素 |
| [attribute*=value] | a[href*="w3schools"] | 選擇 href 屬性包含 w3schools 的 a 元素 |
| ::after | p::after | 在每個 <p> 的内容之後插入內容 |
| ::before | p::before | 在每個 <p> 的内容之前插入內容 |
| :checked | input:checked | 選擇每個被選中的 <input> 元素。 |
| :empty | p:empty | 選擇沒有子元素的每個 <p> 元素 |
| :first-child | p:first-child | 選擇屬於父元素的第一個子元素的每個 <p> 元素。 |
| :last-child | p:last-child | 選擇屬於父元素的最後一個子元素的每個 <p> 元素。 |
CSS 單位 https://www.w3school.com.cn/cssref/css_units.asp
絕對長度
cm, mm, px, pt, pc
相對長度
em 相對於元素字體的大小（font-size）（2em 表示當前字體大小的 2 倍）
rem 相對於根元素的字體大小（font-size）
ex, ch, vw, vh, vmin, vmax, %
CSS position https://www.w3school.com.cn/cssref/css_units.asp
position
position 屬性制定出要用哪一類的位置。可能的值有：
static (預設值): 這代表元素會被放在預設的地方。如果 position 的值是被設定為 statics 的話，那 top、bottom、left、和 right 的值就都沒有意義了。
absolute: 這代表元素會被放在瀏覽器內的某個位置 (依 top、bottom、left、和 right 的值而定)。當使用者將網頁往下拉時，元素也會跟著改變位置。
relative: 這代表元素被放的地方將會與預設的地方有所不同。不同的程度是依照 top、bottom、left、和 right 的值而定。
fixed: 這代表元素會被放在瀏覽器內的某個位置 (依 top、bottom、left、和 right 的值而定)。當使用者將網頁往下拉時，元素的位置不會改變。
top, right, bottom, left
每一個方向 (top, right, bottom, left) 的位置值可以是長度、百分比、或是 auto。overflow
overflow 屬性是用來設定當內容放不下時的處理方式。可能的值包括：
visible: 內容完全呈現，不管放得下放不下。
hidden: 放不下的內容就不顯示出來。
scroll: 無論內容放得下放不下，都加入上下捲軸及左右捲軸的功能。
auto: 當內容放不下時，加上捲軸的功能。z-index
z-index 屬性是用來決定元素重疊的順序。換言之，當兩個元素有重疊的情況時，z-index 值將會決定哪一個元素在上面。z-index 值比較大個元素會被放在上面。
CSS 框架分析
Flexbox https://zhuanlan.zhihu.com/p/46684565
Grid https://zhuanlan.zhihu.com/p/46754464
Flexbox vs Grid https://zhuanlan.zhihu.com/p/46757975
Flexbox 適用一維布局
Grid 適用二維布局
將兩者結合
使用 Grid 進行頁面二維布局
使用 Flexbox 進行 Header 一維布局
SCSS, SASS
介紹:
https://blog.hellosanta.com.tw/網站設計/前端/一起來用sasscompass吧，我們可是一秒幾千萬上下的前端工程師，怎麼能把時間浪費在css身上呢！
https://ithelp.ithome.com.tw/articles/10126703