css note

1.     屬性

1.1.     定位

1.1.1.    position(static, relative, absolute, fixed, center, page, sticky)

1.1.2.    z-index(auto, <integer>，適用於定位元素)

1.1.3.    topright bottom left (auto, <length>, <percentage>，適用於定位元素)

1.1.4.    clip(auto, rect(), inset()，適用於絕對定位元素)

1.2.     佈局

1.2.1.    display

none:隱藏物件

inline:指定物件為內聯元素

block:對峙物件為塊元素

list-item:指定物件為列表專案

inline-block:指定物件為內聯塊元素

table:指定物件作為塊元素級的表格

box:將物件作為彈性伸縮盒顯示（伸縮盒最老版本）

flex:將物件作為彈性伸縮盒顯示（伸縮盒最新版本）

1.2.2.    float(none, left, right)

1.2.3.    clear(none, left, right, both)

1.2.4.    visibility(visible, hidden, collapse)

1.2.5.    overflow(visible, hidden, scroll, auto)

1.2.6.    overflow-x(visible, hidden, scroll, auto)

1.2.7.    overflow-y(visible, hidden, scroll, auto)

1.3.     尺寸 (width, min-width, max-width, height, min-height, max-height)

1.4.     外補白 (margin, margin-top, margin-right, margin-bottom, margin-left)

1.5.     內補白 (padding, padding-top, padding-right, padding-bottom, padding-left)

1.6.     邊框 (border, border-width, border-style, border-color, border-top,border-right, border-bottom, border-left, border-radius, box-shadow,border-image)

1.7.     背景 (background, background-color, background-image, background-repeat,background-attachment, background-position, background-origin, background-clip,background-size)

1.8.     顏色 (color, opacity)

1.9.     字型 (font, font-style, font-variant, font-weight, font-size,font-family, font-stretch)

1.10.  文字

1.10.1. text-transform(none,capitalize, uppercase, lowercase, full-width)

1.10.2. white-space(normal,pre, nowrap, pre-wrap, pre-line)

1.10.3. tab-size

1.10.4. word-break(normal,keep-all, break-all)

1.10.5. word-wrap(normal,break-word)

1.10.6. overflow-wrap(normal,break-word)

1.10.7. text-align(left,center, right, justify, start, end)

1.10.8. text-align-last(auto,left, center, right, justify, start, end)

1.10.9. vertical-align

1.10.10.  line-height

1.11.  文字裝飾(text-decoration)

1.12.  書寫模式(direction)

1.13.  列表(list-style, list-style-image, list-style-position, list-style-type)

1.14.  表格

1.15.  內容

1.16.  使用者介面

1.17.  多列

1.18.  伸縮盒

1.19.  交換

1.19.1. transform(none,matrix, translate, translateX, translateY, rotate, scale, scaleX, scaleY, skew,skewX, skewY)

1.19.2. transform-origin

1.20.  過渡(transition, transition-property, transition-duration,transition-timing-function, transition-delay)

1.21.  動畫(animation, animation-name, animation-duration,animation-timing-function, animation-delay, animation-iteration-count,animation-direction, animation-play-state, animation-fill-mode)

1.22.  列印

1.23.  媒體查詢

1.23.1. width

1.23.2. height

1.23.3. device-width

1.23.4. device-height

1.23.5. orientation

1.23.6. aspect-ratio

1.23.7. device-aspect-ratio

1.23.8. color

1.23.9. color-index

1.23.10.  monochrome

1.23.11.  resolution

1.23.12.  scan

1.23.13.  grid

2.     選擇器

2.1.     元素選擇符

2.1.1.    通配選擇符(*)

2.1.2.    型別選擇符(E)

2.1.3.    ID選擇符(E#id)

2.1.4.    類選擇符(E.class)

2.2.     關係選擇符

2.2.1.    包含選擇符(E F)

2.2.2.    子選擇符(E>F)

2.2.3.    相鄰選擇符(E+F)

2.2.4.    兄弟選擇符(E~F)

2.3.     屬性選擇符

2.3.1.    E[attr]

2.3.2.    E[attr=”val”]

2.3.3.    E[attr~=”val”]

2.3.4.    E[attr^=”val”]

2.3.5.    E[attr$=”val”]

2.3.6.    E[attr*=”val”]

2.3.7.    E[attr|=”val”]

2.4.     偽類選擇符

2.4.1.    E:link

2.4.2.    E:visited

2.4.3.    E:hover

2.4.4.    E:active

2.4.5.    E:focus

2.4.6.    E:lang(fr)

2.4.7.    E:not(s)

2.4.8.    E:root

2.4.9.    E:first-child

2.4.10. E:last-child

2.4.11. E:only-child

2.4.12. E:nth-child(n)

2.4.13. E:nth-last-child(n)

2.4.14. E:first-of-type

2.4.15. E:last-of-type

2.4.16. E:only-of-type

2.4.17. E:nth-of-type(n)

2.4.18. E:nth-last-of-type(n)

2.4.19. E:empty

2.4.20. E:checked

2.4.21. E:enabled

2.4.22. E:disabled

2.4.23. E:target

2.4.24. @page:first

2.4.25. @page:left

2.4.26. @page:right

2.5.     偽物件選擇符

2.5.1.    E:first-letter/E::first-letter

2.5.2.    E:first-line/E::first-line

2.5.3.    E:before/E::before

2.5.4.    E:after/E::after

2.5.5.    E::selection

3.     語法與規則

3.1.     !important

3.2.     /*comment*/

3.3.     @import

3.4.     @charset

3.5.     @media

3.6.     @font-face

3.7.     @page

3.8.     @keyframes

4.     取值與單位

4.1.     長度

4.2.     角度

4.3.     時間

4.4.     頻率

4.5.     佈局

4.6.     解析度

4.7.     顏色

4.8.     文字

4.9.     函式

4.10.  影象

4.11.  數字

5.     CSSHack

5.1.     條件Hack

5.2.     屬性級Hack

5.3.     選擇符級Hack