CSS属性速查表

定位 Positioning

• position
• z-index
• top
• right
• bottom
• left
• clip

布局 Layout

• display
• float
• clear
• visibility
• overflow

尺寸与补白 Dimension and Margins and Paddings

• width
• min-width
• max-width
• height
• min-height
• max-height
• margin
• padding

背景与边框 Backgrounds and Borders

• border
• border-width
• border-style
• border-color
• border-radius
• box-shadow
• border-image
• border-image-source
• border-image-slice
• border-image-width
• border-image-outset
• border-image-repeat
• background
• background-color
• background-image
• background-repeat
• background-attachment
• background-position
• background-origin
• background-clip
• background-size

颜色 Color

• color
• opacity

字体 Font

• font
• font-style
• font-variant
• font-weight
• font-size
• font-family
• font-stretch
• font-size-adjust

文本 Text

• text-transform
• white-space
• tab-size
• word-break
• word-wrap/overflow-wrap
• text-align
• text-align-last
• text-justify
• word-spacing
• letter-spacing
• text-indent
• vertical-align
• line-height
• text-size-adjust

文本装饰 Text Decoration

• text-decoration
• text-decoration-line
• text-decoration-color
• text-decoration-style
• text-decoration-skip
• text-underline-position
• text-shadow

书写模式 Writing Modes

• direction
• unicode-bidi
• writing-mode

列表 List

• list-style
• list-style-image
• list-style-position
• list-style-type

表格 Table

• table-layout
• border-collapse
• border-spacing
• caption-side
• empty-cells

内容 Content

• content
• counter-increment
• counter-reset
• quotes

用户界面 User Interface

• appearance
• text-overflow
• outline
• outline-width
• outline-style
• outline-color
• outline-offset
• nav-index
• nav-up
• nav-right
• nav-down
• nav-left
• cursor
• zoom
• box-sizing
• resize
• ime-mode
• user-select
• pointer-events

多列 Multi-column

• columns
• column-width
• column-count
• column-gap
• column-rule
• column-rule-width
• column-rule-style
• column-rule-color
• column-span
• column-fill
• column-break-before
• column-break-after
• column-break-inside

伸缩盒 Flexible Box(旧)

• box-orient
• box-pack
• box-align
• box-flex
• box-flex-group
• box-ordinal-group
• box-direction
• box-lines

伸缩盒 Flexible Box(新)

• flex
• flex-grow
• flex-shrink
• flex-basis
• flex-flow
• flex-direction
• flex-wrap
• align-content
• align-items
• align-self
• justify-content
• order

转换 Transform

• transform
• transform-origin
• transform-style
• perspective
• perspective-origin
• backface-visibility

过渡 Transition

• transition
• transition-property
• transition-duration
• transition-timing-function
• transition-delay

动画 Animation

• animation
• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction
• animation-play-state
• animation-fill-mode

打印 Printing

• page
• page-break-before
• page-break-after
• page-break-inside

媒体查询 Media Queries

• width
• height
• device-width
• device-height
• orientation
• aspect-ratio
• device-aspect-ratio
• color
• color-index
• monochrome
• resolution
• device-pixel-ratio
• scan
• grid

Only IE

• scrollbar-3dlight-color
• scrollbar-darkshadow-color
• scrollbar-highlight-color
• scrollbar-shadow-color
• scrollbar-arrow-color
• scrollbar-face-color
• scrollbar-track-color
• scrollbar-base-color
• filter
• behavior

Only Webkit

• -webkit-text-fill-color
• -webkit-text-stroke
• -webkit-text-stroke-width
• -webkit-text-stroke-color
• -webkit-box-reflect
• -webkit-tap-highlight-color
• -webkit-user-drag
• -webkit-overflow-scrolling

元素选择符 Element Selectors

• *
• E
• E#id
• E.class

关系选择符 Relationship Selectors

• E F
• E>F
• E+F
• E~F

属性选择符 Attribute Selectors

• E[att]
• E[att="val"]
• E[att~="val"]
• E[att^="val"]
• E[att$="val"]
• E[att*="val"]
• E[att|="val"]

伪类选择符 Pseudo-Classes Selectors

• E:link
• E:visited
• E:hover
• E:active
• E:focus
• E:lang(fr)
• E:not(s)
• E:root
• E:first-child
• E:last-child
• E:only-child
• E:nth-child(n)
• E:nth-last-child(n)
• E:first-of-type
• E:last-of-type
• E:only-of-type
• E:nth-of-type(n)
• E:nth-last-of-type(n)
• E:empty
• E:checked
• E:enabled
• E:disabled
• E:target
• @page:first
• @page:left
• @page:right

伪对象选择符 Pseudo-Element Selectors

• E:first-letter/E::first-letter
• E:first-line/E::first-line
• E:before/E::before
• E:after/E::after
• E::placeholder
• E::selection

语法与规则 Rules and Syntax

• !important
• comment
• @import
• @charset
• @media
• @font-face
• @page
• @keyframes
• @supports

长度值与单位 Length Data Types and Units

• <length>
• em
• ex
• ch
• rem
• vw
• vh
• vmax
• vmin
• cm
• mm
• q
• in
• pt
• pc
• px

角度值与单位 Angle Data Types and Units

• <angle>
• deg
• grad
• rad
• turn

时间值与单位 Time Data Types and Units

• <time>
• s
• ms

频率值与单位 Frequency Data Types and Units

• <frequency>
• Hz
• kHz

特殊布局值与单位 Layout-specific Data Types and Units

• <fraction>
• <grid>
• fr
• gr

分辨率值与单位 Resolution Data Types and Units

• <resolution>
• dpi
• dpcm
• dppx

颜色值 Color Data Types

• <color>
• Color Name
• HEX
• RGB
• RGBA
• HSL
• HSLA
• transparent
• currentColor

文本值 Textual Data Types

• inherit
• initial
• unset
• <string>
• <url>
• <identifier>

函数值 Functional Notations Data Types

• calc()
• toggle()

生成内容值 Content Notations Data Types

• counter()
• counters()
• attr()

图像值 Image Data Types

• <image>
• image()
• image-set()
• <gradient>
• linear-gradient()
• radial-gradient()
• repeating-linear-gradient()
• repeating-radial-gradient()

数字值 Numeric Data Types

• <number>
• <integer>
• <percentage>

附录 Appendix

• 颜色关键字(Color Keywords)
• 媒体类型(Media Types)

常用CSS Hack

• 条件Hack
• 属性级Hack
• 选择符级Hack

问题和经验

• 参考资源列表
• Bugs和解决方案
• 技巧和经验
• 其它经验