💡CSS 属性一览表

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

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

property 标识符是一个人类可读的名称，它定义了特定的功能
value 描述了渲染引擎该如何处理此功能

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

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

布局相关

1. 盒模型（94个）

属性

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
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'

Previous@layer Next布局

Last updated 1 year ago