💡CSS 属性一览表

布局类（199个）、非布局类（197个）

CSS 的基本目标是让浏览器使用特定的功能（比如定位、颜色、装饰等）来绘制页面上的元素，它的语法就很好地反映了这一目标。CSS 的基本构建块如下：

• property 标识符是一个人类可读的名称，它定义了特定的功能

• value 描述了渲染引擎该如何处理此功能

每一个属性（property）都有一组有效值，它们由形式语法和语义来定义，并由浏览器引擎来实现。CSS 语言的核心功能就是给属性设置特定的值，大约有超过 100 种不同的 CSS 属性和几乎不限数量的 CSS 值。

这部分就带大家来一起看看 CSS 属性，我们先介绍与布局相关的，再介绍非布局类的。

布局相关

1. 盒模型（94个）

属性	相关属性	逻辑属性
box-sizing
width height	max-width max-height min-width min-height	block-size inline-size max-block-size max-inline-size min-block-size min-inline-size
padding	padding-top padding-right padding-bottom padding-left	padding-block padding-inline padding-block-start padding-block-end padding-inline-start padding-inline-end
border	border-top border-right border-bottom border-left	border-block border-inline border-block-start border-block-end border-inline-start border-inline-end
	border-width border-top-width border-right-width border-left-width border-bottom-width	border-block-width border-inline-width border-block-start-width border-block-end-width border-inline-start-width border-inline-end-width
	border-style border-top-style border-right-style border-left-style border-bottom-style	border-block-style border-inline-style border-block-start-style border-block-end-style border-inline-start-style border-inline-end-style
	border-color border-top-color border-right-color border-bottom-color border-left-color	border-block-color border-inline-color border-block-start-color border-block-end-color border-inline-start-color border-inline-end-color
	border-radius border-top-left-radius border-top-right-radius border-bottom-left-radius border-bottom-right-radius	border-start-start-radius border-start-end-radius border-end-end-radius border-end-start-radius
	border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width
margin	margin-top margin-right margin-bottom margin-left	margin-block margin-inline margin-block-start margin-block-end margin-inline-start margin-inline-end

2. 布局（62个）

布局	属性	说明
层级（1个）	z-index
浮动（2个）	float clear
绝对定位（12个）	position top right bottom left	inset inset-block inset-inline inset-block-start inset-block-end inset-inline-start inset-inline-end
多列布局（17个）	column-width column-count columns（缩写）	多列布局
	column-fill column-span
	column-rule-width column-rule-style column-rule-color column-rule（缩写）
	row-gap column-gap gap（缩写）	间距（这3个是标准的） flex, grid 也能用
	align-items（flex） justify-items place-items（缩写）	flex, grid 也能用
	align-content（flex） justify-content（flex） place-content（缩写）	flex, grid 也能用
	align-self（flex） justify-self place-self（缩写）	flex, grid 也能用
Flex（12个）	flex-direction flex-wrap flex-flow（缩写）	flex container
	justify-content align-items align-content	main-axis, flex container cross-axis cross-axis, multi-line
		flex container（多列的3个gap）
	flex-grow flex-shrink flex-basis flex（缩写）	flex item
	align-self	flex item, cross-axis
	order	flex item
Grid（18个）	grid-template-rows grid-template-columns grid-template-areas grid-auto-rows grid-auto-columns grid-auto-flow grid-template（缩写） grid（缩写）	grid container
	grid-row-gap（已废弃） grid-column-gap（已废弃） grid-gap（缩写，已废弃）	最新见多列的3个gap
	masonry-auto-flow align-tracks justify-tracks	grid container（实验中）
	grid-row-start grid-row-end grid-column-start grid-column-end grid-row（缩写） grid-column（缩写） grid-area（缩写）	grid item

3. 行内（43个）

分类	属性	说明
字体（8个）	font-family font-size（它） font-stretch font-style font-variant（缩写） font-weight line-height（它）	缩写 font
对齐（10个）	vertical-align
	text-align text-align-last text-justify text-indent	文本
	object-fit object-position image-orientation image-rendering image-resolution	图片
书写模式（5个）	writing-mode direction unicode-bidi
	text-orientation text-combine-upright
断行（20个）	overflow-wrap（新名） word-wrap（旧名） word-break line-break（CJK） hyphens（兼容性不好） text-overflow white-space
	-webkit-line-clamp line-clamp hyphenate-character（连字符） hyphens（断行时） box-decoration-break（文本段）
	break-after break-before break-inside
	page-break-after page-break-before page-break-inside
	orphans widows	孤儿 寡母

非布局类

1. UI（120个）

分类	属性	说明
表格（5个）	table-layout caption-side border-collapse border-spacing empty-cells
列表（7个）	list-style-type list-style-position list-style-image list-style（缩写）
	counter-set counter-reset counter-increment
ruby（3个）	ruby-position ruby-align ruby-merge	<ruby>元素
颜色（3个）	color color-scheme color-adjust
背景（12个）	background-attachment background-clip background-color background-image background-origin background-position background-repeat background-size background（缩写）
	background-position-x background-position-y background-blend-mode（混色）
混色（2个）	isolation mix-blend-mode	是否创建独立堆叠上下文 如何混合（和父亲/自己背景）
裁切（24个）	clip-path clip（已废弃）	clip
	shape-outside shape-margin shape-image-threshold
	filter backdrop-filter	滤镜
	mask-clip mask-composite mask-image mask-mode mask-origin mask-position mask-repeat mask-size mask（缩写）	mask
	mask-border-mode mask-border-outset mask-border-repeat mask-border-slice mask-border-source mask-border-width mask-border（缩写）
	mask-type
文本（21个）	text-decoration-color text-decoration-line text-decoration-style text-decoration-thickness text-decoration（缩写）	装饰线
	text-decoration-skip text-decoration-skip-ink text-underline-offset text-underline-position
	text-emphasis-style text-emphasis-color text-emphasis（缩写）	强调符
	text-emphasis-position
	word-spacing letter-spacing text-transform text-shadow tab-size initial-letter initial-letter-align	单词间距 字符间距 大小写 阴影 tab 首字母 首字母
	hanging-punctuation	标点符号的位置（行首/尾）
字体（14个）	font-variant-alternates font-variant-caps font-variant-east-asian font-variant-ligatures font-variant-numeric font-variant（缩写）	可变字体
	font-variant-position font-variation-settings font-feature-settings font-size-adjust	上下标 控制可变字体 OpenType字体 小写字母的相对大小
	font-language-override font-optical-sizing font-kerning font-synthesis
覆盖系统（11个）	outline-color outline-style outline-width outline（缩写）	outline
	outline-offset
	caret-color accent-color	输入光标的颜色 复选框/单选框等的颜色
	scrollbar-width scrollbar-color scrollbar-gutter	滚动条
	appearance	平台原生样式
其它（18个）	touch-action pointer-events user-select resize	触屏交互 能否成为事件目标 能否被选中 能否改变大小
	will-change contain content-visibility text-rendering	性能相关
	content quotes	很好用
	cursor opacity visibility box-shadow	鼠标 不透明度 隐藏（占位） 阴影
	paint-order	绘制顺序（fill, stroke, markers）
	aspect-ratio	首选纵横比
	--*	自定义变量
	all	所有的 CSS 属性 除了unicode-bidi, direction 和 自定义变量

2. 滚动（39个）

分类	属性	逻辑属性
溢出 (8个)	overflow overflow-x overflow-y	overflow-block overflow-inline
	overflow-wrap
	overflow-anchor overflow-clip-margin
滚动 (26个)	scroll-behavior scroll-snap-type scroll-snap-align scroll-snap-stop
	scroll-margin scroll-margin-top scroll-margin-right scroll-margin-bottom scroll-margin-left	scroll-margin-block scroll-margin-inline scroll-margin-block-start scroll-margin-block-end scroll-margin-inline-start scroll-margin-inline-end
	scroll-padding scroll-padding-top scroll-padding-right scroll-padding-bottom scroll-padding-left	scroll-padding-block scroll-padding-inline scroll-padding-block-start scroll-padding-block-end scroll-padding-inline-start scroll-padding-inline-end
滚动行为 (5个)	overscroll-behavior overscroll-behavior-x overscroll-behavior-y	overscroll-behavior-block overscroll-behavior-inline

3. 动画（30个）

分类	属性	缩写
变换（7个）	transform transform-origin transform-box transform-style（是否 3d）
	translate scale rotate	可单独指定
2d/3d（3个）	perspective perspective-origin backface-visibility
过渡（5个）	transition-delay transition-duration transition-property transition-timing-function	transition
动画（9个）	animation-name animation-duration animation-timing-function animation-delay animation-direction animation-iteration-count animation-fill-mode animation-play-state	animation
path（6个）	offset-position offset-path offset-distance offset-anchor offset-rotate	offset，早期叫 motion

4. 其它（8个）

• math-style MathML

• forced-color-adjust, text-size-adjust

• block-overflow

• margin-trim

• line-height-step, max-lines

• input-security

总结

这部分简要梳理了下 CSS 属性，一共涵盖了 396 个。如下：

分类	子类	内容
布局相关 199 个	盒模型 94 个	box-sizing, width, height padding, border, margin
	布局 62 个	层级 + 浮动 + 绝对定位 多列布局 + Flex + Grid
	行内相关 43 个	字体 + 对齐 + 书写模式 断行
非布局类 197 个	UI 120 个	表格 + 列表 + ruby 颜色 + 背景 + 混色 + 裁切 文本 + 字体 覆盖系统样式 + 其它
	滚动 39 个	溢出 + 滚动行为
	动画 30 个	变换 + 过渡 + 动画 3d + path
	其它 8 个

扩展阅读

• https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

• https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax

// https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
let attrArr = [];
document.querySelectorAll(".index code").forEach(item => {
  let code = item.innerText;
  if(/^:/.test(code)) {}  // 伪类+伪元素, 62: + 15::
  else if (/\<[a-z-]+\>/.test(code)) {} // 数据类型, 37
  else if (/\(\)$/.test(code)) {}     // 函数, 82
  else if (/\#/.test(code)) {}         // 单位, 30
  else if (/\@/.test(code)) {}         // at-rule, 69
  else attrArr.push(code); // 正常属性, 401
});
console.log(attrArr.length); // 401  -6 = 395
// 4个关键字：unset, inherit, initial, revert
// 2个链接标题：'Pseudo-classes', 'Pseudo-elements'