引言
CSS（层叠样式表）是前端开发的基石，掌握其核心知识能显著提升页面设计与布局能力。本文基于系统化学习资料，深入讲解CSS语法、选择器优先级、盒子模型、定位等核心概念，结合代码示例与实用技巧，助你从入门到进阶！
目录
一、CSS基础与历史
1.1 CSS简介
CSS用于描述HTML/XML文档的呈现样式，实现了结构与样式的分离。通过CSS，开发者可轻松控制字体、颜色、布局等，提升代码可维护性。
1.2 CSS版本演进
| 版本 | 发布时间 | 特点 |
|---|---|---|
| CSS1 | 1996年12月 | 基础样式功能 |
| CSS2 | 1998年5月 | 支持定位与媒体查询 |
| CSS2.1 | 2004年6月 | 修正版，广泛兼容 |
| CSS3 | 未正式发布 | 模块化设计，功能增强 |
二、CSS引入方式与基础语法
2.1 三种引入方式
行间样式：通过标签的style属性直接添加。
<div style="width: 100px; height: 100px; background: red;"></div> 内部样式：在<style>标签中定义样式。
<style>
div { width: 100px; height: 100px; }
</style> 外部样式：通过<link>引入外部CSS文件（推荐）。
<link rel="stylesheet" href="style.css"> 三、引入CSS的三种方式及最佳实践
3.1 行间样式
直接在HTML标签中通过style属性定义样式，适用于快速调试或局部样式覆盖，但会导致HTML与CSS耦合，不推荐大规模使用。
<div style="color: red; font-size: 16px;">行间样式示例</div> 3.2 内部样式
在HTML的<style>标签内编写CSS，适合单页面开发，但复用性差。
<head>
<style>
.title {
color: blue;
text-align: center;
}
</style>
</head> 3.3 外部样式（推荐）
通过<link>引入外部CSS文件，实现样式与结构分离，便于维护和复用。
<head>
<link rel="stylesheet" href="styles.css">
</head> 最佳实践：
-
模块化拆分：按功能或组件拆分CSS文件（如
header.css、footer.css）。 -
预处理器：使用Sass/Less增强CSS功能，如变量、嵌套等。
四、CSS选择器详解与高效使用
4.1 基础选择器
| 类型 | 语法 | 示例 | 用途 |
|---|---|---|---|
| 元素选择器 | tag | p { color: red; } | 选中所有指定标签 |
| 类选择器 | .class | .btn { padding: 8px; } | 复用样式类 |
| ID选择器 | #id | #header { height: 60px; } | 唯一元素样式（慎用） |
4.2 组合选择器
-
后代选择器：
div p { }（选中div内所有p标签）。 -
子选择器：
div > p { }（仅选中直接子元素）。 -
相邻兄弟选择器：
h1 + p { }（选中紧接h1后的第一个p）。
4.3 伪类与伪元素
伪类：定义元素特殊状态，如:hover、:nth-child(n)。
a:hover { color: orange; }
li:nth-child(2n) { background: #f0f0f0; } 伪元素：创建虚拟元素，如::before、::after。
.quote::before {
content: "“";
color: gray;
} 五、CSS布局核心：传统与现代方案
5.1 传统布局方案
浮动布局：
.left { float: left; width: 30%; }
.right { float: right; width: 70%; }
.clearfix::after { content: ""; display: block; clear: both; } 定位布局：
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
} 5.2 现代布局方案
Flexbox：单维度布局（行或列），适合组件对齐。
.container {
display: flex;
justify-content: space-between;
align-items: center;
} Grid：二维网格布局，适合复杂页面结构。
.grid {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
gap: 20px;
} 六、深入CSS盒子模型
6.1 盒子模型组成
-
标准盒模型：
width/height仅包含内容区域。 -
IE盒模型：
width/height包含内容+内边距+边框。
切换盒模型：
.box {
box-sizing: border-box; /* 推荐：更易控制尺寸 */
} 6.2 外边距合并问题
-
垂直相邻元素：上下外边距会合并为较大值。
-
解决方案：使用
padding或border隔开。
七、行内、块级与行内块元素对比
| 特性 | 行内元素（inline） | 块级元素（block） | 行内块元素（inline-block） |
|---|---|---|---|
| 宽高设置 | 不支持 | 支持 | 支持 |
| 默认宽度 | 由内容决定 | 父元素100% | 由内容决定 |
| 换行显示 | 同行显示（除非换行） | 独占一行 | 同行显示 |
| 典型标签 | <span>, <a>, <em> | <div>, <p>, <ul> | <img>, <input> |
转换元素类型：
.inline-to-block { display: block; }
.block-to-inline { display: inline; }
.inline-to-inline-block { display: inline-block; } 八、总结与资源推荐
-
核心要点：掌握选择器优先级、盒子模型、布局方案是CSS进阶的关键。
-
学习建议：通过Chrome开发者工具调试样式，理解渲染机制。
-
扩展阅读：
扫一扫
1628
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
