CSS高频属性速查指南

一、盒模型相关

width / height：元素宽度/高度

css 复制代码

.box { width: 100px; height: 100px; }

padding：内边距（上右下左）

css 复制代码

.box { padding: 10px 5px 10px 5px; } /* 简写：padding: 上下 左右; */

border：边框（宽度样式颜色）

css 复制代码

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

margin：外边距（上右下左）

css 复制代码

.box { margin: 0 auto; } /* 水平居中 */

box-sizing：盒模型计算方式

css 复制代码

.box { box-sizing: border-box; } /* 包括padding和border在内的宽度 */

二、布局相关（Flexbox和Grid）

Flexbox

display: flex：定义弹性容器

css 复制代码

.container { display: flex; }

flex-direction：主轴方向（row, column）

css 复制代码

.container { flex-direction: row; }

justify-content：主轴对齐方式

css 复制代码

.container { justify-content: center; }

align-items：交叉轴对齐方式

css 复制代码

.container { align-items: center; }

flex-wrap：是否换行

css 复制代码

.container { flex-wrap: wrap; }

flex：子元素的伸缩性（flex-grow, flex-shrink, flex-basis）

css 复制代码

.item { flex: 1; } /* 等分剩余空间 */

Grid布局

display: grid：定义网格容器

css 复制代码

.container { display: grid; }

grid-template-columns / grid-template-rows：定义列和行

css 复制代码

.container { grid-template-columns: 100px 1fr 2fr; }

gap：网格间距

css 复制代码

.container { gap: 10px; }

grid-column / grid-row：项目放置位置

css 复制代码

.item { grid-column: 1 / 3; } /* 占据第1到第3列 */

三、定位

position：定位方式（static, relative, absolute, fixed, sticky）

css 复制代码

.box { position: relative; }

top / right / bottom / left：定位偏移

css 复制代码

.box { top: 10px; left: 20px; }

z-index：堆叠顺序

css 复制代码

.box { z-index: 10; }

四、背景与颜色

background-color：背景颜色

css 复制代码

.box { background-color: #fff; }

background-image：背景图片

css 复制代码

.box { background-image: url('image.jpg'); }

background-size：背景尺寸（cover, contain, 具体值）

css 复制代码

.box { background-size: cover; }

background-position：背景位置

css 复制代码

.box { background-position: center; }

background-repeat：背景重复

css 复制代码

.box { background-repeat: no-repeat; }

五、文本与字体

color：文本颜色

css 复制代码

p { color: #333; }

font-family：字体

css 复制代码

body { font-family: Arial, sans-serif; }

css 复制代码

p { font-size: 16px; }

font-weight：字体粗细（normal, bold, 100-900）

css 复制代码

h1 { font-weight: bold; }

text-align：文本对齐（left, center, right, justify）

css 复制代码

p { text-align: center; }

line-height：行高

css 复制代码

p { line-height: 1.5; }

text-decoration：文本装饰（none, underline, line-through）

css 复制代码

a { text-decoration: none; }

六、显示与可见性

display：显示类型（block, inline, inline-block, none）

css 复制代码

.box { display: inline-block; }

visibility：可见性（visible, hidden）

css 复制代码

.box { visibility: hidden; } /* 隐藏但占据空间 */

opacity：透明度（0.0-1.0）

css 复制代码

.box { opacity: 0.5; }

七、变换与动画

transform：变换（旋转、缩放、移动、倾斜）

css 复制代码

.box { transform: rotate(45deg) scale(1.2); }

transition：过渡效果

css 复制代码

.box { transition: all 0.3s ease; }

animation：动画（配合@keyframes）

css 复制代码

.box { animation: move 2s infinite; }
@keyframes move {
  0% { transform: translateX(0); }
  100% { transform: translateX(100px); }
}

八、其他常用属性

cursor：鼠标样式（pointer, default, text）

css 复制代码

button { cursor: pointer; }

overflow：溢出处理（visible, hidden, scroll, auto）

css 复制代码

.box { overflow: auto; }

box-shadow：盒子阴影

css 复制代码

.box { box-shadow: 2px 2px 10px rgba(0,0,0,0.2); }

border-radius：边框圆角

css 复制代码

.box { border-radius: 5px; }

总结

以上40个属性是CSS中使用频率非常高的属性，掌握它们可以应对大部分布局和样式需求。当然，CSS还有很多其他属性，但先从高频属性入手，再逐步扩展，是学习CSS的有效方法。