# CSS 補坑
紀錄用
## CSS 選擇器
[參考文章1](https://code.tutsplus.com/zh-hant/tutorials/the-30-css-selectors-you-must-memorize--net-16048)
[參考文章2](https://ithelp.ithome.com.tw/m/articles/10227242)
## 單位
[參考文章1](https://ithelp.ithome.com.tw/articles/10222932)
## 各邊不同值 ( 通用 )
* 一個值 : 全
* 兩個值 : 上下-左右
* 三個值 : 上-左右-下
* 四個值 : 上-右-下-左
## 水平置中 & 垂直置中
> [參考文章1 ( 水平 )](https://medium.com/jarvishhc/%E5%AD%B8%E7%BF%92%E7%B6%B2%E9%A0%81%E9%96%8B%E7%99%BC%E5%88%B0%E7%8F%BE%E5%9C%A8-%E6%88%91%E4%B8%80%E7%9B%B4%E8%A6%BA%E5%BE%97%E5%88%87%E7%89%88%E6%98%AF%E6%88%91%E7%9A%84%E5%BC%B1%E9%A0%85-%E5%B0%A4%E5%85%B6%E6%98%AF%E6%B0%B4%E5%B9%B3%E7%BD%AE%E4%B8%AD%E5%92%8C%E5%9E%82%E7%9B%B4%E7%BD%AE%E4%B8%AD-%E5%B0%8E%E8%87%B4%E4%B9%8B%E5%89%8D%E5%9C%A8%E7%B7%B4%E7%BF%92%E6%95%99%E6%A1%88%E7%9A%84%E6%99%82%E5%80%99-%E9%83%BD%E9%9C%80%E8%A6%81%E8%8A%B1%E8%A8%B1%E5%A4%9A%E6%99%82%E9%96%93%E5%8E%BB%E6%9F%A5%E8%B3%87%E6%96%99%E5%92%8C-try-and-696199935fd)
> [參考文章2 ( 垂直 )](https://pjchender.blogspot.com/2015/04/css_15.html)
## animation 屬性
> [**animation: name | duration | timing-function | delay | iteration-count | direction ( 簡寫屬性 )**](https://www.w3school.com.cn/cssref/pr_animation.asp)
* **@keyframes animation-name ( 動畫樣式規則 ) : 0%~100% | from to | any css styles**
* **animation-name ( 綁定到 keyframe 的動畫名稱 ) : any name**
* **animation-duration ( 動畫完成一週期花費時間 ) : any time ( 默認 0 ， 沒設置則不會有動畫 )**
* **animation-delay ( 動畫開始的延遲 ) : any time**
* **animation-direction ( 動畫播放方式 ) : normal | alternate ( 奇數次正常播放，偶數次向後播放 )**
* **animation-iteration-count ( 動畫播放次數 ) : any number | infinite**
* **animation-timing-function ( 動畫的速度曲線 ) : linear ( 相同 ) | ease ( 慢速開始，快，慢速結束 ) | ease-in ( 慢速開始 ) | ease-out ( 慢速結束 ) | ease-in-out ( 慢速開始。慢速結束 ) | cubic-bezier(n,n,n,n)**
* animation-fill-mode ( 元素在不播放動畫時的樣式 ) : none | forwards ( 待研究 ) | backwards ( 待研究 ) | both ( 待研究 )
* animation-play-state ( 動畫目前狀態 ) : paused | running
## background 屬性
> [**background : color | position | size | repeat | origin | clip | attachment | image ( 簡寫屬性 )**](https://www.w3school.com.cn/cssref/pr_background.asp)
* **background-color ( 背景顏色 ) : any color**
* **background-position ( 背景圖像的位置 ) : top | right | bottom | left | center | length | % | ...**
* **background-size ( 背景圖片的尺寸 ) : contain ( 縮放圖片以完全"裝入"，可能有空白 ( no-repeat 情況 ) ) | cover ( 縮放圖片以完全"覆蓋"，可能會有部分看不見 ) | length | % | ...**
* **background-repeat ( 如何重複背景圖像 ) : repeat-x | repeat-y | repeat | no-repeat | space ( 盡可能重複且不會裁剪，有空隙 ) | round ( 重複且沒有空隙 )**
* background-origin ( 背景圖片的起始位置 ) : border-box | padding-box | content-box
* background-clip ( 背景的裁剪 ) : border-box ( border "外"緣 ) | padding-box ( padding "外"緣 ) | content-box ( content "外"緣 )
* [background-attachment ( 背景圖像是否固定或者隨著頁面的其餘部分滾動 ) : sroll ( 滾內滾外都不會動 ) | fixed ( 滾外會動 ) | local ( 滾內會動 ) ](https://developer.mozilla.org/zh-TW/docs/Web/CSS/background-attachment)
* **background-image ( 背景圖像 ) : url ('網址')**
## border 屬性
> [**border : width | * style | color ( 簡寫屬性 )**](https://www.w3school.com.cn/css/css_border_shorthand.asp)
* **border-color ( 邊框的顏色 ) : any color**
* **border-radius ( 邊框的圓角 ) : length | %**
* **border-style ( 邊框的樣式 ) : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset**
* **border-width ( 邊框的寬度 ) : thin | medium | thick | length**
## box-sizing 屬性
* **box-sizing ( 控制長寬作用的對象 ) : content-box ( 預設，實際寬高＝所設定的數值＋border＋padding ) | border-box ( 實際寬高＝所設定的數值( 已包含border和padding ) )**
> [參考文章1 ( 原理 )](https://ithelp.ithome.com.tw/articles/10252827)
> [參考文章2 ( 使用場合 )](https://www.webdesigns.com.tw/CSS_box-sizing.asp)
## font 屬性
> [**font : style | variant | weight | size | family ( 簡寫屬性 )**](https://www.w3school.com.cn/cssref/pr_font_font.asp)
* **font-style ( 字體樣式 ) : normal | italic ( 斜體 ) | oblique ( 另一種斜體 )**
* font-variant ( 是否以小型大寫字顯示 ) : normal | small-caps ( 小型大寫字 )
* **font-weight ( 字體粗細 ) : normal | bold | bolder | lighter | 100~700 ( 400 等於 normal，700 等於 bold )**
* **font-size ( 字體大小 ) : xx-small | x-small | small | medium | large | x-large | xx-large | smaller | larger | length | %**
* **font-family ( 字體 ) : serif | sans-serif | monospace | cursive | Fantasy**
## display 屬性 & visibility 屬性
* **display ( 網頁元素的顯示類型 ) : none | block | inline | inline-block | flex剩的用不到**
* **visibility ( 網頁元素是否可見 ) : visible | hidden | collapse ( 使用在表格元素，刪除行或列時不影響布局 )**
## float 屬性
* **float ( 浮動方向 ) : left | right**
* [**clear ( 清除浮動 ) : left | right | both**](https://medium.com/%E9%A6%AC%E6%A0%BC%E8%95%BE%E7%89%B9%E7%9A%84%E5%86%92%E9%9A%AA%E8%80%85%E6%97%A5%E8%AA%8C/css-%E6%B5%AE%E5%8B%95%E8%88%87%E6%B8%85%E9%99%A4%E6%B5%AE%E5%8B%95-34d3f49ef817)
## flex 屬性
### **外容器屬性**
* **display ( 顯示方式 ) : flex | inline-flex ( 沒有宣告為 flex 則無法使用大部分屬性 )**
* **flex-direction ( 排序方向 ) : row | row-reserve | column | column-reverse**
* **flex-wrap ( 是否換行 ) : nowrap | wrap | wrap-reserve ( 換行時反轉 )**
* **flex-flow : flex-direction | flex-wrap ( 簡寫屬性 )**
* **justify-content ( 主軸對齊方式 ) : flex-start | flex-end | center | space-between ( x-x-x ) | space-around ( -x--x--x- ) | space-evenly ( -x-x-x- )**
* **align-items ( 交錯軸對齊方式，以每個單行來看 ) : flex-start ( 向上對齊 ) | flex-end ( 向下對齊 ) | center | baseline ( 依照基準線 ( 同一行字的底線 ) ) | stretch ( 拉長 )**
* **align-content ( 同上，以整個容器來看 ) : flex-start | flex-end | center | space-between ( x-x-x ) | space-around ( -x--x--x- ) | space-evenly ( -x-x-x- ) | baseline ( 依照基準線 ( 同一行字的底線 ) ) | stretch ( 拉長 )**
### **內容器屬性**
> [**flex : flex-grow | flex-shrink | flex-basis ( 簡寫屬性 )**](https://iter01.com/568233.html)
* **flex-grow ( 當空間分配還有剩餘時的當前元件的伸展性 ) : any number ( 預設 0 ，即不會縮放，N 個空間分為 X 份 )**
* **flex-shrink ( 當空間分配還不足時的當前元件的收縮性 ) : any number ( 預設 1 ，即大家被壓縮的比例相同 ， 若設置為 0 則不會縮放 )**
* flex-basis ( 當前元件被分配到的空間 ) : auto | length ( 與 width/height 很像，但優先程度較高，當 flex-direction: row 時，flex-basis 會決定 width．當 flex-direction: column 時，flex-basis 會決定 height )
* **order ( 當前元件的排列順序 ) : any number ( 數值可為負，由小到大排列 )**
* **align-self ( 個別設定交錯軸對齊方式 ) : auto | flex-start | flex-end | center | baseline ( 依照基準線 ( 同一行字的底線 ) ) | stretch ( 拉長 )**
> [參考文章 ( flex-items 溢出問題 )](https://juejin.cn/post/6844904012794298375)
## grid 屬性
* **Grid Container : 當一個元素設置display: grid屬性時，它就會成為所有Grid Items的父元素。**
* **Grid Item : 網格容器的孩子(eg 子元素)。**
* **Grid Line : 分隔元素的線，可以是垂直與水平，如下圖的紅色線。**
* **Grid Track : 兩條分隔線中間的區域，就是 Grid 中的 Columns 或 Rows，如下圖的綠色區塊。**
* **Grid Cell : Grid 中的基本單位，四條線組成的區域，如下圖的藍色區塊。**
* **Grid Area : 由數個 Cell 組成的區域，如下圖的紅色區塊。**
* **column, float, clear, 和 vertical-align 元素對網格容器不起作用。**
* **fr：等分的概念，類似 Flex 中的 flex-grow，例：1fr。**
* **repeat()：可重複某值，傳入兩個參數，次數與值，例：repeat(2, 1fr)。**
* **minmax()：可將值限定在某區間，傳入兩個參數，最小值與最大值，例：minmax(20px, auto)。**
### **外容器屬性**
* **display ( 顯示方式 ) : grid | inline-grid | subgrid ( 沒有宣告為 grid 則無法使用大部分屬性，如果這個元素本身也是個 grid item 時，就使用 display : subgrid )**
* **grid-template-columns ( 定義網格直行的寬度與個數 ) : track-size | [line-name] track-size | subgrid**
* **grid-template-rows ( 定義網格橫列的高度與個數 ) : track-size | [line-name] track-size | subgrid**
* **grid-template-areas ( 定義網格區域名稱，從而定義網格模板 ) : grid-area-name ( 網格區域重複的名稱就會導致內容跨越這些單元格 )**
* **justify-content ( grid cell 在 grid container 中的水平對齊方式 ) : start ( 預設 ) | end | center | stretch | space-between ( x-x-x ) | space-around ( -x--x--x- ) | space-evenly ( -x-x-x- )**
* **justify-items ( grid item 在 grid cell 中的水平對齊方式 ) : start | end | center | stretch ( 預設 )**
* **align-content ( grid cell 在 grid container 中的垂直對齊方式 ) : start ( 預設 ) | end | center | stretch | space-between ( x-x-x ) | space-around ( -x--x--x- ) | space-evenly ( -x-x-x- )**
* **align-items ( grid item 在 grid cell 中的垂直對齊方式 ) : start | end | center | stretch ( 預設 )**
* **place-content : align-content | justify-content ( 簡寫屬性 )**
* **place-items : align-items | justify-items ( 簡寫屬性 )**
* **grid-auto-columns ( 任何自動生成的直行網格軌道的大小 ) : track-size**
* **grid-auto-rows ( 任何自動生成的橫列網格軌道的大小 ) : track-size**
* **grid-auto-flow ( Grid 的排列方式 ) : row ( 預設 ) | column | row dense | column dense ( dense 會自動填補較小網格，可能會更改網格順序 )**
* **column-gap ( 直行網格線寬度 ) : any length**
* **row-gap ( 橫列網格線寬度 ) : any length**
* **gap ( 網格線寬度 ) : column-gap | row-gap ( 簡寫屬性 )**
### **內容器屬性**
* **grid-column-start ( 垂直網格線的起始位置 ) : number | name | span number | span name | auto**
* **grid-column-end ( 垂直網格線的終止位置 ) : number | name | span number | span name | auto**
* **grid-row-start ( 水平網格線的起始位置 ) : number | name | span number | span name | auto**
* **grid-row-end ( 水平網格線的終止位置 ) : number | name | span number | span name | auto**
* **grid-column : start-line / end-line ( 簡寫屬性 )**
* **grid-row : start-line / end-line ( 簡寫屬性 )**
* **grid-area ( 對應到 grid-template-areas 屬性的命名 ) : name | row-start / column-start / row-end / column-end**
* **justify-self ( 單一 grid item 在 grid cell 中的水平對齊方式 ) : start | end | center | stretch ( 簡寫屬性 )**
* **align-self ( 單一 grid item 在 grid cell 中的垂直對齊方式 ) : start | end | center | stretch ( 簡寫屬性 )**
* **place-self : align-self | justify-self ( 簡寫屬性 )**
> [參考文章1](https://ithelp.ithome.com.tw/articles/10187268)
> [參考文章2](https://css-tricks.com/snippets/css/complete-guide-grid/)
> [參考文章3](https://wcc723.github.io/css/2017/03/22/css-grid-layout/)
> [參考文章4](https://blog.csdn.net/gaoqiang1112/article/details/80266142?ops_request_misc=&request_id=&biz_id=102&utm_term=css%20grid&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-5-80266142.nonecase&spm=1018.2226.3001.4187)
## height 屬性
* **height ( 高度 ) : auto | length | % | fill-available | fit-content | min-content | max-content**
* **min-height ( 最小高度 ) : length | % | fill-available | fit-content | min-content | max-content**
* **max-height ( 最大高度 ) : none | length | % | fill-available | fit-content | min-content | max-content**
## list-style 屬性
> [list-style : type | position | image ( 簡寫屬性 )](https://www.w3school.com.cn/cssref/pr_list-style.asp)
* [list-style ( 列表樣式 ) : none | disc ( 默認，原實心 ) | circle | square | ...](https://www.w3school.com.cn/cssref/pr_list-style-type.asp)
* list-position ( 列表項位置 ) : inside | outside
* list-image ( 使用圖片當列表項 ) : none | url ('網址')
*
## margin 屬性
* **margin ( 外邊距 ) : auto | length | %**
> [合併原理](https://www.w3school.com.cn/css/css_margin_collapse.asp)
## object 屬性
* **object-fit ( 決定一個可替換 resource 的元素 ) : none | contain | cover | fill | scale-down ( contain 與 cover 之間最小者 )**
* **object-position ( 這個元素的位置 ) : top | right | bottom | left | center | length | % | ...**
> [**參考文章1 ( 取代 background-image 用法 )**](https://ithelp.ithome.com.tw/articles/10253211)
## outline 屬性
> [outline : width | style | color ( 簡寫屬性 )](https://www.w3school.com.cn/cssref/pr_outline.asp)
* outline-color ( 輪廓的顏色 ) : any color
* outline-style ( 輪廓的樣式 ) : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
* outline-width ( 輪廓的寬度 ) : thin | medium | thick | length
* outline-offset ( 邊框到輪廓的距離 ) : length
## overscroll-behavior 屬性
* **overscroll-behavior ( 滾動鏈 ) : auto | contain | none**
> [參考文章1](https://segmentfault.com/a/1190000012014962)
## overflow 屬性
* **overflow ( 溢出處理方式 ) : visible | hidden | scroll | auto**
* **overflow-x ( 水平溢出處理方式 ) : visible | hidden | scroll | auto**
* **overflow-y ( 垂直溢出處理方式 ) : visible | hidden | scroll | auto**
## padding 屬性
* **padding ( 內邊距 ) : auto | length | %**
> [width + padding 使用上的問題](https://www.w3school.com.cn/css/css_padding.asp)
## position 屬性
* **position ( 定位類型 ) : static | absolute | relative | fixed | sticky**
* **left ( 左偏移 ) : auto | % | length**
* **right ( 右偏移 ) : auto | % | length**
* **top ( 上偏移 ) : auto | % | length**
* **bottom ( 下偏移 ) : auto | % | length**
* clip ( 剪裁絕對定位元素 ) : rect (top, right, bottom, left) | auto ( 須配合 position : absolute 屬性使用 )
* **z-index ( 堆疊順序 ) : auto | number ( 數字越大，順序越前 )**
> [參考文章1 ( top、bottom、left、right 屬性使用 )](https://ithelp.ithome.com.tw/articles/10253814)
## shadow 屬性
* text-shadow ( 文字陰影 ) : * h-shadow | * v-shadow | blur | color
* box-shadow ( 元素陰影 ) : * h-shadow | * v-shadow | blur | spread | color | inset
## table 屬性
> [**border : width | style | color ( 簡寫屬性 )**](https://www.w3school.com.cn/cssref/pr_border.asp)
* border-collapse ( 表格邊框是否合併 ) : separate ( 分開，不會忽略 border-spacing 及 empty-cells 屬性 ) | collapse ( 不分開，忽略border-spacing 及 empty-cells 屬性 )
* border-spacing ( 單元格的距離 ) : length ( 水平 ) | length ( 垂直 )
* caption-side ( 表格標題位置 ) : top | bottom
* empty-cells ( 空白單元格是否顯示 ) : hide | show
## text 屬性
* [**color ( 顏色 ) : any color**](https://microdnd.pixnet.net/blog/post/103334755)
* direction ( 文字方向 ) : ltr ( 左到右 ) | rtl ( 右到左 )
* letter-spacing ( 字符間距 ) : normal | length
* **line-height ( 行高 ) : normal | number | length | %**
* [**text-align ( 水平對齊 ) : left | right | center | justify**](https://blog.csdn.net/zyl_lyr1019/article/details/17767061?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522163065331616780262589624%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=163065331616780262589624&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~baidu_landing_v2~default-4-17767061.first_rank_v2_pc_rank_v29&utm_term=text+align&spm=1018.2226.3001.4187)
* **text-decoration ( 文字修飾 ) : none | underline | overline | blink ( 好像沒用 = = )**
* text-intent ( 文字縮進，類似Tab的效果 ) : length | %
* text-shadow ( 文字陰影 ) : * h-shadow | * v-shadow | blur | color
* **text-transform ( 文字大小寫 ) : none | capitalize ( 首字大寫 ) | uppercase | lowercase**
* **text-overflow ( 決定是否顯示溢出內容 ) : clip ( 修剪 ) | ellipsis ( 省略符號...，需搭配white-space : nowrap 及 overflow : hidden 使用)**
* [**vertical-align ( 垂直對齊 ) : baseline | sub | super | top | text-top | middle | bottom | text-bottom | length | %**](https://www.w3school.com.cn/cssref/pr_pos_vertical-align.asp)
* [white-space ( 處理空白 ) : normal | pre | nowrap | pre-nowrap | pre-line](https://www.w3school.com.cn/cssref/pr_text_white-space.asp)
* word-spacing ( 字詞間距 ) : normal | length
* word-break ( 換行方式1 ) : normal | break-all ( 在當行進行斷句換行 ) | keep-all
* word-wrap ( 換行方式2，又稱 overflow-wrap ) : normal | break-word ( 將當行塞不下的長單詞換到下一行，若還是超過容器寬度，將進行斷詞換行 )
> [參考文章 ( 換行 )](https://www.w3school.com.cn/css/css3_text_effects.asp)
> [參考文章 ( word-break 和 word-wrap 差異 )](https://codertw.com/%E7%A8%8B%E5%BC%8F%E8%AA%9E%E8%A8%80/721948/)
## transition 屬性
> [**transition : property | duration | timing-function | delay ( 簡寫屬性 )**](https://www.w3school.com.cn/cssref/pr_transition.asp)
* transition-delay ( 過渡效果的延遲時間 ) : any time
* transition-duration ( 過渡效果的持續時間 ) : any time
* transition-timing-function ( 過渡效果的速度曲線 ) : linear ( 相同 ) | ease ( 慢速開始，快，慢速結束 ) | ease-in ( 慢速開始 ) | ease-out ( 慢速結束 ) | ease-in-out ( 慢速開始。慢速結束 ) | cubic-bezier(n,n,n,n)
* transition-property ( 過渡效果的應用對象 ) : all | any element
## transform 屬性
* **transform ( 2D、3D 轉換 ) : matrix ( scaleX ( ) , skewY ( ) , skewX ( ) , scaleY ( ) , translateX ( ) , translateY ( ) ) | matrix3d ( 甚麼大便屬性 = = ) | translate ( x , y ) ( 沿著 X 和 Y 軸移動元素 ) | translate3d ( x , y , z ) | translateX ( n ) | translateY ( n ) | translateZ ( n ) | scale ( x , y ) ( 改變元素寬度和高度 ) | scale3d ( x , y , z ) | scaleX ( n ) | scaleY ( n ) | scaleZ ( n ) | rotate ( angle ) ( 2D選轉 ) | rotate3d ( x , y , z , angle ) | rotateX ( angle ) | rotateY ( angle ) | rotateZ ( angle ) | skewX ( angle ) ( 沿 X 軸傾斜 ) | skewY ( angle ) ( 沿 Y 軸傾斜 ) | skew ( x-angle , y-angle ) ( 沿 X 軸 和 Y 軸傾斜 ) | perspective ( n ) ( ??? )**
* transform-origin ( 改變轉換元素的位置 ) : x-axis ( left、right、center、length、% ) | y-axis ( top、bottom、center、length、% ) | z-axis ( length )
* transform-style ( ??? ) : flat ( ??? ) | preserve-3d ( ??? )
* perspective ( ??? ) : none | number
* perspective-origin ( ??? ) : x-axis | y-axis
* backface-visibility ( ??? ) : visible | hidden
## width 屬性
* **width ( 寬度 ) : auto | length | % | fill-available | fit-content | min-content | max-content**
* **min-width ( 最小寬度 ) : length | % | fill-available | fit-content | min-content | max-content**
* **max-width ( 最大寬度 ) : none | length | % | fill-available | fit-content | min-content | max-content**
Sign in with Wallet
Connect another wallet