CSS从入门到精通：全面解析CSS核心知识体系

版本	发布时间	特点
CSS1	1996年12月	基础样式功能
CSS2	1998年5月	支持定位与媒体查询
CSS2.1	2004年6月	修正版，广泛兼容
CSS3	未正式发布	模块化设计，功能增强

二、CSS引入方式与基础语法

2.1 三种引入方式

行间样式 ：通过标签的style属性直接添加。

html 复制代码

<div style="width: 100px; height: 100px; background: red;"></div>

内部样式 ：在<style>标签中定义样式。

html 复制代码

<style>  
  div { width: 100px; height: 100px; }  
</style>

外部样式 ：通过<link>引入外部CSS文件（推荐）。

html 复制代码

<link rel="stylesheet" href="style.css">

三、引入CSS的三种方式及最佳实践

3.1 行间样式

直接在HTML标签中通过style属性定义样式，适用于快速调试或局部样式覆盖，但会导致HTML与CSS耦合，不推荐大规模使用。

html 复制代码

<div style="color: red; font-size: 16px;">行间样式示例</div>

3.2 内部样式

在HTML的<style>标签内编写CSS，适合单页面开发，但复用性差。

html 复制代码

<head>  
  <style>  
    .title {  
      color: blue;  
      text-align: center;  
    }  
  </style>  
</head>

3.3 外部样式（推荐）

通过<link>引入外部CSS文件，实现样式与结构分离，便于维护和复用。

html 复制代码

<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)。

html 复制代码

a:hover { color: orange; }  
li:nth-child(2n) { background: #f0f0f0; }

伪元素 ：创建虚拟元素，如::before、::after。

html 复制代码

.quote::before {  
  content: """;  
  color: gray;  
}

五、CSS布局核心：传统与现代方案

5.1 传统布局方案

浮动布局：

html 复制代码

.left { float: left; width: 30%; }  
.right { float: right; width: 70%; }  
.clearfix::after { content: ""; display: block; clear: both; }

定位布局：

html 复制代码

.modal {  
  position: fixed;  
  top: 50%;  
  left: 50%;  
  transform: translate(-50%, -50%);  
}

5.2 现代布局方案

Flexbox：单维度布局（行或列），适合组件对齐。

html 复制代码

.container {  
  display: flex;  
  justify-content: space-between;  
  align-items: center;  
}

Grid：二维网格布局，适合复杂页面结构。

html 复制代码

.grid {  
  display: grid;  
  grid-template-columns: 1fr 2fr 1fr;  
  gap: 20px;  
}

六、深入CSS盒子模型

6.1 盒子模型组成

标准盒模型 ：width/height仅包含内容区域。
IE盒模型 ：width/height包含内容+内边距+边框。

切换盒模型：

html 复制代码

.box {  
  box-sizing: border-box; /* 推荐：更易控制尺寸 */  
}

6.2 外边距合并问题

垂直相邻元素：上下外边距会合并为较大值。
解决方案 ：使用padding或border隔开。

七、行内、块级与行内块元素对比

特性	行内元素（inline）	块级元素（block）	行内块元素（inline-block）
宽高设置	不支持	支持	支持
默认宽度	由内容决定	父元素100%	由内容决定
换行显示	同行显示（除非换行）	独占一行	同行显示
典型标签	`<span>`, `<a>`, `<em>`	`<div>`, `<p>`, `<ul>`	`<img>`, `<input>`

转换元素类型：

html 复制代码

.inline-to-block { display: block; }  
.block-to-inline { display: inline; }  
.inline-to-inline-block { display: inline-block; }

八、总结与资源推荐

核心要点：掌握选择器优先级、盒子模型、布局方案是CSS进阶的关键。
学习建议：通过Chrome开发者工具调试样式，理解渲染机制。
扩展阅读：
- Flexbox完全指南
- CSS Grid布局实战