CSS速查总表

前端控更新时间：2019-04-01 18:00:46

具体内容
相关视频
相关知识
最新评论

CSS速查表

紫色链接表示该属性在CSS3有修改或者增加了新的属性值；橙色链接表示该属性是CSS3新增属性

定位 Positioning

position	z-index	top	right
bottom	left	clip

布局 Layout

display	overflow	overflow-x	overflow-y
float	clear	visibility

尺寸 Dimension

width	min-width	max-width	height
min-height	max-height

外补白 Margin

margin	margin-top	margin-right	margin-bottom
margin-left

内补白 Padding

padding	padding-top	padding-right	padding-bottom
padding-left

background	background-image	background-repeat	background-attachment
background-position	background-origin	background-clip	background-size
background-color

颜色 Color

color

opacity

字体 Font

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

文本 Text

text-transform	tab-size	word-break	word-wrap
overflow-wrap	text-align	text-align-last	text-justify
word-spacing	letter-spacing	text-indent	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

表格 Table

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

内容 Content

content

counter-increment

counter-reset

quotes

用户界面 User Interface

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

多列 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	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 Firefox

border-colors	border-top-colors	border-right-colors	border-bottom-colors
border-left-colors

Only Webkit

text-fill-color	text-stroke	text-stroke-width	text-stroke-color
box-reflect	tap-highlight-color	user-drag

元素选择符 Element Selectors

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

伪对象选择符 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	@charset	@page
@import	@media	@font-face	@keyframes
@supports

长度值与单位 Length Data Types and Units

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

角度值与单位 Angle Data Types and Units

<angle>	deg	grad	rad
turn

时间值与单位 Time Data Types and Units

<time>

频率值与单位 Frequency Data Types and Units

kHz

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

<grid>

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

dpi

dpcm

dppx

颜色值 Color Data Types

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

文本值 Textual Data Types

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

函数值 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

附录 Appendix

颜色关键字(Color Keywords)

媒体类型(Media Types)

常用CSS Hack

条件Hack

属性级Hack

选择符级Hack

问题和经验

border	border-width	border-style	border-color
border-top	border-top-width	border-top-style	border-top-color
border-right	border-right-width	border-right-style	border-right-color
border-bottom	border-bottom-width	border-bottom-style	border-bottom-color
border-left	border-left-width	border-left-style	border-left-color
border-radius	border-top-left-radius	border-top-right-radius	border-bottom-right-radius
border-bottom-left-radius	box-shadow	border-image	border-image-source
border-image-slice	border-image-width	border-image-outset	border-image-repeat

E:link	E:visited	E:hover	E:active
E:focus	E:lang(fr)	@page:first	@page:left
@page:right
E:not(s)	E:root	E:last-child	E:only-child
E:nth-child(n)	E:nth-last-child(n)	E:target	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

推荐手册

CSS速查总表

定位 Positioning

尺寸 Dimension

外补白 Margin

内补白 Padding

边框 Border

背景 Background

颜色 Color

字体 Font

文本 Text

文本装饰 Text Decoration

书写模式 Writing Modes

列表 List

表格 Table

内容 Content

用户界面 User Interface

多列 Multi-column

伸缩盒 Flexible Box(旧)

伸缩盒 Flexible Box(新)

转换 Transform

过渡 Transition

动画 Animation

打印 Printing

媒体查询 Media Queries

Only IE

Only Firefox

Only Webkit

元素选择符 Element Selectors

关系选择符 Relationship Selectors

属性选择符 Attribute Selectors

伪类选择符 Pseudo-Classes Selectors

伪对象选择符 Pseudo-Element Selectors

语法与规则 Rules and Syntax

长度值与单位 Length Data Types and Units

角度值与单位 Angle Data Types and Units

时间值与单位 Time Data Types and Units

频率值与单位 Frequency Data Types and Units

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

颜色值 Color Data Types

函数值 Functional Notations Data Types

生成内容值 Content Notations Data Types

图像值 Image Data Types

数字值 Numeric Data Types

附录 Appendix

常用CSS Hack

问题和经验