前端开发必备：最常用 CSS 代码大全与速查手册（从基础样式到现代布局实战）

/* 字体族设置：优先加载系统无衬线字体，回退兜底 */
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;

/* 字号与粗细 */
font-size: 16px;          /* 推荐使用 rem 或 px：16px / 1rem 为基准 */
font-weight: 600;         /* 粗细：100-900，normal(400), bold(700) */
font-style: italic;       /* 斜体：normal(正常) | italic(斜体) | oblique(倾斜) */
line-height: 1.6;         /* 行高：推荐使用无单位倍数（如 1.5 ~ 1.8），自适应字号 */

/* 字体简写规范：style weight size/line-height family */
font: italic 700 16px/1.6 "Microsoft YaHei", sans-serif;

color: #333333;             /* 文本颜色 */
text-align: center;         /* 水平对齐：left | center | right | justify(两端对齐) */
text-indent: 2em;           /* 首行缩进：中文段落常用 2em（两个字符宽度） */
letter-spacing: 0.5px;      /* 字符间距（中文/英文字符间隔） */
word-spacing: 2px;          /* 单词间距（仅对英文空格间隔生效） */

/* 文本装饰线 */
text-decoration: none;      /* 清除超链接默认下划线 */
/* text-decoration: underline | line-through(删除线) | overline(上划线) */

/* 英文大小写转换 */
text-transform: capitalize; /* 首字母大写：uppercase(全大写) | lowercase(全小写) */

/* 单行文本溢出显示省略号（...） */
.ellipsis-single {
  white-space: nowrap;      /* 强制不换行 */
  overflow: hidden;         /* 超出裁剪 */
  text-overflow: ellipsis;  /* 溢出部分显示省略号 */
}

/* 多行文本超出截断（以 2 行为例） */
.ellipsis-multi {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;    /* 限制显示行数 */
  overflow: hidden;
}

background-color: #f8fafc;                          /* 背景色 */
background-image: url('/assets/images/banner.webp'); /* 背景图片 */
background-repeat: no-repeat;                       /* 重复方式：repeat | repeat-x | repeat-y | no-repeat */
background-position: center center;                /* 背景位置：水平 垂直 (left / center / right / 像素值) */
background-size: cover;                             /* 背景尺寸：cover(铺满等比裁剪) | contain(完整显示) | 100% 100% */
background-attachment: fixed;                       /* 背景附着：scroll(随页面滚动) | fixed(视口固定背景视差) */

/* 常用背景复合写法 */
background: #0f172a url('/bg.png') no-repeat center center / cover;

/* 边框基础属性：宽度 样式 颜色 */
border: 1px solid #e2e8f0;      /* 实线边框：solid | dashed(虚线) | dotted(点线) | double(双线) */
border-bottom: 2px solid #3b82f6; /* 单侧边框 */

/* 圆角设置 */
border-radius: 8px;              /* 全局圆角 */
border-radius: 12px 12px 0 0;    /* 分离设置：左上 右上 右下 左下 */
border-radius: 50%;              /* 正方形变正圆，矩形变胶囊形 */

/* 盒子阴影（X偏移 Y偏移 模糊半径 扩展半径 颜色） */
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.05);

/* 【必加全局重置】：让元素的 width/height 包含 padding 和 border */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 宽高设定 */
width: 100%;
max-width: 1200px;              /* 限制内容最大宽度，防止大屏过散 */
min-height: 100vh;              /* 铺满至少一个视口高度 */

/* 外边距（Margin）与内边距（Padding）顺时针规则：上 右 下 左 */
margin: 20px;                   /* 上下左右全为 20px */
margin: 10px 20px;              /* 上下 10px，左右 20px */
margin: 10px 20px 15px;         /* 上 10px，左右 20px，下 15px */
margin: 10px 20px 15px 5px;     /* 上 10px，右 20px，下 15px，左 5px */

/* 块级元素水平居中 */
margin-left: auto;
margin-right: auto;             /* 简写：margin: 0 auto; */

.flex-container {
  display: flex;
  flex-direction: row;          /* 主轴方向：row(横向) | column(纵向) */
  justify-content: space-between; /* 主轴对齐：flex-start | center | flex-end | space-between | space-around */
  align-items: center;          /* 交叉轴对齐：stretch | center | flex-start | flex-end */
  flex-wrap: wrap;              /* 是否自动换行：nowrap | wrap */
  gap: 16px;                    /* 子项间距（行列统一） */
}

/* 终极居中方案（子元素完美水平垂直居中） */
.perfect-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 弹性子项比例 */
.flex-item {
  flex: 1;                      /* 占满剩余空间（等同于 flex: 1 1 0%） */
}

.grid-container {
  display: grid;
  /* 响应式自适应多列：自动根据最小 280px 宽度铺满，无需媒体查询 */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

/* 1. 相对定位：不脱离文档流，以自身原位置为基准偏移 */
.relative-box {
  position: relative;
  top: 5px;
  left: 10px;
}

/* 2. 绝对定位：脱离文档流，相对于最近的非 static 祖先元素定位 */
.absolute-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 配合 transform 实现未知宽高的绝对居中 */
  z-index: 10;                     /* 层叠层级：数值越大显示在越上层 */
}

/* 3. 固定定位：脱离文档流，始终相对于浏览器视口定位（常用顶部导航/回到顶部按钮） */
.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
}

/* 4. 粘性定位：滚动到特定阈值前为 relative，到达阈值后表现为 fixed（吸顶栏常用） */
.sticky-nav {
  position: sticky;
  top: 0;
  z-index: 100;
}