css总结
一、CSS 基础语法
1. 引入方式
CSS 有 3 种引入方式，根据场景选择使用：
| 引入方式 | 语法示例 | 特点 |
|---|---|---|
| 内联样式 | <div style="color: red;">内容</div> | 优先级最高，仅作用于单个元素，耦合度高 |
| 内部样式 | <style> div { color: red; } </style> | 作用于当前页面，集中管理样式 |
| 外部样式 | <link rel="stylesheet" href="style.css"> | 单独文件，多页面复用，便于维护 |
2. 基本语法规则
CSS 由「选择器」和「声明块」组成：
css
/* 选择器：指定要样式化的元素 */
选择器 {/* 声明块：由多个键值对组成 */属性名1: 属性值1; /* 声明1：设置文本颜色 */属性名2: 属性值2; /* 声明2：设置字体大小 */
}/* 示例：将所有 p 标签设置为红色、16px 字体 */
p {color: red;font-size: 16px;
}
二、选择器（Selector）
选择器用于定位 HTML 元素，是 CSS 的核心功能之一。
1. 基础选择器
| 选择器类型 | 语法 | 说明 | 示例 |
|---|---|---|---|
| 元素选择器 | 标签名 | 匹配所有该标签元素 | div { ... } 匹配所有 div |
| 类选择器 | . 类名 | 匹配所有含该类的元素 | .active { ... } 匹配类为 active 的元素 |
| ID 选择器 | #ID 名 | 匹配唯一 ID 元素（ID 不可重复） | #header { ... } 匹配 ID 为 header 的元素 |
| 通配符选择器 | * | 匹配所有元素 | * { margin: 0; } 清除所有元素默认外边距 |
2. 复合选择器
| 选择器类型 | 语法 | 说明 | 示例 |
|---|---|---|---|
| 后代选择器 | 父选择器 子选择器 | 匹配父元素内的所有后代子元素 | ul li { ... } 匹配 ul 内所有 li |
| 子选择器 | 父选择器 > 子选择器 | 仅匹配父元素的直接子元素 | ul > li { ... } 匹配 ul 的直接子元素 li |
| 相邻兄弟选择器 | 元素 + 兄弟元素 | 匹配元素后的第一个相邻兄弟元素 | h1 + p { ... } 匹配 h1 后的第一个 p |
| 并集选择器 | 选择器 1, 选择器 2 | 同时匹配多个选择器 | div, p { ... } 匹配所有 div 和 p |
| 属性选择器 | [属性 = 值] | 匹配含指定属性及值的元素 | input[type="text"] { ... } 匹配文本输入框 |
3. 伪类选择器（常用）
伪类用于描述元素的「状态」或「位置」：
| 伪类 | 说明 | 示例 |
|---|---|---|
| :hover | 鼠标悬停时的元素 | button:hover { background: blue; } |
| :active | 元素被点击时的状态 | a:active { color: red; } |
| :focus | 元素获取焦点时（如输入框） | input:focus { border: 2px solid green; } |
| :nth-child(n) | 匹配父元素的第 n 个子元素（n 从 1 开始） | ul li:nth-child(2) { ... } 匹配 ul 的第 2 个 li |
| :first-child | 匹配父元素的第一个子元素 | li:first-child { ... } |
三、CSS 盒模型（Box Model）
所有 HTML 元素都被视为一个「盒子」，盒模型决定元素的尺寸计算方式。
- content（内容区）：元素的文本或图像区域，由
width和height定义。 - padding（内边距）：内容区与边框的距离，不允许负值。
- border（边框）：围绕内容区和内边距的线条，由
border-width、border-style、border-color定义。 - margin（外边距）：元素与其他元素的距离，允许负值（用于重叠元素）。
2. 盒模型计算方式
- 标准盒模型（默认）：
元素总宽度 = width + padding-left + padding-right + border-left + border-right - 怪异盒模型（IE 盒模型）：
元素总宽度 = width（包含 padding 和 border）
通过 box-sizing 切换：
css
/* 标准盒模型（默认） */
.box { box-sizing: content-box; }/* 怪异盒模型（推荐用于布局，避免计算麻烦） */
.box { box-sizing: border-box; }
四、布局方式
1. 流式布局（Float）
早期常用的布局方式，通过 float 使元素脱离文档流并排显示：
css
.left {float: left; /* 向左浮动 */width: 200px;
}
.right {float: right; /* 向右浮动 */width: 300px;
}/* 清除浮动（避免父元素高度塌陷） */
.parent::after {content: "";display: block;clear: both;
}
2. Flex 布局（弹性布局）
现代布局首选方案，通过设置父元素为 display: flex，控制子元素的排列方式：
父元素属性（容器属性）：
css
.container {display: flex; /* 启用 Flex 布局 */flex-direction: row; /* 子元素排列方向：row（默认，水平）/ column（垂直） */justify-content: center; /* 水平对齐：center（居中）/ flex-start（左对齐）/ space-between（两端对齐） */align-items: center; /* 垂直对齐：center（居中）/ flex-start（上对齐）/ stretch（拉伸填满） */flex-wrap: wrap; /* 子元素换行：nowrap（默认，不换行）/ wrap（换行） */
}
子元素属性（项目属性）：
css
.item {flex: 1; /* 占比：子元素等分父容器宽度 */margin: 0 10px;
}
3. Grid 布局（网格布局）
二维布局系统，适合复杂网格结构（如仪表盘、画廊）：
css
.container {display: grid; /* 启用 Grid 布局 */grid-template-columns: 1fr 1fr 1fr; /* 列定义：3 列，每列占比 1:1:1 */grid-template-rows: 100px 200px; /* 行定义：2 行，高度分别为 100px、200px */gap: 10px; /* 行列间距 */
}
五、定位（Position）
控制元素在页面中的位置，常用属性 position：
| 值 | 说明 | 示例场景 |
|---|---|---|
| static | 默认值，正常文档流，不脱离布局 | 普通元素 |
| relative | 相对定位，相对于自身原位置偏移，不脱离文档流 | 微调元素位置 |
| absolute | 绝对定位，相对于最近的非 static 父元素偏移，脱离文档流 | 弹窗、悬浮菜单 |
| fixed | 固定定位，相对于浏览器窗口偏移，脱离文档流，不随滚动条滚动 | 顶部导航栏、回到顶部按钮 |
| sticky | 粘性定位，滚动到指定位置后固定（结合 top/left 等使用） | 列表标题栏 |
示例：固定在屏幕右上角的按钮
css
.btn {position: fixed;top: 20px;right: 20px;width: 50px;height: 50px;
}
六、动画与过渡
1. 过渡（Transition）
实现元素状态变化时的平滑过渡（如 hover 效果）：
css
.box {width: 100px;height: 100px;background: red;/* 过渡配置：属性 时长 动画曲线 延迟 */transition: width 0.3s ease 0.1s, background 0.3s;
}.box:hover {width: 200px; /* 宽度变化会触发过渡 */background: blue; /* 背景色变化会触发过渡 */
}
2. 动画（Animation）
更复杂的自定义动画，需定义 @keyframes 关键帧：
css
/* 定义动画关键帧 */
@keyframes fade {0% { opacity: 0; transform: scale(0.8); } /* 开始状态 */50% { opacity: 1; transform: scale(1.2); } /* 中间状态 */100% { opacity: 0; transform: scale(0.8); } /* 结束状态 */
}/* 应用动画 */
.popup {animation: fade 2s infinite; /* 动画名称 时长 重复次数（infinite 无限） */
}
七、响应式布局
使页面在不同设备（手机、平板、PC）上自适应显示，核心是 @media 媒体查询：
css
/* 默认样式（PC 端） */
.container {width: 1200px;margin: 0 auto;
}/* 平板设备（屏幕宽度 < 992px） */
@media (max-width: 992px) {.container {width: 90%;}
}/* 手机设备（屏幕宽度 < 768px） */
@media (max-width: 768px) {.container {width: 100%;padding: 0 10px;}
}
八、常见问题与解决方案
-
清除默认样式：浏览器会为元素添加默认 margin/padding，需重置：
css
* {margin: 0;padding: 0;box-sizing: border-box; /* 统一盒模型 */ } -
垂直居中：
- Flex 布局：
parent { display: flex; align-items: center; justify-content: center; } - 定位：
child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
- Flex 布局：
-
文字溢出省略：
css
/* 单行文本 */ .single-line {white-space: nowrap;overflow: hidden;text-overflow: ellipsis; }/* 多行文本（最多 3 行） */ .multi-line {display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden; }