CSS完全指南：从入门到精通

认真的小羽❅2026-03-13 11:36

一、CSS基础概念

1.1 什么是CSS？

CSS（Cascading Style Sheets，层叠样式表）是用于描述HTML文档样式的语言。它控制网页的外观和布局，让网页变得美观、专业。

1.2 CSS的作用

  • 页面美化：设置颜色、字体、背景等
  • 布局控制：定位、对齐、响应式布局
  • 交互效果：动画、过渡、悬停效果
  • 媒体适配：适配不同设备和屏幕

1.3 CSS的版本发展

  • CSS1：1996年发布，基础样式
  • CSS2：1998年发布，增加定位和媒体类型
  • CSS2.1：2011年发布，修复问题
  • CSS3：2012年开始，模块化开发，新增动画、Flexbox、Grid等

二、CSS引入方式

2.1 行内样式

直接在HTML标签的style属性中写入CSS：

html 复制代码 
<div style="color: red; font-size: 16px;">行内样式</div>

优点 ：优先级最高，立即生效
缺点：样式和内容耦合，不利于维护

2.2 内部样式

在HTML文档的head标签中使用style标签：

html 复制代码 
<head>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>

优点 ：样式集中管理
缺点：只适用于当前页面

2.3 外部样式

创建独立的CSS文件，通过link标签引入：

html 复制代码 
<head>
    <link rel="stylesheet" href="styles.css">
</head>

styles.css：

css 复制代码 
.box {
    width: 200px;
    height: 200px;
    background-color: green;
}

优点 ：样式可复用，便于维护，减少HTML文件大小
缺点：需要额外的HTTP请求

2.4 导入样式

使用@import规则导入CSS文件：

css 复制代码 
@import url("styles.css");

注意：不建议使用，会阻塞页面渲染

三、CSS选择器

3.1 基本选择器

元素选择器
css 复制代码 
div {
    color: red;
}
p {
    font-size: 16px;
}
类选择器
css 复制代码 
.container {
    width: 100%;
}
.box {
    background: #f0f0f0;
}
ID选择器
css 复制代码 
#header {
    height: 60px;
}
#footer {
    background: #333;
}
通配符选择器
css 复制代码 
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

3.2 组合选择器

后代选择器
css 复制代码 
.container p {
    color: red;
}
/* 选择.container内所有的p元素 */
子选择器
css 复制代码 
.container > p {
    color: blue;
}
/* 只选择.container的直接子元素p */
相邻兄弟选择器
css 复制代码 
h2 + p {
    font-weight: bold;
}
/* 选择紧跟在h2后面的p元素 */
通用兄弟选择器
css 复制代码 
h2 ~ p {
    margin-top: 10px;
}
/* 选择h2后面所有的p兄弟元素 */

3.3 属性选择器

css 复制代码 
/* 存在某个属性 */
[title] {
    border: 1px solid red;
}

/* 属性值等于特定值 */
[type="text"] {
    width: 200px;
}

/* 属性值包含特定字符串 */
[class*="box"] {
    background: yellow;
}

/* 属性值以特定字符串开头 */
[href^="https"] {
    color: green;
}

/* 属性值以特定字符串结尾 */
[href$=".pdf"] {
    color: red;
}

/* 属性值包含特定单词（用空格分隔） */
[class~="active"] {
    background: blue;
}

/* 属性值以特定字符串开头或紧跟连字符 */
[lang|="en"] {
    font-style: italic;
}

3.4 伪类选择器

css 复制代码 
/* :hover - 鼠标悬停 */
a:hover {
    color: red;
}

/* :active - 激活状态 */
button:active {
    transform: scale(0.95);
}

/* :focus - 获得焦点 */
input:focus {
    border-color: blue;
}

/* :visited - 已访问链接 */
a:visited {
    color: purple;
}

/* :link - 未访问链接 */
a:link {
    color: blue;
}

/* :first-child - 第一个子元素 */
li:first-child {
    color: red;
}

/* :last-child - 最后一个子元素 */
li:last-child {
    color: blue;
}

/* :nth-child(n) - 第n个子元素 */
li:nth-child(3) {
    background: yellow;
}

/* :nth-child(odd) - 奇数子元素 */
li:nth-child(odd) {
    background: #f0f0f0;
}

/* :nth-child(even) - 偶数子元素 */
li:nth-child(even) {
    background: #e0e0e0;
}

/* :nth-child(2n+1) - 公式 */
li:nth-child(2n+1) {
    color: red;
}

/* :first-of-type - 同类型第一个 */
p:first-of-type {
    font-weight: bold;
}

/* :last-of-type - 同类型最后一个 */
p:last-of-type {
    font-style: italic;
}

/* :checked - 被选中的复选框或单选框 */
input:checked {
    transform: scale(1.2);
}

/* :disabled - 禁用的表单元素 */
input:disabled {
    opacity: 0.5;
}

/* :enabled - 启用的表单元素 */
input:enabled {
    border: 1px solid #ccc;
}

/* :not(selector) - 否定伪类 */
p:not(.special) {
    color: #666;
}

/* :empty - 空元素 */
div:empty {
    height: 20px;
    background: red;
}

/* :target - 锚点目标 */
#section:target {
    border: 2px solid red;
}

3.5 伪元素选择器

css 复制代码 
/* ::before - 元素前插入内容 */
.box::before {
    content: "前缀：";
    color: red;
}

/* ::after - 元素后插入内容 */
.box::after {
    content: "后缀";
    color: blue;
}

/* ::first-letter - 首字母 */
p::first-letter {
    font-size: 2em;
    color: red;
}

/* ::first-line - 首行 */
p::first-line {
    font-weight: bold;
}

/* ::selection - 被选中的文本 */
::selection {
    background: yellow;
    color: black;
}

/* ::placeholder - 占位符 */
input::placeholder {
    color: #999;
}

3.6 选择器优先级

优先级计算规则：

  • 内联样式：1000
  • ID选择器：100
  • 类选择器、伪类、属性选择器：10
  • 元素选择器、伪元素：1
  • 通配符选择器：0
css 复制代码 
/* 优先级：1 */
div {
    color: red;
}

/* 优先级：10 */
.box {
    color: blue;
}

/* 优先级：11 */
div.box {
    color: green;
}

/* 优先级：100 */
#header {
    color: purple;
}

/* 优先级：110 */
#header.active {
    color: orange;
}

/* 优先级：1000 */
<div style="color: pink;">行内样式</div>

/* !important 优先级最高，慎用 */
.box {
    color: red !important;
}

四、CSS属性详解

4.1 文本属性

css 复制代码 
/* 字体大小 */
font-size: 16px;
font-size: 1.2em;        /* 相对于父元素 */
font-size: 1.2rem;       /* 相对于根元素 */
font-size: 120%;         /* 百分比 */

/* 字体粗细 */
font-weight: normal;
font-weight: bold;
font-weight: 400;        /* 数值：100-900 */

/* 字体样式 */
font-style: normal;
font-style: italic;
font-style: oblique;

/* 字体家族 */
font-family: Arial, "Microsoft YaHei", sans-serif;

/* 字体复合属性 */
font: italic bold 16px/1.5 Arial, sans-serif;

/* 文本颜色 */
color: red;
color: #ff0000;
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.5);
color: hsl(0, 100%, 50%);
color: hsla(0, 100%, 50%, 0.5);

/* 文本对齐 */
text-align: left;
text-align: center;
text-align: right;
text-align: justify;     /* 两端对齐 */

/* 文本装饰 */
text-decoration: none;
text-decoration: underline;
text-decoration: line-through;
text-decoration: overline;

/* 文本转换 */
text-transform: uppercase;    /* 大写 */
text-transform: lowercase;    /* 小写 */
text-transform: capitalize;   /* 首字母大写 */

/* 文本缩进 */
text-indent: 2em;
text-indent: 2rem;

/* 行高 */
line-height: 1.5;
line-height: 1.5em;
line-height: 150%;

/* 字间距 */
letter-spacing: 2px;
letter-spacing: -1px;

/* 词间距 */
word-spacing: 5px;

/* 文本阴影 */
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
text-shadow: 2px 2px 0 red, -2px -2px 0 blue;

/* 文本溢出处理 */
text-overflow: ellipsis;      /* 省略号 */
text-overflow: clip;          /* 裁剪 */

/* 空白处理 */
white-space: normal;          /* 默认 */
white-space: nowrap;          /* 不换行 */
white-space: pre;             /* 保留空格和换行 */
white-space: pre-wrap;        /* 保留空格，自动换行 */

/* 换行规则 */
word-break: normal;           /* 默认 */
word-break: break-all;        /* 强制换行 */
word-break: keep-all;         /* 只在字符间断行 */
word-wrap: normal;
word-wrap: break-word;        /* 允许在单词内换行 */
overflow-wrap: break-word;

4.2 背景属性

css 复制代码 
/* 背景颜色 */
background-color: red;
background-color: #ff0000;
background-color: rgba(255, 0, 0, 0.5);
background-color: transparent;

/* 背景图片 */
background-image: url('image.jpg');
background-image: linear-gradient(to right, red, blue);
background-image: radial-gradient(circle, red, blue);
background-image: repeating-linear-gradient(45deg, red, red 10px, blue 10px, blue 20px);

/* 背景重复 */
background-repeat: repeat;        /* 默认 */
background-repeat: no-repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;

/* 背景位置 */
background-position: center;
background-position: top left;
background-position: 50% 50%;
background-position: 100px 200px;

/* 背景尺寸 */
background-size: cover;           /* 覆盖整个容器 */
background-size: contain;         /* 包含在容器内 */
background-size: 100% 100%;
background-size: 50% 50%;

/* 背景附着 */
background-attachment: scroll;    /* 滚动 */
background-attachment: fixed;     /* 固定 */
background-attachment: local;

/* 背景裁剪 */
background-clip: border-box;      /* 默认 */
background-clip: padding-box;
background-clip: content-box;

/* 背景原点 */
background-origin: border-box;
background-origin: padding-box;
background-origin: content-box;

/* 背景复合属性 */
background: url('image.jpg') no-repeat center/cover;
background: linear-gradient(to right, red, blue) no-repeat center;

/* 多重背景 */
background: 
    url('image1.jpg') no-repeat top left,
    url('image2.jpg') no-repeat bottom right,
    linear-gradient(to bottom, rgba(255,255,255,0), rgba(0,0,0,0.5));

4.3 边框属性

css 复制代码 
/* 边框宽度 */
border-width: 1px;
border-width: thin;
border-width: medium;
border-width: thick;

/* 边框样式 */
border-style: solid;
border-style: dashed;
border-style: dotted;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;
border-style: none;

/* 边框颜色 */
border-color: red;
border-color: #ff0000;
border-color: rgba(255, 0, 0, 0.5);

/* 边框复合属性 */
border: 1px solid red;
border: 2px dashed #ccc;

/* 圆角 */
border-radius: 5px;
border-radius: 50%;              /* 圆形 */
border-radius: 10px 20px 30px 40px;  /* 四个角不同 */
border-radius: 10px / 20px;      /* 椭圆 */

/* 单边边框 */
border-top: 2px solid red;
border-right: 2px solid blue;
border-bottom: 2px solid green;
border-left: 2px solid yellow;

/* 边框图片 */
border-image: url('border.png') 30 round;
border-image-slice: 30;
border-image-width: 10px;
border-image-outset: 0;
border-image-repeat: stretch;

/* 轮廓（不影响布局） */
outline: 2px solid red;
outline-offset: 5px;

4.4 盒模型属性

css 复制代码 
/* 盒模型模式 */
box-sizing: content-box;         /* 标准盒模型 */
box-sizing: border-box;          /* IE盒模型（推荐） */

/* 宽度和高度 */
width: 100px;
width: 50%;
width: auto;
min-width: 100px;
max-width: 500px;

height: 100px;
height: 50%;
height: auto;
min-height: 100px;
max-height: 500px;

/* 内边距 */
padding: 10px;                   /* 四个方向相同 */
padding: 10px 20px;              /* 上下10px，左右20px */
padding: 10px 20px 30px;         /* 上10px，左右20px，下30px */
padding: 10px 20px 30px 40px;    /* 上右下左 */

padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;

/* 外边距 */
margin: 10px;
margin: 10px 20px;
margin: 10px 20px 30px;
margin: 10px 20px 30px 40px;

margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;

/* 居中对齐 */
margin: 0 auto;

/* 外边距合并 */
margin-top: 20px;
margin-bottom: 20px;  /* 实际间距为20px，不是40px */

4.5 定位属性

css 复制代码 
/* 定位类型 */
position: static;                /* 默认 */
position: relative;              /* 相对定位 */
position: absolute;              /* 绝对定位 */
position: fixed;                 /* 固定定位 */
position: sticky;                /* 粘性定位 */

/* 定位坐标 */
top: 10px;
right: 10px;
bottom: 10px;
left: 10px;

/* z-index（堆叠顺序） */
z-index: 1;
z-index: 999;
z-index: auto;

/* 浮动 */
float: left;
float: right;
float: none;

/* 清除浮动 */
clear: left;
clear: right;
clear: both;
clear: none;

/* 显示模式 */
display: block;
display: inline;
display: inline-block;
display: none;
display: flex;
display: grid;
display: table;
display: list-item;

4.6 列表属性

css 复制代码 
/* 列表样式类型 */
list-style-type: disc;           /* 实心圆 */
list-style-type: circle;         /* 空心圆 */
list-style-type: square;         /* 实心方块 */
list-style-type: decimal;        /* 数字 */
list-style-type: lower-roman;    /* 小写罗马数字 */
list-style-type: upper-roman;    /* 大写罗马数字 */
list-style-type: lower-alpha;    /* 小写字母 */
list-style-type: upper-alpha;    /* 大写字母 */
list-style-type: none;           /* 无标记 */

/* 列表样式图片 */
list-style-image: url('bullet.png');
list-style-image: none;

/* 列表样式位置 */
list-style-position: outside;    /* 外部 */
list-style-position: inside;     /* 内部 */

/* 列表复合属性 */
list-style: disc inside url('bullet.png');

4.7 表格属性

css 复制代码 
/* 边框合并 */
border-collapse: collapse;       /* 合并边框 */
border-collapse: separate;       /* 分离边框 */

/* 边框间距 */
border-spacing: 5px;
border-spacing: 10px 20px;

/* 空单元格显示 */
empty-cells: show;
empty-cells: hide;

/* 表格布局算法 */
table-layout: auto;              /* 自动 */
table-layout: fixed;             /* 固定 */

/* 标题位置 */
caption-side: top;
caption-side: bottom;

4.8 其他常用属性

css 复制代码 
/* 光标样式 */
cursor: default;
cursor: pointer;
cursor: move;
cursor: text;
cursor: wait;
cursor: help;
cursor: not-allowed;
cursor: crosshair;
cursor: url('cursor.png'), auto;

/* 透明度 */
opacity: 1;                      /* 不透明 */
opacity: 0.5;                    /* 半透明 */
opacity: 0;                      /* 完全透明 */

/* 可见性 */
visibility: visible;
visibility: hidden;

/* 溢出处理 */
overflow: visible;               /* 默认 */
overflow: hidden;                /* 隐藏溢出内容 */
overflow: scroll;                /* 显示滚动条 */
overflow: auto;                  /* 自动显示滚动条 */

overflow-x: scroll;
overflow-y: hidden;

/* 过渡效果 */
transition: all 0.3s ease;
transition: width 0.3s ease-in-out;
transition: background-color 0.3s linear 0.1s;

/* 变换 */
transform: rotate(45deg);
transform: scale(1.5);
transform: translate(100px, 50px);
transform: skew(20deg, 10deg);

/* 变换原点 */
transform-origin: center;
transform-origin: top left;
transform-origin: 50% 50%;

/* 滤镜 */
filter: blur(5px);
filter: brightness(150%);
filter: contrast(200%);
filter: grayscale(100%);
filter: sepia(100%);
filter: hue-rotate(90deg);
filter: invert(100%);
filter: opacity(50%);
filter: saturate(200%);
filter: drop-shadow(2px 2px 5px rgba(0,0,0,0.5));

五、CSS布局

5.1 Flexbox布局

Flexbox（弹性盒子）是CSS3中强大的布局系统。

css 复制代码 
/* 容器属性 */
.container {
    display: flex;
    
    /* 主轴方向 */
    flex-direction: row;          /* 水平，从左到右 */
    flex-direction: row-reverse;  /* 水平，从右到左 */
    flex-direction: column;       /* 垂直，从上到下 */
    flex-direction: column-reverse; /* 垂直，从下到上 */
    
    /* 换行 */
    flex-wrap: nowrap;            /* 不换行 */
    flex-wrap: wrap;              /* 换行 */
    flex-wrap: wrap-reverse;      /* 反向换行 */
    
    /* 主轴对齐 */
    justify-content: flex-start;  /* 起始对齐 */
    justify-content: flex-end;    /* 结束对齐 */
    justify-content: center;      /* 居中对齐 */
    justify-content: space-between; /* 两端对齐 */
    justify-content: space-around;  /* 环绕对齐 */
    justify-content: space-evenly;  /* 平均分布 */
    
    /* 交叉轴对齐 */
    align-items: stretch;         /* 拉伸 */
    align-items: flex-start;      /* 起始对齐 */
    align-items: flex-end;        /* 结束对齐 */
    align-items: center;          /* 居中对齐 */
    align-items: baseline;        /* 基线对齐 */
    
    /* 多行对齐 */
    align-content: stretch;
    align-content: flex-start;
    align-content: flex-end;
    align-content: center;
    align-content: space-between;
    align-content: space-around;
    align-content: space-evenly;
    
    /* 复合属性 */
    flex-flow: row wrap;
}

/* 项目属性 */
.item {
    /* 放大比例 */
    flex-grow: 0;                 /* 不放大 */
    flex-grow: 1;                 /* 放大 */
    
    /* 缩小比例 */
    flex-shrink: 1;               /* 缩小 */
    flex-shrink: 0;               /* 不缩小 */
    
    /* 初始大小 */
    flex-basis: auto;             /* 自动 */
    flex-basis: 200px;            /* 固定大小 */
    
    /* 复合属性 */
    flex: 0 1 auto;
    flex: 1 0 200px;
    flex: 1;                      /* flex: 1 1 0% */
    
    /* 单独对齐 */
    align-self: auto;
    align-self: flex-start;
    align-self: flex-end;
    align-self: center;
    align-self: baseline;
    align-self: stretch;
    
    /* 排序 */
    order: 0;
    order: 1;
    order: -1;
}

Flexbox实战示例：

css 复制代码 
/* 水平居中 */
.center-horizontal {
    display: flex;
    justify-content: center;
}

/* 垂直居中 */
.center-vertical {
    display: flex;
    align-items: center;
}

/* 完全居中 */
.center-both {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 两端对齐 */
.space-between {
    display: flex;
    justify-content: space-between;
}

/* 等分布局 */
.equal-width {
    display: flex;
}
.equal-width > div {
    flex: 1;
}

/* Holy Grail布局 */
.holy-grail {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.holy-grail header,
.holy-grail footer {
    flex: 0 0 auto;
}
.holy-grail .content {
    flex: 1;
    display: flex;
}
.holy-grail .sidebar-left,
.holy-grail .sidebar-right {
    flex: 0 0 200px;
}
.holy-grail .main {
    flex: 1;
}

5.2 Grid布局

Grid（网格）是CSS3中更强大的二维布局系统。

css 复制代码 
/* 容器属性 */
.container {
    display: grid;
    
    /* 列定义 */
    grid-template-columns: 100px 200px 100px;
    grid-template-columns: repeat(3, 100px);
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-columns: repeat(3, 1fr);
    grid-template-columns: 100px 1fr 100px;
    grid-template-columns: auto 1fr auto;
    grid-template-columns: minmax(100px, 1fr) 2fr;
    grid-template-columns: fit-content(200px) 1fr;
    
    /* 行定义 */
    grid-template-rows: 100px 200px;
    grid-template-rows: repeat(2, 100px);
    grid-template-rows: 1fr 2fr;
    grid-template-rows: auto 1fr;
    grid-template-rows: minmax(100px, auto);
    
    /* 命名网格线 */
    grid-template-columns: [start] 1fr [middle] 1fr [end];
    grid-template-rows: [top] 100px [bottom] 1fr;
    
    /* 网格区域命名 */
    grid-template-areas: 
        "header header header"
        "sidebar main main"
        "footer footer footer";
    
    /* 间距 */
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    grid-gap: 20px;
    gap: 20px;
    gap: 20px 30px;
    
    /* 对齐 */
    justify-items: start;
    justify-items: end;
    justify-items: center;
    justify-items: stretch;
    
    align-items: start;
    align-items: end;
    align-items: center;
    align-items: stretch;
    
    justify-content: start;
    justify-content: end;
    justify-content: center;
    justify-content: stretch;
    justify-content: space-between;
    justify-content: space-around;
    justify-content: space-evenly;
    
    align-content: start;
    align-content: end;
    align-content: center;
    align-content: stretch;
    align-content: space-between;
    align-content: space-around;
    align-content: space-evenly;
    
    /* 复合属性 */
    grid-template: 
        "header header header" 60px
        "sidebar main main" 1fr
        "footer footer footer" 60px
        / 200px 1fr 200px;
}

/* 项目属性 */
.item {
    /* 列位置 */
    grid-column: 1;
    grid-column: 1 / 3;
    grid-column: 1 / span 2;
    grid-column: span 2;
    grid-column: start / end;
    
    /* 行位置 */
    grid-row: 1;
    grid-row: 1 / 3;
    grid-row: 1 / span 2;
    grid-row: span 2;
    grid-row: top / bottom;
    
    /* 区域 */
    grid-area: header;
    grid-area: 1 / 1 / 2 / 3;
    
    /* 对齐 */
    justify-self: start;
    justify-self: end;
    justify-self: center;
    justify-self: stretch;
    
    align-self: start;
    align-self: end;
    align-self: center;
    align-self: stretch;
}

Grid布局实战示例：

css 复制代码 
/* 基础网格 */
.basic-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* 响应式网格 */
.responsive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

/* 经典布局 */
.classic-layout {
    display: grid;
    grid-template-areas: 
        "header header header"
        "sidebar main aside"
        "footer footer footer";
    grid-template-columns: 200px 1fr 200px;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
}

/* 圣杯布局 */
.grid-holy-grail {
    display: grid;
    grid-template-columns: 200px 1fr 200px;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
}
.grid-holy-grail header {
    grid-column: 1 / -1;
}
.grid-holy-grail footer {
    grid-column: 1 / -1;
}

/* 卡片网格 */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

5.3 传统布局方式

css 复制代码 
/* 文档流布局 */
.flow-layout {
    /* 默认布局，元素按顺序排列 */
}

/* 浮动布局 */
.float-layout {
    overflow: hidden; /* 清除浮动 */
}
.float-layout .left {
    float: left;
    width: 200px;
}
.float-layout .right {
    float: right;
    width: 200px;
}
.float-layout .main {
    margin: 0 210px;
}

/* 清除浮动 */
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

/* 定位布局 */
.position-layout {
    position: relative;
    height: 300px;
}
.position-layout .absolute {
    position: absolute;
    top: 0;
    left: 0;
}
.position-layout .fixed {
    position: fixed;
    top: 0;
    right: 0;
}

/* 居中布局 */
.center-by-margin {
    width: 200px;
    margin: 0 auto;
}

.center-by-position {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.center-by-flex {
    display: flex;
    justify-content: center;
    align-items: center;
}

.center-by-grid {
    display: grid;
    place-items: center;
}

六、CSS动画

6.1 过渡效果

css 复制代码 
/* 基本过渡 */
.box {
    width: 100px;
    height: 100px;
    background: red;
    transition: width 0.3s ease;
}
.box:hover {
    width: 200px;
}

/* 复合过渡 */
.box {
    transition: 
        width 0.3s ease,
        height 0.3s ease,
        background 0.3s ease;
}

/* 简写形式 */
.box {
    transition: all 0.3s ease;
}

/* 延迟过渡 */
.box {
    transition: width 0.3s ease 0.1s;
}

/* 过渡函数 */
.transition-ease {
    transition: all 0.3s ease;
}
.transition-linear {
    transition: all 0.3s linear;
}
.transition-ease-in {
    transition: all 0.3s ease-in;
}
.transition-ease-out {
    transition: all 0.3s ease-out;
}
.transition-ease-in-out {
    transition: all 0.3s ease-in-out;
}
.transition-cubic-bezier {
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* 可过渡的属性 */
/* 颜色 */
color: red;
background-color: blue;
border-color: green;

/* 长度 */
width: 100px;
height: 100px;
margin: 10px;
padding: 10px;
border-width: 2px;

/* 位置 */
top: 0;
left: 0;
right: 0;
bottom: 0;

/* 变换 */
transform: translateX(100px);
transform: rotate(45deg);
transform: scale(1.5);

/* 透明度 */
opacity: 0.5;

/* 阴影 */
box-shadow: 0 0 10px rgba(0,0,0,0.5);
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);

/* 不可过渡的属性 */
display: block;           /* 不可过渡 */
visibility: hidden;       /* 不可过渡 */
z-index: 10;              /* 不可过渡 */

6.2 动画效果

css 复制代码 
/* 定义关键帧 */
@keyframes slideIn {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-30px);
    }
    60% {
        transform: translateY(-15px);
    }
}

/* 应用动画 */
.box {
    animation: slideIn 0.5s ease;
}

.box {
    animation: rotate 2s linear infinite;
}

.box {
    animation: pulse 1s ease-in-out infinite;
}

.box {
    animation: bounce 1s ease infinite;
}

/* 动画复合属性 */
.box {
    animation: 
        slideIn 0.5s ease forwards,
        rotate 2s linear infinite 0.5s;
}

/* 动画属性详解 */
.box {
    /* 动画名称 */
    animation-name: slideIn;
    
    /* 动画时长 */
    animation-duration: 0.5s;
    
    /* 动画函数 */
    animation-timing-function: ease;
    
    /* 动画延迟 */
    animation-delay: 0.1s;
    
    /* 动画次数 */
    animation-iteration-count: 1;
    animation-iteration-count: infinite;
    
    /* 动画方向 */
    animation-direction: normal;
    animation-direction: reverse;
    animation-direction: alternate;
    animation-direction: alternate-reverse;
    
    /* 动画填充模式 */
    animation-fill-mode: none;
    animation-fill-mode: forwards;
    animation-fill-mode: backwards;
    animation-fill-mode: both;
    
    /* 动画播放状态 */
    animation-play-state: running;
    animation-play-state: paused;
    
    /* 复合属性 */
    animation: slideIn 0.5s ease 0.1s 1 normal forwards;
}

6.3 常用动画效果

css 复制代码 
/* 淡入效果 */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.fade-in {
    animation: fadeIn 0.5s ease;
}

/* 滑入效果 */
@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
.slide-in-right {
    animation: slideInRight 0.5s ease;
}

/* 缩放效果 */
@keyframes zoomIn {
    from { transform: scale(0); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
.zoom-in {
    animation: zoomIn 0.5s ease;
}

/* 旋转效果 */
@keyframes rotateIn {
    from { transform: rotate(-180deg); opacity: 0; }
    to { transform: rotate(0); opacity: 1; }
}
.rotate-in {
    animation: rotateIn 0.5s ease;
}

/* 弹跳效果 */
@keyframes bounceIn {
    0% { transform: scale(0.3); opacity: 0; }
    50% { transform: scale(1.05); opacity: 1; }
    70% { transform: scale(0.9); }
    100% { transform: scale(1); }
}
.bounce-in {
    animation: bounceIn 0.5s ease;
}

/* 闪烁效果 */
@keyframes flash {
    0%, 50%, 100% { opacity: 1; }
    25%, 75% { opacity: 0.5; }
}
.flash {
    animation: flash 1s infinite;
}

/* 摇摆效果 */
@keyframes swing {
    20% { transform: rotate(15deg); }
    40% { transform: rotate(-10deg); }
    60% { transform: rotate(5deg); }
    80% { transform: rotate(-5deg); }
    100% { transform: rotate(0); }
}
.swing {
    animation: swing 1s ease;
}

/* 加载动画 */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.loading {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* 波浪效果 */
@keyframes wave {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(20px); }
}
.wave {
    animation: wave 1s ease-in-out infinite;
}

七、CSS响应式设计

7.1 媒体查询

css 复制代码 
/* 基本语法 */
@media screen and (min-width: 768px) {
    /* 当屏幕宽度大于等于768px时应用 */
    .container {
        width: 750px;
    }
}

/* 断点设置 */
/* 手机 */
@media (max-width: 575px) {
    .container {
        width: 100%;
        padding: 0 15px;
    }
}

/* 平板 */
@media (min-width: 576px) and (max-width: 991px) {
    .container {
        width: 540px;
    }
}

/* 桌面 */
@media (min-width: 992px) and (max-width: 1199px) {
    .container {
        width: 960px;
    }
}

/* 大屏 */
@media (min-width: 1200px) {
    .container {
        width: 1140px;
    }
}

/* 常用媒体查询 */
/* 横屏 */
@media (orientation: landscape) {
    body {
        font-size: 16px;
    }
}

/* 竖屏 */
@media (orientation: portrait) {
    body {
        font-size: 14px;
    }
}

/* 高分辨率屏幕 */
@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {
    .logo {
        background-image: url('logo@2x.png');
    }
}

/* 打印样式 */
@media print {
    body {
        font-size: 12pt;
    }
    .no-print {
        display: none;
    }
}

/* 暗色模式 */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #1a1a1a;
        color: #fff;
    }
}

/* 减少动画 */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

7.2 响应式单位

css 复制代码 
/* 相对单位 */
.em {
    font-size: 1.2em;    /* 相对于父元素字体大小 */
}

.rem {
    font-size: 1.2rem;   /* 相对于根元素字体大小 */
}

.vw {
    width: 100vw;        /* 视口宽度的100% */
}

.vh {
    height: 100vh;       /* 视口高度的100% */
}

.vmin {
    font-size: 2vmin;    /* 视口宽度和高度中较小值的2% */
}

.vmax {
    font-size: 2vmax;    /* 视口宽度和高度中较大值的2% */
}

.percent {
    width: 50%;          /* 父元素的50% */
}

/* 响应式字体大小 */
body {
    font-size: 16px;
}

@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
}

/* 使用clamp()函数 */
.responsive-text {
    font-size: clamp(16px, 2vw, 24px);
}

/* 使用calc()函数 */
.box {
    width: calc(100% - 20px);
    height: calc(100vh - 100px);
}

7.3 移动端优化

css 复制代码 
/* 视口设置 */
<meta name="viewport" content="width=device-width, initial-scale=1.0">

/* 触摸优化 */
button, a {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* 适配iPhone X底部安全区域 */
.safe-area {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}

/* 适配刘海屏 */
.notch-safe {
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);
}

/* 移动端字体 */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* 防止文字缩放 */
input, select, textarea {
    font-size: 16px;
}

/* 适配1px边框 */
.border-1px {
    position: relative;
}
.border-1px::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 200%;
    height: 200%;
    border: 1px solid #ccc;
    transform: scale(0.5);
    transform-origin: 0 0;
}

八、CSS最佳实践

8.1 代码规范

命名规范：

css 复制代码 
/* BEM命名法 */
.block {}
.block__element {}
.block--modifier {}

/* 示例 */
.card {}
.card__title {}
.card__content {}
.card--featured {}
.card--compact {}

/* OOCSS命名法 */
.button {}
.button--primary {}
.button--secondary {}
.icon {}
.icon--small {}
.icon--large {}

代码格式：

css 复制代码 
/* ✅ 好的示例 */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* ❌ 不好的示例 */
.container{width:100%;max-width:1200px;margin:0 auto;padding:20px;}

注释规范：

css 复制代码 
/* ========================================
   主容器样式
   ======================================== */
.container {
    /* 容器宽度 */
    width: 100%;
    
    /* 最大宽度限制 */
    max-width: 1200px;
}

/* 
 * 卡片组件
 * 用于显示内容卡片
 */
.card {
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

8.2 性能优化

css 复制代码 
/* 避免过度嵌套 */
/* ✅ 好 */
.button-primary {}
/* ❌ 差 */
.container .sidebar .menu .item .button-primary {}

/* 使用简写属性 */
/* ✅ 好 */
.box {
    margin: 10px 20px;
    padding: 10px 20px;
    border: 1px solid #ccc;
}

/* 避免通用选择器 */
/* ❌ 差 */
* { margin: 0; padding: 0; }
/* ✅ 好 */
html, body { margin: 0; padding: 0; }

/* 优化选择器性能 */
/* ✅ 快 */
.box {}
.box .item {}

/* ❌ 慢 */
body div div div div .item {}

/* 使用transform代替left/top */
.animate {
    /* ✅ 好 */
    transform: translateX(100px);
    
    /* ❌ 差 */
    left: 100px;
}

/* 使用opacity代替visibility.opacity */
.fade {
    /* ✅ 好 */
    opacity: 0.5;
    
    /* ❌ 差 */
    visibility: hidden;
}

/* 避免@import */
/* ❌ 差 */
@import url('styles.css');

/* ✅ 好 */
<link rel="stylesheet" href="styles.css">

/* 压缩CSS */
/* 移除空格、注释、换行符 */

8.3 浏览器兼容性

css 复制代码 
/* 前缀 */
.box {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5);
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.5);
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

/* CSS Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

ul, ol {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    max-width: 100%;
    height: auto;
}

/* Normalize.css替代方案 */
/* 推荐使用Normalize.css进行样式重置 */

/* 特性检测 */
.box {
    background: red;
    background: rgba(255, 0, 0, 0.5);
}

/* 渐进增强 */
.box {
    background: red;
    background: linear-gradient(to right, red, blue);
}

/* 优雅降级 */
.box {
    background: linear-gradient(to right, red, blue);
    background: red;
}

8.4 可维护性

css 复制代码 
/* 模块化CSS */
/* base.css - 基础样式 */
html, body {
    margin: 0;
    padding: 0;
}

/* layout.css - 布局样式 */
.container {
    max-width: 1200px;
    margin: 0 auto;
}

/* components.css - 组件样式 */
.button {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
}

/* utilities.css - 工具类 */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* 使用CSS变量 */
:root {
    --primary-color: #3498db;
    --secondary-color: #2ecc71;
    --text-color: #333;
    --bg-color: #fff;
    --spacing-unit: 8px;
}

.button {
    background: var(--primary-color);
    color: var(--bg-color);
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);
}

/* 主题切换 */
[data-theme="dark"] {
    --primary-color: #3498db;
    --secondary-color: #2ecc71;
    --text-color: #fff;
    --bg-color: #1a1a1a;
}

/* 使用函数（CSS自定义属性计算） */
:root {
    --spacing-sm: calc(var(--spacing-unit) * 1);
    --spacing-md: calc(var(--spacing-unit) * 2);
    --spacing-lg: calc(var(--spacing-unit) * 3);
}

九、CSS工具和资源

9.1 开发工具

  • 编辑器：VS Code、Sublime Text、WebStorm
  • 浏览器工具：Chrome DevTools、Firefox Developer Tools
  • 预处理器：Sass、Less、Stylus
  • 后处理器：PostCSS、Autoprefixer
  • 框架：Bootstrap、Tailwind CSS、Bulma

9.2 在线工具

9.3 学习资源

十、CSS实战示例

10.1 完整的CSS示例

css 复制代码 
/* ========================================
   CSS变量定义
   ======================================== */
:root {
    /* 颜色变量 */
    --primary-color: #3498db;
    --secondary-color: #2ecc71;
    --danger-color: #e74c3c;
    --warning-color: #f39c12;
    --info-color: #9b59b6;
    
    --text-primary: #333;
    --text-secondary: #666;
    --text-light: #999;
    
    --bg-primary: #fff;
    --bg-secondary: #f5f5f5;
    --bg-dark: #1a1a1a;
    
    --border-color: #e0e0e0;
    
    /* 间距变量 */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    
    /* 字体变量 */
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
      'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-md: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 24px;
    
    /* 阴影变量 */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    --shadow-md: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    --shadow-lg: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    
    /* 过渡变量 */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    /* 圆角变量 */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;
}

/* ========================================
   CSS Reset
   ======================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-md);
    line-height: 1.6;
    color: var(--text-primary);
    background-color: var(--bg-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ========================================
   通用样式
   ======================================== */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

.section {
    padding: var(--spacing-xl) 0;
}

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-primary { color: var(--primary-color); }
.text-secondary { color: var(--secondary-color); }
.text-danger { color: var(--danger-color); }
.text-warning { color: var(--warning-color); }
.text-info { color: var(--info-color); }

.bg-primary { background-color: var(--primary-color); }
.bg-secondary { background-color: var(--secondary-color); }
.bg-danger { background-color: var(--danger-color); }
.bg-warning { background-color: var(--warning-color); }
.bg-info { background-color: var(--info-color); }

/* ========================================
   按钮组件
   ======================================== */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: var(--font-size-md);
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border: none;
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
    outline: none;
}

.button:focus {
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.25);
}

.button:active {
    transform: scale(0.98);
}

.button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.button--primary {
    background-color: var(--primary-color);
    color: white;
}

.button--primary:hover {
    background-color: #2980b9;
}

.button--secondary {
    background-color: var(--secondary-color);
    color: white;
}

.button--secondary:hover {
    background-color: #27ae60;
}

.button--danger {
    background-color: var(--danger-color);
    color: white;
}

.button--danger:hover {
    background-color: #c0392b;
}

.button--outline {
    background-color: transparent;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
}

.button--outline:hover {
    background-color: var(--primary-color);
    color: white;
}

.button--ghost {
    background-color: transparent;
    color: var(--primary-color);
}

.button--ghost:hover {
    background-color: rgba(52, 152, 219, 0.1);
}

.button--sm {
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: var(--font-size-sm);
}

.button--lg {
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: var(--font-size-lg);
}

.button--block {
    display: flex;
    width: 100%;
}

/* ========================================
   卡片组件
   ======================================== */
.card {
    background-color: var(--bg-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    transition: box-shadow var(--transition-base);
}

.card:hover {
    box-shadow: var(--shadow-lg);
}

.card__header {
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
}

.card__title {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
}

.card__body {
    padding: var(--spacing-lg);
}

.card__footer {
    padding: var(--spacing-md) var(--spacing-lg);
    border-top: 1px solid var(--border-color);
    background-color: var(--bg-secondary);
}

.card--featured {
    border: 2px solid var(--primary-color);
}

.card--compact .card__body {
    padding: var(--spacing-md);
}

/* ========================================
   表单组件
   ======================================== */
.form-group {
    margin-bottom: var(--spacing-md);
}

.form-label {
    display: block;
    margin-bottom: var(--spacing-sm);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-primary);
}

.form-input {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-md);
    line-height: 1.5;
    color: var(--text-primary);
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-base);
}

.form-input:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.25);
}

.form-input::placeholder {
    color: var(--text-light);
}

.form-input:disabled {
    background-color: var(--bg-secondary);
    cursor: not-allowed;
}

.form-input--error {
    border-color: var(--danger-color);
}

.form-textarea {
    min-height: 100px;
    resize: vertical;
}

.form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--spacing-md) center;
    padding-right: calc(var(--spacing-md) * 2.5);
}

.form-checkbox,
.form-radio {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.form-checkbox input,
.form-radio input {
    margin-right: var(--spacing-sm);
}

/* ========================================
   导航组件
   ======================================== */
.nav {
    display: flex;
    align-items: center;
    padding: var(--spacing-md) 0;
    background-color: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
}

.nav__logo {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--primary-color);
    text-decoration: none;
}

.nav__menu {
    display: flex;
    list-style: none;
    margin-left: auto;
}

.nav__item {
    margin-left: var(--spacing-lg);
}

.nav__link {
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 500;
    transition: color var(--transition-base);
}

.nav__link:hover,
.nav__link--active {
    color: var(--primary-color);
}

/* ========================================
   响应式设计
   ======================================== */
@media (max-width: 768px) {
    .container {
        padding: 0 var(--spacing-sm);
    }
    
    .nav__menu {
        display: none;
    }
    
    .button {
        width: 100%;
    }
    
    .card__header,
    .card__body,
    .card__footer {
        padding: var(--spacing-md);
    }
}

/* ========================================
   暗色模式
   ======================================== */
@media (prefers-color-scheme: dark) {
    :root {
        --text-primary: #fff;
        --text-secondary: #ccc;
        --text-light: #999;
        
        --bg-primary: #1a1a1a;
        --bg-secondary: #2a2a2a;
        
        --border-color: #3a3a3a;
    }
}

/* ========================================
   动画效果
   ======================================== */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.animate-fade-in {
    animation: fadeIn var(--transition-base);
}

.animate-slide-up {
    animation: slideUp var(--transition-base);
}

/* ========================================
   工具类
   ======================================== */
.d-none { display: none; }
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-flex { display: flex; }
.d-inline-flex { display: inline-flex; }

.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }

.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }

.align-start { align-items: flex-start; }
.align-center { align-items: center; }
.align-end { align-items: flex-end; }
.align-stretch { align-items: stretch; }

.m-0 { margin: 0; }
.m-1 { margin: var(--spacing-sm); }
.m-2 { margin: var(--spacing-md); }
.m-3 { margin: var(--spacing-lg); }
.m-4 { margin: var(--spacing-xl); }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--spacing-sm); }
.mt-2 { margin-top: var(--spacing-md); }
.mt-3 { margin-top: var(--spacing-lg); }
.mt-4 { margin-top: var(--spacing-xl); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--spacing-sm); }
.mb-2 { margin-bottom: var(--spacing-md); }
.mb-3 { margin-bottom: var(--spacing-lg); }
.mb-4 { margin-bottom: var(--spacing-xl); }

.p-0 { padding: 0; }
.p-1 { padding: var(--spacing-sm); }
.p-2 { padding: var(--spacing-md); }
.p-3 { padding: var(--spacing-lg); }
.p-4 { padding: var(--spacing-xl); }

.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-full { border-radius: var(--radius-full); }

.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

.w-100 { width: 100%; }
.h-100 { height: 100%; }

十一、总结

CSS是Web开发中不可或缺的技术，通过本文的学习，你应该掌握了：

  1. CSS的基本概念和引入方式
  2. 各种选择器的使用方法
  3. 常用CSS属性的详细应用
  4. Flexbox和Grid布局系统
  5. CSS动画和过渡效果
  6. 响应式设计和移动端优化
  7. CSS最佳实践和性能优化
  8. 浏览器兼容性处理
  9. 完整的CSS实战示例

学习建议：

  • 多动手实践，创建自己的样式库
  • 参考优秀的开源项目代码
  • 关注CSS的最新发展和特性
  • 结合HTML和JavaScript深入学习
  • 养成良好的编码习惯

CSS的学习是一个持续的过程，随着技术的发展，CSS也在不断进化。保持学习的热情，不断提升自己的技能，你一定能成为一名优秀的前端开发者！

希望这篇CSS详解教程对你有所帮助！如果你有任何问题或建议，欢迎留言讨论。持续学习，不断进步，让我们一起在Web开发的道路上越走越远！

相关推荐
方也_arkling2 小时前
基于脚手架创建Vue2工程
前端·javascript·vue.js
Never_every992 小时前
5 个批量抠图工具，提升 10 倍效率
大数据·前端·ai
wefly20172 小时前
告别繁琐配置！m3u8live.cn让 M3U8 链接验证变得如此简单
开发语言·前端·python·django·flask·开发工具
FL16238631292 小时前
使用html实现超炫登录界面和diango实现同样登录界面
前端·html
Irissgwe2 小时前
基础I/O
java·linux·前端
巫山老妖2 小时前
多 Agent 协作实战：我用 3 只龙虾组了个「AI小分队」，效率直接翻倍
java·前端
DyLatte2 小时前
理性到最后，其实是一场下注
前端·后端·程序员
橘哥哥2 小时前
vue中读取静态配置文件中内容
前端·javascript·vue.js
废嘉在线抓狂.2 小时前
简易拆开即用的高性能计时器（C#）
前端·unity·c#
热门推荐
01GitHub 镜像站点02OpenClaw 使用和管理 MCP 完全指南03本地部署 OpenClaw + DeepSeek-R1 完全指南04OpenClaw 飞书机器人不回复消息？3 小时踩坑总结05得物前端部门，没了06OpenClaw macOS 完整安装与本地模型配置教程（实战版）07Qwen3.5 开源全解析：从 0.8B 到 397B，代际升级 + 全场景选型指南08OpenClaw 连接飞书完整指南：插件安装、配置与踩坑记录09Window 10部署openclaw报错node.exe : npm error code 12810OpenClaw 接入 QQ Bot 完整实践指南