CSS（层叠样式表，Cascading Style Sheets）是前端三层架构中的样式表现层，核心作用是为HTML骨架添加样式美化与布局排版，解决网页结构与样式混杂的问题。HTML负责搭建网页结构，CSS负责页面视觉呈现，包括颜色、字体、边距、定位、布局、动画等所有视觉效果，配合JavaScript可实现动态交互样式。本文将从基础规范、引入方式、选择器体系、核心样式、布局体系、权重层叠、响应式与兼容性、编码规范等维度，全方位、体系化梳理CSS核心知识，结合多维表格汇总重难点，构建完整的CSS知识体系。
一、CSS基础核心概念与规范
1.1 核心定义与作用
CSS全称层叠样式表，其中层叠是CSS的核心特性，指多个样式可叠加作用于同一元素，同时遵循固定的优先级规则覆盖冲突样式。CSS完全解耦结构与样式，让HTML专注语义结构，CSS专注视觉表现，大幅提升网页可维护性、复用性和扩展性。
CSS历经多次迭代，主流版本为CSS3，相较于旧版本，新增弹性布局、网格布局、圆角阴影、渐变、动画、媒体查询等核心功能，摆脱了传统布局的局限，适配现代响应式网页开发，是当前前端样式开发的唯一标准。
1.2 CSS语法结构
CSS样式由选择器和声明块两部分组成，声明块由多条「属性: 属性值;」样式声明构成，语法规范统一、结构清晰。
标准语法格式：选择器 { 样式属性1: 属性值1; 样式属性2: 属性值2; }
核心规则：选择器用于精准选中需要美化的HTML元素；样式属性是CSS预定义的样式规则；属性值为对应属性的参数设置；每条声明以分号结尾，整体代码支持缩进、换行，不区分大小写，推荐小写规范。
二、CSS三种引入方式与对比
CSS样式共有三种页面引入方式：行内样式、内部样式、外部样式，三种方式优先级、作用范围、使用场景各不相同，是CSS开发的基础必备知识点。
引入方式 | 书写位置 | 语法示例 | 作用范围 | 优先级 | 适用场景 |
|---|---|---|---|---|---|
行内样式 | HTML标签style属性内 | <div style="color:red;"></div> | 仅当前标签生效 | 最高 | 临时调试、局部特殊样式，不推荐大量使用 |
内部样式 | 页面head标签的style标签内 | style标签内书写选择器与样式 | 当前整个页面生效 | 中等 | 单页面专属样式、小型页面开发、快速demo制作 |
外部样式 | 独立.css后缀文件，link引入 | <link rel="stylesheet" href="style.css"> | 所有引入该文件的页面生效 | 最低 | 项目正式开发、多页面复用样式，企业级首选 |
补充说明：三种样式可同时使用，样式冲突时遵循优先级规则：行内样式 > 内部样式 > 外部样式；无冲突时样式相互叠加。
三、CSS选择器体系全解（核心重点）
选择器是CSS的核心，作用是精准匹配HTML元素，实现针对性样式设置。CSS选择器分为基础选择器、复合选择器、伪类选择器、伪元素选择器、属性选择器五大类，层级丰富、功能各异。
3.1 基础选择器
基础选择器是最简易的选择器，包含四类，覆盖基础元素匹配场景。
选择器类型 | 语法格式 | 匹配规则 | 优先级 | 使用场景 |
|---|---|---|---|---|
通配符选择器 | * | 匹配页面所有HTML元素 | 最低 | 全局样式初始化，清除默认边距 |
标签选择器 | 标签名 | 匹配页面所有对应标签元素 | 低 | 统一页面同类标签默认样式 |
类选择器 | .类名 | 匹配class属性对应类名的元素，可复用 | 中 | 项目最常用，自定义通用样式 |
ID选择器 | #id名 | 匹配id属性对应名称的元素，页面唯一 | 高 | 匹配唯一元素，不建议大量用于样式 |
3.2 复合选择器
复合选择器由多个基础选择器组合而成，用于精准匹配特定层级、特定关系的元素，解决复杂页面元素筛选问题。
选择器类型 | 语法格式 | 匹配规则 | 优先级 |
|---|---|---|---|
后代选择器 | 父选择器 子选择器 | 匹配父元素下所有层级的对应子元素 | 叠加计算 |
子代选择器 | 父选择器 > 子选择器 | 仅匹配父元素下直接一级子元素 | 叠加计算 |
相邻兄弟选择器 | 元素1 + 元素2 | 匹配元素1紧邻的下一个同级元素2 | 叠加计算 |
通用兄弟选择器 | 元素1 ~ 元素2 | 匹配元素1所有后续同级元素2 | 叠加计算 |
交集选择器 | 选择器1选择器2 | 匹配同时满足两个选择器的元素 | 叠加计算 |
并集选择器 | 选择器1,选择器2 | 匹配所有满足任意一个选择器的元素，样式共享 | 各自原有优先级 |
3.3 伪类与伪元素选择器
伪类选择器用于匹配元素的特殊状态，伪元素选择器用于创建虚拟元素，是美化交互与细节布局的核心选择器。
类型 | 常用选择器 | 功能说明 |
|---|---|---|
状态伪类 | :link | 未访问的超链接状态 |
:visited | 已访问的超链接状态 | |
:hover | 鼠标悬浮元素状态，适用所有元素 | |
:active | 鼠标点击激活瞬间状态 | |
结构伪类 | :first-child | 匹配父元素第一个子元素 |
:last-child | 匹配父元素最后一个子元素 | |
:nth-child(n) | 匹配父元素第n个子元素，支持奇偶、公式取值 | |
伪元素 | ::before | 在元素内部头部创建虚拟行内元素，需content属性 |
::after | 在元素内部尾部创建虚拟行内元素，需content属性 | |
::first-letter | 选中元素首字符，实现首字下沉等效果 | |
::selection | 设置鼠标选中文本的样式 |
四、CSS核心基础样式属性
基础样式是网页美化的核心，包含文本字体、背景、边框、内外边距等常用属性，所有视觉细节均由基础样式组合实现。
4.1 文本与字体样式
属性名 | 功能作用 | 常用属性值 |
|---|---|---|
color | 设置文本颜色 | 颜色名、十六进制、rgb、rgba |
font-size | 设置字体大小 | px、rem、em、百分比 |
font-weight | 设置字体粗细 | normal、bold、100-900数值 |
font-family | 设置字体类型 | 微软雅黑、宋体、Arial等 |
text-align | 设置文本水平对齐方式 | left、center、right、justify |
line-height | 设置行高，可实现文本垂直居中 | 数值、倍数、固定像素 |
text-decoration | 设置文本装饰线 | none、underline、line-through |
text-indent | 设置首行缩进 | 2em（首行缩进两字符）、固定像素 |
4.2 背景与边框样式
属性分类 | 属性名 | 功能说明 |
|---|---|---|
背景样式 | background-color | 设置元素背景颜色 |
background-image | 设置背景图片 | |
background-repeat | 设置背景图片平铺方式 | |
background-size | 设置背景图片尺寸，cover全覆盖常用 | |
边框样式 | border-width | 设置边框宽度 |
border-style | 设置边框样式（实线、虚线等） | |
border-radius | 设置圆角，50%可实现圆形 |
4.3 盒模型核心属性
CSS盒模型是布局的底层核心，所有HTML元素都是矩形盒子，由内容区、内边距、边框、外边距四部分组成。
组成部分 | 属性 | 作用范围 | 特性说明 |
|---|---|---|---|
内容区 | width、height | 元素文本、内容存放区域 | 标准盒模型宽高仅控制内容区 |
内边距 | padding | 内容与边框之间的距离 | 会撑大标准盒模型整体尺寸 |
边框 | border | 元素外层边框线条 | 同样会撑大标准盒模型尺寸 |
外边距 | margin | 元素与其他元素之间的距离 | 透明区域，不影响自身尺寸，可实现居中 |
盒模型切换：通过box-sizing: border-box开启怪异盒模型，元素设置的宽高为整体尺寸，padding和border不会撑大盒子，是现代开发默认规范。
五、CSS三大布局体系（重中之重）
网页布局的本质是控制元素的排列方式，CSS包含三大核心布局体系：标准流、浮动布局、弹性布局，辅以网格布局实现复杂页面排版，覆盖所有网页布局场景。
5.1 标准文档流
标准流是元素默认的布局方式，无需任何样式设置，遵循默认排版规则：块级元素独占一行、从上到下排列；行内/行内块元素从左到右排列，自动换行。标准流适合简单文档排版，无法实现并排居中、自适应布局等复杂效果。
5.2 浮动布局（传统布局）
浮动（float）是传统网页布局核心，用于打破标准流，实现多元素并排排列，适配传统PC端布局。
浮动属性值 | 布局效果 | 核心特性 |
|---|---|---|
float: none | 默认值，不浮动 | 元素遵循标准流布局 |
float: left | 元素向左浮动，并排排列 | 脱离标准流，元素变为行内块特性 |
float: right | 元素向右浮动，并排排列 | 脱离标准流，下方标准流元素上浮 |
浮动副作用：父元素高度塌陷、元素层级错乱。解决方案：伪元素清除浮动、额外标签法、overflow:hidden，其中伪元素清除浮动为企业首选方案。
5.3 弹性布局（Flex）现代主流布局
Flex弹性布局是CSS3新增布局方案，专为一维布局设计，简单高效、适配性强，完全替代浮动布局，是现代网页开发首选布局方式，完美适配移动端自适应场景。
作用对象 | 核心属性 | 功能作用 |
|---|---|---|
父容器属性 | display: flex | 开启弹性布局，子元素自动变为弹性项 |
flex-direction | 设置主轴方向（横向/纵向排列） | |
justify-content | 设置主轴对齐方式（居中、两端对齐等） | |
align-items | 设置侧轴对齐方式，实现垂直居中 | |
子项属性 | flex-grow | 设置子项剩余空间分配比例 |
flex-shrink | 设置子项压缩比例 | |
align-self | 单独设置单个子项的对齐方式 |
5.4 网格布局（Grid）二维布局
Grid网格布局是CSS3最强布局方案，专为二维布局设计，可同时控制行和列，轻松实现复杂规整的网格排版，适用于图片画廊、卡片列表、整体页面栅格布局。
六、定位布局与层级控制
定位（position）用于脱离标准流、精准控制元素位置，是特殊布局的核心，适配悬浮、固定导航、弹窗、叠加层级等场景。
定位方式 | 属性值 | 定位参考基准 | 是否脱离标准流 | 适用场景 |
|---|---|---|---|---|
静态定位 | static | 默认标准流位置 | 否 | 默认状态，无特殊定位 |
相对定位 | relative | 自身默认位置 | 否 | 微调元素位置、作为绝对定位父级 |
绝对定位 | absolute | 最近已定位父级，无则参考浏览器窗口 | 是 | 弹窗、图标叠加、悬浮标签 |
固定定位 | fixed | 浏览器可视窗口 | 是 | 固定导航、返回顶部按钮、悬浮广告 |
粘性定位 | sticky | 滚动临界切换相对/固定定位 | 临界切换 | 滚动吸顶导航、列表悬浮标题 |
层级控制：通过z-index属性控制定位元素的上下层级，数值越大层级越高，仅对定位元素生效，默认值为0。
七、CSS权重与层叠优先级（核心难点）
CSS权重用于解决样式冲突覆盖问题，当同一元素被多个选择器选中、样式重复定义时，权重值高的样式优先生效，是CSS核心重难点。
7.1 权重等级与数值
选择器类型 | 权重数值 | 优先级等级 |
|---|---|---|
!important 强制权重 | 无穷大 | 最高，强制优先生效 |
行内样式 style | 1000 | 一级优先级 |
ID选择器 | 100 | 二级优先级 |
类、伪类、属性选择器 | 10 | 三级优先级 |
标签、伪元素选择器 | 1 | 四级优先级 |
通配符、继承样式 | 0 | 最低优先级 |
7.2 权重计算规则
1. 权重可叠加，不可进位，多个选择器组合权重为各部分数值相加；
2. 权重相同时，后写的样式覆盖先写的样式；
3. !important不参与权重计算，优先级高于所有样式，禁止滥用；
4. 元素默认继承样式权重为0，低于所有自定义样式。
八、CSS3进阶特性
CSS3新增大量进阶特性，实现无需JS的动态效果与高级视觉样式，大幅提升页面质感，是现代开发必备知识点。
特性分类 | 核心属性 | 功能效果 |
|---|---|---|
视觉美化 | box-shadow | 设置盒子阴影，增强立体感 |
text-shadow | 设置文本阴影 | |
linear-gradient | 实现线性渐变背景 | |
过渡变换 | transition | 样式过渡动画，实现平滑切换效果 |
transform | 元素2D/3D变换（缩放、旋转、位移） | |
animation | 自定义关键帧动画，实现持续动态效果 |
九、响应式与适配规范
响应式布局可让网页自适应电脑、平板、手机等不同尺寸设备，核心依赖媒体查询、相对单位、弹性布局实现。
适配方案 | 核心原理 | 适用场景 |
|---|---|---|
媒体查询 @media | 根据屏幕宽度范围，加载不同样式 | 多设备尺寸差异化适配 |
rem适配 | 基于根字体大小的相对单位，随屏幕缩放 | 移动端全局适配 |
flex弹性适配 | 元素自动分配剩余空间，自适应缩放 | 页面模块、列表自适应布局 |
十、CSS编码规范与兼容性总结
10.1 标准化编码规范
统一小写书写属性与选择器；代码缩进对齐，模块化分层书写；类名语义化命名（header、nav、main、footer），禁止随意命名；精简冗余样式，复用公共样式；优先使用外部样式表，少用行内样式与!important；属性书写顺序统一（布局属性→盒模型→文本样式→视觉样式→动画）。
10.2 浏览器兼容性要点
CSS3新特性（flex、动画、渐变）在低版本浏览器存在兼容问题，可添加浏览器私有前缀（-webkit-、-moz-、-ms-）适配；统一使用box-sizing: border-box初始化盒模型，规避尺寸错乱问题；移动端优先适配，再兼容PC端；避免使用废弃属性，保证项目稳定性。
十一、整体知识总结
CSS的核心本质是网页视觉美化与布局排版，完整知识体系可概括为：三大引入方式奠定样式基础、多级选择器实现精准匹配、盒模型掌控元素尺寸、三大布局体系实现页面排版、定位层级实现特殊布局、权重规则解决样式冲突、CSS3进阶特性提升视觉效果、响应式方案实现多设备适配。
在前端开发中，CSS依托HTML骨架存在，配合JavaScript实现动态交互，熟练掌握选择器、布局、权重、适配四大核心模块，可独立完成所有静态页面、响应式页面的样式开发，是前端进阶的核心基石。
