TL
Tool Lab
💰捐赠
💰捐赠

CSS Properties Reference

Comprehensive CSS property reference — flexbox, grid, typography, animation, and more.

52 个属性

display布局

Defines how element is rendered in the document.

block | inline | flex | grid | inline-flex | inline-grid | none | contents
position布局

Specifies positioning method.

static | relative | absolute | fixed | sticky
top / right / bottom / left布局

Offset for positioned elements.

<length> | <percentage> | auto
float布局

Moves element to left/right of container.

left | right | none | inline-start | inline-end
clear布局

Specifies what happens with the element next to a floated element.

none | left | right | both | inline-start | inline-end
z-index布局

Sets stacking order of elements.

auto | <integer>
overflow布局

Controls content that overflows element box.

visible | hidden | scroll | auto | clip
width / height盒模型

Sets element dimensions.

<length> | <percentage> | auto | min-content | max-content | fit-content
max-width / max-height盒模型

Sets maximum element dimensions.

<length> | <percentage> | none | min-content | max-content
min-width / min-height盒模型

Sets minimum element dimensions.

<length> | <percentage> | auto | min-content | max-content
margin盒模型

Space outside the element border.

<length> | <percentage> | auto (shorthand: top right bottom left)
padding盒模型

Space between content and border.

<length> | <percentage> (shorthand: top right bottom left)
border盒模型

Shorthand for border-width, border-style, border-color.

<border-width> || <border-style> || <color>
border-radius盒模型

Rounds corners of element border box.

<length> | <percentage> (1-4 values for corners)
box-sizing盒模型

How width/height is calculated.

content-box | border-box
box-shadow盒模型

Adds shadow effects around element frame.

<offset-x> <offset-y> <blur> <spread> <color> | inset | none
flex-direction弹性盒

Sets main axis of flex container.

row | row-reverse | column | column-reverse
flex-wrap弹性盒

Whether flex items wrap onto multiple lines.

nowrap | wrap | wrap-reverse
justify-content弹性盒

Alignment along main axis.

flex-start | flex-end | center | space-between | space-around | space-evenly
align-items弹性盒

Default alignment along cross axis.

stretch | flex-start | flex-end | center | baseline
align-content弹性盒

Multi-line flex container alignment.

flex-start | flex-end | center | space-between | space-around | stretch
flex弹性盒

Shorthand for flex-grow, flex-shrink, flex-basis.

none | auto | <flex-grow> <flex-shrink> <flex-basis>
gap弹性盒

Space between flex/grid items.

<length> | <percentage> (row-gap column-gap)
grid-template-columns网格

Defines columns of the grid.

none | <track-size> | repeat() | minmax() | auto-fill | auto-fit
grid-template-rows网格

Defines rows of the grid.

none | <track-size> | repeat() | minmax()
grid-column网格

Shorthand for grid-column-start and grid-column-end.

<line> / <line> | span <number>
grid-row网格

Shorthand for grid-row-start and grid-row-end.

<line> / <line> | span <number>
grid-area网格

Named grid area or row/column shorthand.

<name> | <row-start> / <col-start> / <row-end> / <col-end>
font-size排版

Size of the font.

<length> | <percentage> | xx-small...xx-large | smaller | larger
font-family排版

Prioritized list of font family names.

<family-name> | <generic-family> (comma-separated list)
font-weight排版

Weight/boldness of the font.

normal | bold | bolder | lighter | 100–900
font-style排版

Italic or oblique font.

normal | italic | oblique
line-height排版

Height of a line box.

normal | <number> | <length> | <percentage>
text-align排版

Horizontal alignment of text.

left | right | center | justify | start | end
text-decoration排版

Decorative lines on text.

none | underline | overline | line-through | blink
text-transform排版

Capitalization of text.

none | uppercase | lowercase | capitalize
letter-spacing排版

Space between characters.

normal | <length>
word-spacing排版

Space between words.

normal | <length>
color视觉

Foreground color of text and text decorations.

<color> (name, hex, rgb(), hsl(), oklch())
background视觉

Shorthand for all background properties.

<color> | <image> | <position> / <size> <repeat> <attachment>
background-color视觉

Background color of element.

<color> | transparent
opacity视觉

Transparency of element (0–1).

<number> (0 = transparent, 1 = opaque)
visibility视觉

Shows or hides element without changing layout.

visible | hidden | collapse
transition动画

Shorthand for transition properties.

<property> <duration> <easing> <delay>
animation动画

Shorthand for animation properties.

<name> <duration> <easing> <delay> <iteration> <direction> <fill-mode>
transform动画

Applies 2D/3D transforms.

none | translate() rotate() scale() skew() matrix()
will-change动画

Hints browser about expected changes for optimization.

auto | scroll-position | contents | transform | opacity
cursorUI

Type of mouse cursor.

auto | default | pointer | text | move | grab | not-allowed | crosshair | ...
pointer-eventsUI

Controls when element can be target of pointer events.

auto | none | all | fill | stroke | painted
user-selectUI

Controls if text can be selected.

auto | none | text | all | contain
outlineUI

Outline drawn around element outside border.

<outline-width> || <outline-style> || <color> | none
resizeUI

Whether/how user can resize element.

none | both | horizontal | vertical

关于本工具

本参考涵盖八个类别中最常用的 CSS 属性：布局、盒模型、弹性盒、网格、排版、视觉、动画和 UI 交互。

使用搜索框按属性名、描述或允许值过滤。使用类别过滤器浏览特定组。

使用方法

  1. 在搜索框中输入属性名或关键字来过滤列表。
  2. 从下拉菜单中选择类别，只显示该组。
  3. 每行显示属性名、类别标签、描述和允许值。

使用场景

前端开发人员在开发过程中查找属性名和有效值。学习 CSS 的学生使用参考来探索可用的属性。

常见问题

  • 是否包含所有 CSS 属性？ — 否。本参考只涵盖最常用的属性，省略了稀少或实验性属性。
  • 是否列出了带供应商前缀的属性？ — 否。只列出不带前缀的标准属性。