CSS高频属性速查指南

一、盒模型相关

1. width / height：元素宽度/高度

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

1. padding：内边距（上右下左）

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

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

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

1. margin：外边距（上右下左）

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

1. box-sizing：盒模型计算方式

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

二、布局相关（Flexbox和Grid）

Flexbox

1. display: flex：定义弹性容器

.container { display: flex; }

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

.container { flex-direction: row; }

1. justify-content：主轴对齐方式

.container { justify-content: center; }

1. align-items：交叉轴对齐方式

.container { align-items: center; }

1. flex-wrap：是否换行

.container { flex-wrap: wrap; }

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

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

Grid布局

1. display: grid：定义网格容器

.container { display: grid; }

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

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

1. gap：网格间距

.container { gap: 10px; }

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

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

三、定位

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

.box { position: relative; }

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

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

1. z-index：堆叠顺序

.box { z-index: 10; }

四、背景与颜色

1. background-color：背景颜色

.box { background-color: #fff; }

1. background-image：背景图片

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

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

.box { background-size: cover; }

1. background-position：背景位置

.box { background-position: center; }

1. background-repeat：背景重复

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

五、文本与字体

1. color：文本颜色

p { color: #333; }

1. font-family：字体

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

1. font-size：字体大小

p { font-size: 16px; }

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

h1 { font-weight: bold; }

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

p { text-align: center; }

1. line-height：行高

p { line-height: 1.5; }

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

a { text-decoration: none; }

六、显示与可见性

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

.box { display: inline-block; }

1. visibility：可见性（visible, hidden）

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

1. opacity：透明度（0.0-1.0）

.box { opacity: 0.5; }

七、变换与动画

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

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

1. transition：过渡效果

.box { transition: all 0.3s ease; }

1. animation：动画（配合@keyframes）

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

八、其他常用属性

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

button { cursor: pointer; }

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

.box { overflow: auto; }

1. box-shadow：盒子阴影

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

1. border-radius：边框圆角

.box { border-radius: 5px; }

总结

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