# CSS 属性一览表

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

![](https://2598460105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGNkDWo1TzHEOBRUxCRfy%2Fuploads%2Frbuki1WJ1O3m5ngeUpgK%2Fcss1.png?alt=media\&token=189aec72-14c5-4a59-95e0-9722ee866cbb)

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

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

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

## 布局相关

### 1. 盒模型（94个）

<table><thead><tr><th width="152">属性</th><th width="304">相关属性</th><th>逻辑属性</th></tr></thead><tbody><tr><td><code>box-sizing</code></td><td></td><td></td></tr><tr><td><code>width</code><br><code>height</code></td><td><code>max-width</code><br><code>max-height</code><br><br><code>min-width</code><br><code>min-height</code></td><td><p><code>block-size</code></p><p><code>inline-size</code></p><p></p><p><code>max-block-size</code></p><p><code>max-inline-size</code></p><p></p><p><code>min-block-size</code></p><p><code>min-inline-size</code></p></td></tr><tr><td><code>padding</code></td><td><code>padding-top</code><br><code>padding-right</code><br><code>padding-bottom</code><br><code>padding-left</code></td><td><code>padding-block</code><br><code>padding-inline</code><br><br><code>padding-block-start</code><br><code>padding-block-end</code><br><code>padding-inline-start</code><br><code>padding-inline-end</code></td></tr><tr><td><code>border</code></td><td><code>border-top</code><br><code>border-right</code><br><code>border-bottom</code><br><code>border-left</code></td><td><code>border-block</code><br><code>border-inline</code><br><br><code>border-block-start</code><br><code>border-block-end</code><br><code>border-inline-start</code><br><code>border-inline-end</code></td></tr><tr><td></td><td><code>border-width</code><br><br><code>border-top-width</code><br><code>border-right-width</code><br><code>border-left-width</code><br><code>border-bottom-width</code></td><td><code>border-block-width</code><br><code>border-inline-width</code><br><br><code>border-block-start-width</code><br><code>border-block-end-width</code><br><code>border-inline-start-width</code><br><code>border-inline-end-width</code></td></tr><tr><td></td><td><code>border-style</code><br><br><code>border-top-style</code><br><code>border-right-style</code><br><code>border-left-style</code><br><code>border-bottom-style</code></td><td><code>border-block-style</code><br><code>border-inline-style</code><br><br><code>border-block-start-style</code><br><code>border-block-end-style</code><br><code>border-inline-start-style</code><br><code>border-inline-end-style</code></td></tr><tr><td></td><td><code>border-color</code><br><br><code>border-top-color</code><br><code>border-right-color</code><br><code>border-bottom-color</code><br><code>border-left-color</code></td><td><code>border-block-color</code><br><code>border-inline-color</code><br><br><code>border-block-start-color</code><br><code>border-block-end-color</code><br><code>border-inline-start-color</code><br><code>border-inline-end-color</code></td></tr><tr><td></td><td><code>border-radius</code><br><br><code>border-top-left-radius</code><br><code>border-top-right-radius</code><br><code>border-bottom-left-radius</code><br><code>border-bottom-right-radius</code></td><td><code>border-start-start-radius</code><br><code>border-start-end-radius</code><br><code>border-end-end-radius</code><br><code>border-end-start-radius</code></td></tr><tr><td></td><td><code>border-image</code><br><br><code>border-image-outset</code><br><code>border-image-repeat</code><br><code>border-image-slice</code><br><code>border-image-source</code><br><code>border-image-width</code></td><td></td></tr><tr><td><code>margin</code></td><td><code>margin-top</code><br><code>margin-right</code><br><code>margin-bottom</code><br><code>margin-left</code></td><td><code>margin-block</code><br><code>margin-inline</code><br><br><code>margin-block-start</code><br><code>margin-block-end</code><br><code>margin-inline-start</code><br><code>margin-inline-end</code></td></tr></tbody></table>

### 2. 布局（62个）

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

### 3. 行内（43个）

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

## 非布局类

### 1. UI（120个）

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

### 2. 滚动（39个）

<table><thead><tr><th width="158">分类</th><th width="282">属性</th><th>逻辑属性</th></tr></thead><tbody><tr><td>溢出 (8个)</td><td><code>overflow</code><br><br><code>overflow-x</code><br><code>overflow-y</code></td><td><code>overflow-block</code><br><code>overflow-inline</code></td></tr><tr><td></td><td><code>overflow-wrap</code></td><td></td></tr><tr><td></td><td><code>overflow-anchor</code><br><code>overflow-clip-margin</code></td><td></td></tr><tr><td>滚动 (26个)</td><td><code>scroll-behavior</code><br><code>scroll-snap-type</code><br><code>scroll-snap-align</code><br><code>scroll-snap-stop</code></td><td></td></tr><tr><td></td><td><code>scroll-margin</code><br><br><code>scroll-margin-top</code><br><code>scroll-margin-right</code><br><code>scroll-margin-bottom</code><br><code>scroll-margin-left</code></td><td><code>scroll-margin-block</code><br><code>scroll-margin-inline</code><br><br><code>scroll-margin-block-start</code><br><code>scroll-margin-block-end</code><br><code>scroll-margin-inline-start</code><br><code>scroll-margin-inline-end</code></td></tr><tr><td></td><td><code>scroll-padding</code><br><br><code>scroll-padding-top</code><br><code>scroll-padding-right</code><br><code>scroll-padding-bottom</code><br><code>scroll-padding-left</code></td><td><code>scroll-padding-block</code><br><code>scroll-padding-inline</code><br><br><code>scroll-padding-block-start</code><br><code>scroll-padding-block-end</code><br><code>scroll-padding-inline-start</code><br><code>scroll-padding-inline-end</code></td></tr><tr><td>滚动行为 (5个)</td><td><code>overscroll-behavior</code><br><br><code>overscroll-behavior-x</code><br><code>overscroll-behavior-y</code></td><td><code>overscroll-behavior-block</code><br><code>overscroll-behavior-inline</code></td></tr></tbody></table>

### 3. 动画（30个）

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

### 4. 其它（8个）

* `math-style` MathML
* `forced-color-adjust`, `text-size-adjust`
* `block-overflow`
* `margin-trim`
* `line-height-step`, `max-lines`
* `input-security`

## 总结

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

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

### 扩展阅读

* <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference>
* <https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax>

```javascript
// 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'
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://anjia1.gitbook.io/web/css/properties.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.