CSS 常用属性 - 前端知识体系

💡 本页面列出了前端开发中使用频率最高的 CSS 属性，共 30 个。掌握这些属性，可以应对 90% 以上的日常开发场景。

🔥 高频属性（Top 1-10）

display 第 1 名

定义元素的布局类型，控制元素如何显示及其子元素的布局方式。

常用值：

block inline inline-block flex grid none

示例：

.container { display: flex; }

color 第 2 名

设置文本的颜色。

color: <color>;

常用值：

#fff #000 rgb() rgba() hsl() currentColor

示例：

.text { color: #333; }

font-size 第 3 名

设置字体的大小。

font-size: <length> | <percentage>;

常用值：

14px 16px 1.5rem 100% medium

示例：

body { font-size: 16px; }

margin 第 4 名

设置元素的外边距，控制元素与周围元素的间距。

margin: <length> | auto;

常用值：

0 10px 1rem auto 0 auto

示例：

.box { margin: 20px auto; }

padding 第 5 名

设置元素的内边距，控制内容与边框之间的间距。

padding: <length>;

常用值：

0 10px 1rem 20px 40px

示例：

.box { padding: 16px 24px; }

width 第 6 名

设置元素的宽度。

width: <length> | <percentage> | auto;

常用值：

100% 200px auto max-content

示例：

.container { width: 100%; }

height 第 7 名

设置元素的高度。

height: <length> | <percentage> | auto;

常用值：

100% 100vh auto 40px

示例：

.hero { height: 100vh; }

background 第 8 名

设置元素的背景（简写属性）。

background: <color> <url> <position> / <size>;

常用值：

#fff transparent url() linear-gradient()

示例：

.box { background: linear-gradient(to right, #667eea, #764ba2); }

border 第 9 名

设置元素的边框（简写属性）。

border: <width> <style> <color>;

常用值：

1px solid #ccc 2px dashed #333 none

示例：

.box { border: 1px solid #e2e8f0; }

text-align 第 10 名

设置文本的水平对齐方式。

text-align: left | center | right | justify;

常用值：

left center right justify

示例：

.text { text-align: center; }

⭐ 中频属性（Top 11-20）

position 第 11 名

指定元素的定位方式。

position: static | relative | absolute | fixed | sticky;

常用值：

relative absolute fixed sticky

示例：

.modal { position: fixed; top: 50%; left: 50%; }

flex 第 12 名

设置弹性盒子的子元素如何分配空间（简写属性）。

flex: <grow> <shrink> <basis>;

常用值：

1 auto none 0 0 auto

示例：

.item { flex: 1; }

justify-content 第 13 名

设置弹性盒子主轴上的对齐方式。

justify-content: flex-start | center | flex-end | space-between | space-around;

常用值：

flex-start center flex-end space-between space-around

示例：

.container { justify-content: space-between; }

align-items 第 14 名

设置弹性盒子交叉轴上的对齐方式。

align-items: stretch | flex-start | center | flex-end | baseline;

常用值：

stretch center flex-start flex-end

示例：

.container { align-items: center; }

border-radius 第 15 名

设置元素的圆角半径。

border-radius: <length>;

常用值：

4px 8px 50% 9999px

示例：

.btn { border-radius: 8px; }

font-weight 第 16 名

设置字体的粗细。

font-weight: normal | bold | <number>;

常用值：

normal bold 400 500 600 700

示例：

h1 { font-weight: 700; }

line-height 第 17 名

设置行高（行间距）。

line-height: <number> | <length> | <percentage>;

常用值：

1.5 1.6 24px 150%

示例：

p { line-height: 1.6; }

text-decoration 第 18 名

设置文本的装饰线。

text-decoration: none | underline | overline | line-through;

常用值：

none underline line-through

示例：

a { text-decoration: none; }

overflow 第 19 名

设置内容溢出时的处理方式。

overflow: visible | hidden | scroll | auto;

常用值：

visible hidden scroll auto

示例：

.box { overflow: hidden; }

z-index 第 20 名

设置元素的堆叠顺序。

z-index: <integer> | auto;

常用值：

1 10 100 999 -1

示例：

.modal { z-index: 999; }

📌 常用属性（Top 21-30）

cursor 第 21 名

设置鼠标悬停时的光标样式。

cursor: default | pointer | text | move | not-allowed;

常用值：

default pointer text move not-allowed

示例：

.btn { cursor: pointer; }

opacity 第 22 名

设置元素的透明度。

opacity: <number>;

常用值：

0 0.5 1 0.8

示例：

.overlay { opacity: 0.5; }

box-shadow 第 23 名

设置元素的阴影效果。

box-shadow: <x> <y> <blur> <spread> <color>;

常用值：

0 2px 4px rgba(0,0,0,0.1) none

示例：

.card { box-shadow: 0 4px 12px rgba(0,0,0,0.15); }

transition 第 24 名

设置元素的过渡效果（简写属性）。

transition: <property> <duration> <timing-function>;

常用值：

all 0.3s ease opacity 0.2s transform 0.3s

示例：

.btn { transition: all 0.3s ease; }

transform 第 25 名

设置元素的 2D 或 3D 变换。

transform: <transform-function>;

常用值：

translateX() translateY() scale() rotate() none

示例：

.box:hover { transform: scale(1.05); }

font-family 第 26 名

设置字体族。

font-family: <font-name>, <fallback>;

常用值：

Arial Helvetica sans-serif serif monospace

示例：

body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }

gap 第 27 名

设置弹性盒子或网格布局中项目之间的间距。

gap: <length>;

常用值：

8px 16px 1rem 20px 40px

示例：

.container { gap: 16px; }

min-width / max-width 第 28 名

设置元素的最小/最大宽度。

min-width: <length>; max-width: <length>;

常用值：

0 100% 1200px none

示例：

.container { max-width: 1200px; margin: 0 auto; }

visibility 第 29 名

设置元素是否可见（隐藏但占位）。

visibility: visible | hidden | collapse;

常用值：

visible hidden

示例：

.hidden { visibility: hidden; }

white-space 第 30 名

设置元素中空白的处理方式。

white-space: normal | nowrap | pre | pre-wrap | pre-line;

常用值：

normal nowrap pre-wrap

示例：

.text { white-space: nowrap; }