CSS学习笔记
一、CSS概述
1. 基本概念
-
CSS（层叠样式表）：控制网页外观和格式，实现结构与样式分离。
-
核心优势：提高可维护性、可扩展性，支持响应式设计。
2. CSS作用
-
视觉样式：字体、颜色、间距等。
-
布局控制：排版、定位。
-
交互增强：动画、过渡效果（如
:hover）。
3. 引入方式
| 方式 | 语法示例 | 优先级 | 适用场景 |
|---|---|---|---|
| 内联样式 | <p style="color:red;"> | 最高 | 临时调试，不推荐大量使用 |
| 内部样式表 | <style> p { color:blue; } </style> | 中 | 单页面样式 |
| 外部样式表 | <link rel="stylesheet" href="styles.css"> | 最低 | 多页面复用，推荐方式 |
二、CSS选择器
1. 基本选择器
| 选择器类型 | 语法示例 | 特点 |
|---|---|---|
| 标签 | p { ... } | 选择所有指定标签 |
| 类 | .class { ... } | 可复用，多个元素共用 |
| ID | #id { ... } | 唯一性，优先级高于类 |
| 通用 | * { ... } | 选择所有元素（慎用） |
2. 组合选择器
| 组合方式 | 语法示例 | 作用 |
|---|---|---|
| 后代选择器 | div p | 选择div内所有层级的p |
| 子代选择器 | div > p | 仅选择直接子元素p |
| 相邻兄弟 | h1 + p | 选择紧接h1后的第一个p |
| 通用兄弟 | h1 ~ p | 选择h1后所有同级的p |
3. 伪类选择器
-
链接状态：
a:hover { color: orange; } /* 悬停 */ a:visited { color: purple; } /* 已访问 */ -
结构伪类：
li:nth-child(2) { ... } /* 选择第2个子元素 */ p:first-child { ... } /* 第一个子元素 */ -
状态伪类：
input:focus { border-color: blue; } /* 输入框聚焦时 */ button:disabled { opacity: 0.5; } /* 禁用按钮 */
三、CSS盒子模型
1. 盒子组成
-
四层结构（由内到外）：
-
Content（内容区）：
width/height控制大小。 -
Padding（内边距）：
padding设置，背景色会影响。 -
Border（边框）：
border定义样式、颜色、宽度。 -
Margin（外边距）：
margin控制与其他元素间距，透明。
-
2. 盒模型类型
| 类型 | box-sizing属性值 | 特点 |
|---|---|---|
| 标准盒模型 | content-box | width/height仅含内容区（默认） |
| IE盒模型 | border-box | width/height包含内容区+padding+border |
/* 切换为IE盒模型（推荐布局使用） */
* {box-sizing: border-box;
}
3. 盒子尺寸计算
-
总宽度 =
width+ 左右padding+ 左右border+ 左右margin -
总高度 =
height+ 上下padding+ 上下border+ 上下margin
四、CSS布局
1. 元素类型
| 类型 | 特点 | 示例标签 | 能否设置宽高？ |
|---|---|---|---|
| 块级元素 | 独占一行，默认宽度100% | div, p, h1 | 是 |
| 行内元素 | 同行排列，宽高由内容决定 | span, a | 否 |
| 行内块元素 | 同行排列，可设置宽高 | img, button | 是 |
/* 转换元素类型 */
.inline-block {display: inline-block;
}
2. 布局技术
(1) 浮动布局
.left {float: left; /* 左浮动 */
}
.right {float: right; /* 右浮动 */
}
-
问题：父元素高度塌陷。
-
解决：通过
clearfix清除浮动：.clearfix::after {content: "";display: block;clear: both; }
(2) Flex弹性布局
.container {display: flex;justify-content: center; /* 主轴对齐方式 */align-items: center; /* 交叉轴对齐方式 */gap: 20px; /* 子元素间距 */
}
(3) Grid网格布局
.grid-container {display: grid;grid-template-columns: 1fr 2fr 1fr; /* 三列，比例1:2:1 */grid-template-rows: 100px auto; /* 两行，第二行自适应 */grid-gap: 10px;
}
五、总结
-
核心概念：理解选择器优先级、盒模型计算和布局方式是关键。
-
最佳实践：
-
优先使用外部样式表，保持结构清晰。
-
布局时使用
box-sizing: border-box避免尺寸计算问题。 -
现代布局推荐Flex和Grid，减少浮动使用。
-
-
学习建议：多实践布局案例（如导航栏、卡片布局），善用浏览器开发者工具调试样式。