TL
Tool Lab
💰Donate
💰Donate

CSS Properties Reference

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

52 thuộc tính

displayBố cục

Defines how element is rendered in the document.

block | inline | flex | grid | inline-flex | inline-grid | none | contents
positionBố cục

Specifies positioning method.

static | relative | absolute | fixed | sticky
top / right / bottom / leftBố cục

Offset for positioned elements.

<length> | <percentage> | auto
floatBố cục

Moves element to left/right of container.

left | right | none | inline-start | inline-end
clearBố cục

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

none | left | right | both | inline-start | inline-end
z-indexBố cục

Sets stacking order of elements.

auto | <integer>
overflowBố cục

Controls content that overflows element box.

visible | hidden | scroll | auto | clip
width / heightMô hình hộp

Sets element dimensions.

<length> | <percentage> | auto | min-content | max-content | fit-content
max-width / max-heightMô hình hộp

Sets maximum element dimensions.

<length> | <percentage> | none | min-content | max-content
min-width / min-heightMô hình hộp

Sets minimum element dimensions.

<length> | <percentage> | auto | min-content | max-content
marginMô hình hộp

Space outside the element border.

<length> | <percentage> | auto (shorthand: top right bottom left)
paddingMô hình hộp

Space between content and border.

<length> | <percentage> (shorthand: top right bottom left)
borderMô hình hộp

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

<border-width> || <border-style> || <color>
border-radiusMô hình hộp

Rounds corners of element border box.

<length> | <percentage> (1-4 values for corners)
box-sizingMô hình hộp

How width/height is calculated.

content-box | border-box
box-shadowMô hình hộp

Adds shadow effects around element frame.

<offset-x> <offset-y> <blur> <spread> <color> | inset | none
flex-directionFlexbox

Sets main axis of flex container.

row | row-reverse | column | column-reverse
flex-wrapFlexbox

Whether flex items wrap onto multiple lines.

nowrap | wrap | wrap-reverse
justify-contentFlexbox

Alignment along main axis.

flex-start | flex-end | center | space-between | space-around | space-evenly
align-itemsFlexbox

Default alignment along cross axis.

stretch | flex-start | flex-end | center | baseline
align-contentFlexbox

Multi-line flex container alignment.

flex-start | flex-end | center | space-between | space-around | stretch
flexFlexbox

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

none | auto | <flex-grow> <flex-shrink> <flex-basis>
gapFlexbox

Space between flex/grid items.

<length> | <percentage> (row-gap column-gap)
grid-template-columnsGrid

Defines columns of the grid.

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

Defines rows of the grid.

none | <track-size> | repeat() | minmax()
grid-columnGrid

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

<line> / <line> | span <number>
grid-rowGrid

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

<line> / <line> | span <number>
grid-areaGrid

Named grid area or row/column shorthand.

<name> | <row-start> / <col-start> / <row-end> / <col-end>
font-sizeTypography

Size of the font.

<length> | <percentage> | xx-small...xx-large | smaller | larger
font-familyTypography

Prioritized list of font family names.

<family-name> | <generic-family> (comma-separated list)
font-weightTypography

Weight/boldness of the font.

normal | bold | bolder | lighter | 100–900
font-styleTypography

Italic or oblique font.

normal | italic | oblique
line-heightTypography

Height of a line box.

normal | <number> | <length> | <percentage>
text-alignTypography

Horizontal alignment of text.

left | right | center | justify | start | end
text-decorationTypography

Decorative lines on text.

none | underline | overline | line-through | blink
text-transformTypography

Capitalization of text.

none | uppercase | lowercase | capitalize
letter-spacingTypography

Space between characters.

normal | <length>
word-spacingTypography

Space between words.

normal | <length>
colorTrực quan

Foreground color of text and text decorations.

<color> (name, hex, rgb(), hsl(), oklch())
backgroundTrực quan

Shorthand for all background properties.

<color> | <image> | <position> / <size> <repeat> <attachment>
background-colorTrực quan

Background color of element.

<color> | transparent
opacityTrực quan

Transparency of element (0–1).

<number> (0 = transparent, 1 = opaque)
visibilityTrực quan

Shows or hides element without changing layout.

visible | hidden | collapse
transitionHoạt ảnh

Shorthand for transition properties.

<property> <duration> <easing> <delay>
animationHoạt ảnh

Shorthand for animation properties.

<name> <duration> <easing> <delay> <iteration> <direction> <fill-mode>
transformHoạt ảnh

Applies 2D/3D transforms.

none | translate() rotate() scale() skew() matrix()
will-changeHoạt ảnh

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

Giới thiệu công cụ

Tài liệu tham khảo này bao gồm các thuộc tính CSS được sử dụng phổ biến nhất trong tám danh mục: Bố cục, Mô hình hộp, Flexbox, Grid, Typography, Trực quan, Hoạt ảnh và tương tác UI.

Sử dụng hộp tìm kiếm để lọc theo tên thuộc tính, mô tả hoặc giá trị được chấp nhận.

Cách sử dụng

  1. Nhập tên thuộc tính hoặc từ khóa vào hộp tìm kiếm để lọc danh sách.
  2. Chọn danh mục từ menu thả xuống để chỉ hiển thị nhóm đó.
  3. Mỗi hàng hiển thị tên thuộc tính, thẻ danh mục, mô tả và giá trị được chấp nhận.

Trường hợp sử dụng

Các nhà phát triển front-end tra cứu tên thuộc tính và giá trị hợp lệ trong quá trình phát triển.

Câu hỏi thường gặp

  • Tất cả các thuộc tính CSS có được bao gồm không?Không. Tài liệu tham khảo này chỉ bao gồm các thuộc tính được sử dụng phổ biến nhất.
  • Các thuộc tính có tiền tố nhà cung cấp có được liệt kê không?Không. Chỉ các thuộc tính tiêu chuẩn không có tiền tố được liệt kê.