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