CSS 语法详细总结

zhengqijun0121 收录于编程语言

2026-02-09 约 14219 字预计阅读 29 分钟

CSS语法详细总结

CSS（Cascading Style Sheets，层叠样式表）是用于控制HTML/XML文档外观、布局和样式的标记语言，核心实现结构与样式分离，本文从基础语法到高级特性进行全维度、结构化的详细总结，兼顾语法规范与实战常用技巧。

一、CSS基础引入方式

CSS有4种核心引入方式，适用场景与优先级各有不同，语法规范如下：

1.1 行内样式（内联样式）

直接在HTML标签的style属性中编写样式，仅对当前标签生效。

语法：<标签名 style="属性1:值1; 属性2:值2;">内容</标签名>
示例：<div style="width: 100px; height: 50px; color: red;">行内样式</div>
特点：优先级最高，耦合度高，不利于复用，仅用于临时样式调整。

1.2 内嵌样式（内部样式表）

在HTML的<head>标签内通过<style>标签编写样式，仅对当前HTML文档生效。

语法：

        
        
        
    
<head>
  <style>
    选择器 {
      属性1: 值1;
      属性2: 值2;
    }
  </style>
</head>

特点：结构与样式初步分离，适用于单页面专属样式，无法多页面复用。

1.3 外链样式（外部样式表）

将CSS写在独立的.css文件中，通过HTML的<link>标签引入，是企业级开发的标准方式。

语法：

        
<!-- HTML文件中 -->
<head>
  <link rel="stylesheet" href="style.css" type="text/css">
</head>

        
/* style.css文件中 */
选择器 {
  属性1: 值1;
  属性2: 值2;
}

核心属性：rel="stylesheet" 固定声明样式表关系，href为CSS文件路径
特点：完全实现结构与样式分离，可多页面复用，便于维护，浏览器可缓存。

1.4 导入样式

通过CSS的@import规则在样式表中导入其他CSS文件。

语法：

        
/* 写在CSS文件最顶部，必须先于其他样式规则 */
@import url("common.css");
@import "reset.css";

特点：属于CSS层级的样式引入，加载顺序晚于<link>，会阻塞页面渲染，现代开发不推荐优先使用。

二、CSS核心基础语法

CSS的核心语法单元是规则集（Rule Set），由「选择器」和「声明块」两部分组成，是所有CSS样式的基础结构。

2.1 基础语法结构

        
        
        
    
/* 规则集完整结构 */
选择器 {
  属性名1: 属性值1; /* 声明1 */
  属性名2: 属性值2; /* 声明2 */
  /* 更多声明 */
}

选择器：用于匹配HTML中需要添加样式的目标元素，是样式的作用目标
声明块：包裹在{}中，由一条或多条声明组成
声明：由属性名: 属性值;组成，;是声明的结束符，单条声明末尾可省略，多条声明必须严格书写
注释：仅支持/* 注释内容 */格式，可单行/多行，不支持//单行注释，注释内容不会被浏览器解析

2.2 语法基础规范

CSS对大小写不敏感，但选择器、属性名、属性值推荐全小写（仅自定义属性、字体名称区分大小写）
多个属性值之间用空格分隔，多个选择器之间用逗号分隔
特殊字符、空格包裹的属性值需要加引号（如字体名称含空格、背景图路径）
缩进与换行不影响解析，推荐按规范格式化，提升可读性

三、CSS选择器大全

选择器是CSS的核心，用于精准匹配HTML元素，按功能可分为6大类，覆盖全场景匹配需求。

3.1 基础选择器（核心）

选择器	语法	作用	优先级	示例
通配符选择器	`*`	匹配页面所有元素	最低	`* { margin: 0; padding: 0; }` 清除默认内外边距
标签选择器	标签名	匹配对应类型的所有HTML标签	低	`p { line-height: 1.5; }` 匹配所有p标签
类选择器	`.类名`	匹配所有class属性包含该类名的元素	中	`.box { width: 200px; }` 匹配`<div class="box"></div>`
ID选择器	`#ID名`	匹配id属性等于该名称的唯一元素	高	`#header { height: 80px; }` 匹配`<div id="header"></div>`

注意：ID在HTML中必须唯一，类名可重复使用；ID选择器优先级远高于类选择器，非必要不滥用。

3.2 复合选择器（关系匹配）

基于元素的父子、兄弟关系进行匹配，是精准定位元素的核心方式。

后代选择器（空格分隔）：选择器A 选择器B，匹配A元素内所有的B元素（包括孙子、重孙等所有后代）
- 示例：div p { color: #333; } 匹配div内所有层级的p标签
子代选择器（>分隔）：选择器A > 选择器B，仅匹配A元素的直接子元素B（不包含孙子级及以下）
- 示例：ul > li { list-style: none; } 仅匹配ul的直接子li标签
相邻兄弟选择器（+分隔）：选择器A + 选择器B，匹配紧跟在A后面的第一个同级兄弟元素B
- 示例：h2 + p { margin-top: 10px; } 匹配h2后面紧邻的第一个p标签
通用兄弟选择器（~分隔）：选择器A ~ 选择器B，匹配A后面所有同级的兄弟元素B
- 示例：.active ~ li { opacity: 0.5; } 匹配.active后面所有同级li标签
并集选择器（,分隔）：选择器A, 选择器B，同时匹配A和B，实现样式复用
- 示例：h1, h2, h3 { font-weight: 600; } 同时匹配所有h1/h2/h3标签
交集选择器（连写）：选择器A选择器B，匹配同时满足A和B的元素
- 示例：div.box { border: 1px solid #000; } 仅匹配class包含box的div标签

3.3 属性选择器

基于元素的属性及属性值进行匹配，CSS3新增了模糊匹配能力，适配表单、链接等场景。

语法	匹配规则	示例
`[attr]`	匹配包含attr属性的所有元素	`a[target]` 匹配带target属性的a标签
`[attr="val"]`	匹配attr属性值完全等于val的元素	`input[type="text"]` 匹配文本输入框
`[attr~="val"]`	匹配attr属性值包含独立单词val的元素	`div[class~="box"]` 匹配class含独立box的div
`[attr	=“val”]`	匹配attr属性值以val开头、且以`-`分隔的元素
`[attr^="val"]`	匹配attr属性值以val开头的元素（CSS3）	`a[href^="https"]` 匹配https开头的安全链接
`[attr$="val"]`	匹配attr属性值以val结尾的元素（CSS3）	`img[src$=".png"]` 匹配所有png格式图片
`[attr*="val"]`	匹配attr属性值包含val字符的元素（CSS3）	`input[name*="user"]` 匹配name含user的输入框

3.4 伪类选择器

伪类用于匹配元素的特定状态、结构位置，以:开头，需依附于基础选择器，当元素达到指定状态时样式生效。

3.4.1 链接/交互状态伪类（最常用）

伪类	作用	注意事项
`:link`	匹配未被访问的链接	仅适用于a标签
`:visited`	匹配已被访问的链接	仅适用于a标签，可修改样式有限（安全限制）
`:hover`	匹配鼠标悬浮的元素	所有元素都支持，是交互样式核心
`:active`	匹配鼠标点击激活状态的元素	点击按下未松开时生效
`:focus`	匹配获得焦点的元素	多用于input、button等表单元素

规范顺序：link → visited → hover → active，顺序错误会导致样式失效，简称LVHA规则。

3.4.2 结构伪类（CSS3核心，基于DOM结构匹配）

伪类	匹配规则	示例
`:first-child`	匹配父元素的第一个子元素	`li:first-child` 匹配父元素中第一个li
`:last-child`	匹配父元素的最后一个子元素	`li:last-child` 匹配父元素中最后一个li
`:nth-child(n)`	匹配父元素中第n个子元素，n从1开始	`li:nth-child(2)` 匹配第2个li；`li:nth-child(2n)` 匹配偶数行；`li:nth-child(2n+1)` 匹配奇数行
`:nth-last-child(n)`	从父元素末尾倒序匹配第n个子元素	`li:nth-last-child(2)` 匹配倒数第2个li
`:only-child`	匹配父元素中唯一的子元素	`p:only-child` 匹配父元素中仅有的一个p标签
`:first-of-type`	匹配父元素中同类型的第一个元素	`p:first-of-type` 匹配父元素中第一个p标签
`:last-of-type`	匹配父元素中同类型的最后一个元素	`p:last-of-type` 匹配父元素中最后一个p标签
`:nth-of-type(n)`	匹配父元素中同类型的第n个元素	`div:nth-of-type(3)` 匹配父元素中第3个div

核心区别：nth-child 匹配所有子元素，不区分类型；nth-of-type 先筛选同类型元素，再匹配序号，是开发中更常用的方式。

3.4.3 其他常用伪类

伪类	作用
`:enabled` / `:disabled`	匹配启用/禁用状态的表单元素
`:checked`	匹配被选中的单选框、复选框
`:required` / `:optional`	匹配必填/选填的表单元素
`:not(选择器)`	匹配不满足括号内选择器的元素（排除匹配）
`:target`	匹配当前URL锚点指向的目标元素
`:root`	匹配文档根元素（HTML中的html标签），用于定义全局CSS变量

3.5 伪元素选择器

伪元素用于创建DOM中不存在的虚拟元素，或匹配元素的特定部分，CSS3规范中以::开头（单冒号:兼容旧浏览器），必须配合content属性使用。

伪元素	作用	核心示例
`::before`	在元素内容的最前面创建一个虚拟子元素	`.btn::before { content: "★"; margin-right: 5px; }` 按钮前加图标
`::after`	在元素内容的最后面创建一个虚拟子元素	`.clearfix::after { content: ""; display: block; clear: both; }` 清除浮动
`::first-letter`	匹配块级元素文本的第一个字符	`p::first-letter { font-size: 2em; color: red; }` 首字下沉
`::first-line`	匹配块级元素文本的第一行	`p::first-line { font-weight: 600; }` 首行加粗
`::selection`	匹配用户鼠标选中的文本内容	`::selection { background: #165DFF; color: #fff; }` 自定义选中文本样式

核心区别：伪类是匹配元素的状态/位置，不改变DOM结构；伪元素是创建新的虚拟元素，可修改内容结构。

四、CSS核心单位与颜色表示

4.1 CSS长度单位

分为绝对单位和相对单位两大类，相对单位是响应式开发的核心。

4.1.1 绝对单位（固定值，不随外部环境变化）

单位	含义	适用场景
`px`（像素）	屏幕最小显示单位，最常用	绝大多数固定尺寸、边框、内边距
`pt`（磅）	印刷单位，1pt=1/72英寸	打印样式、字体印刷设置
`cm`/`mm`/`in`	厘米/毫米/英寸	打印样式、物理尺寸相关设计

4.1.2 相对单位（基于参考对象动态计算，响应式核心）

单位	参考基准	核心用法与场景
`%`	相对于父元素的对应属性	宽度、高度、内外边距的百分比适配，流式布局
`em`	相对于当前元素的`font-size`，若自身未设置则继承父元素	段落缩进、行高、内边距的字体联动适配
`rem`	相对于根元素`<html>`的`font-size`	移动端响应式布局，全局统一适配，无层级嵌套影响
`vw`	视口宽度的1%，1vw=视口宽度×1%	移动端全屏适配、响应式字体、宽度自适应
`vh`	视口高度的1%，1vh=视口高度×1%	全屏高度容器、自适应高度布局
`vmin`	vw和vh中的较小值	横竖屏切换时的最小尺寸适配，保证元素完整显示
`vmax`	vw和vh中的较大值	横竖屏切换时的最大尺寸适配，保证元素占比

4.2 CSS函数型单位（动态计算）

函数	语法	作用
`calc()`	`calc(表达式)`	动态计算长度值，支持加减乘除运算，运算符前后必须加空格
`min()`	`min(val1, val2, ...)`	取多个值中的最小值，适配上限
`max()`	`max(val1, val2, ...)`	取多个值中的最大值，适配下限
`clamp()`	`clamp(最小值, 首选值, 最大值)`	动态锁定取值范围，超出范围时取边界值，响应式字体首选

示例：font-size: clamp(12px, 2vw, 16px); 字体最小12px，最大16px，正常随视口宽度2vw变化。

4.3 CSS颜色表示方式

CSS提供5种主流颜色表示方法，支持透明度设置，适配不同设计场景。

颜色关键字：直接使用预定义的颜色名称，如red、blue、transparent（透明）、currentColor（继承当前color值）
十六进制颜色：语法#RRGGBB，RR/GG/BB为00-FF的十六进制数，可简写#RGB（两两重复时），支持透明度#RRGGBBAA/#RGBA
- 示例：#ff0000（红色）、#f00（简写红色）、#ff000080（半透明红色）
RGB/RGBA模式：
- 语法：rgb(红, 绿, 蓝)，取值0-255或0%-100%
- 语法：rgba(红, 绿, 蓝, 透明度)，透明度0（完全透明）-1（完全不透明）
- 示例：rgb(255, 0, 0)（红色）、rgba(255, 0, 0, 0.5)（50%透明红色）
HSL/HSLA模式：基于色相、饱和度、亮度的直观配色模式，设计首选
- 语法：hsl(色相, 饱和度%, 亮度%)，色相0-360（0红、120绿、240蓝）
- 语法：hsla(色相, 饱和度%, 亮度%, 透明度)
- 示例：hsl(0, 100%, 50%)（红色）、hsla(0, 100%, 50%, 0.5)（半透明红色）
渐变颜色：CSS3提供的渐变函数，用于背景、边框等场景，详见下文高级特性。

五、CSS核心属性分类详解

CSS属性按功能可分为布局、盒模型、文本字体、背景、装饰五大类，覆盖90%以上的开发场景。

5.1 文本属性

用于控制文本的显示效果，核心属性如下：

属性	核心取值	作用
`color`	颜色值	设置文本颜色
`text-align`	left/center/right/justify	设置文本水平对齐方式
`text-decoration`	none/underline/overline/line-through	设置文本装饰线（下划线、删除线等）
`text-indent`	长度单位/百分比	设置首行文本缩进
`line-height`	数字/长度单位/百分比	设置行高，多行文本垂直居中、行间距控制核心
`letter-spacing`	长度单位	设置字符间距
`word-spacing`	长度单位	设置单词间距
`text-transform`	none/capitalize/uppercase/lowercase	设置文本大小写转换
`white-space`	normal/nowrap/pre/pre-wrap/pre-line	设置空白符处理与换行规则
`text-overflow`	clip/ellipsis	设置文本溢出容器的显示方式，配合overflow:hidden使用

常用实战技巧：

单行文本溢出省略号：

        
.text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

多行文本溢出省略号（webkit内核）：

        
        
        
    
.text-ellipsis-multi {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 控制显示行数 */
  -webkit-box-orient: vertical;
}

5.2 字体属性

用于控制字体的显示样式，核心属性如下：

属性	核心取值	作用
`font-family`	字体名称列表	设置字体族，多个字体用逗号分隔，优先使用前面的字体
`font-size`	长度单位/百分比/关键字	设置字体大小
`font-weight`	normal/bold/100-900	设置字体粗细，400=normal，700=bold
`font-style`	normal/italic/oblique	设置字体样式（正常/斜体）
`font-variant`	normal/small-caps	设置小型大写字母

字体简写属性：必须按固定顺序书写，否则样式失效语法：font: font-style font-weight font-size/line-height font-family; 示例：font: italic 600 16px/1.5 "Microsoft YaHei", sans-serif; 注意：font-size和font-family是必填项，其他属性可省略。

5.3 背景属性

用于控制元素的背景样式，CSS3大幅增强了背景能力，核心属性如下：

属性	核心取值	作用
`background-color`	颜色值	设置背景颜色，默认transparent
`background-image`	url(图片路径)/渐变函数	设置背景图片，可设置多张
`background-repeat`	repeat/no-repeat/repeat-x/repeat-y	设置背景图片平铺方式
`background-position`	方位词(left/center/right/top/bottom)/长度单位/百分比	设置背景图片位置
`background-size`	长度单位/百分比/contain/cover	设置背景图片尺寸，CSS3新增
`background-attachment`	scroll/fixed/local	设置背景图片是否随页面滚动
`background-origin`	padding-box/border-box/content-box	设置背景图片的定位原点，CSS3新增
`background-clip`	border-box/padding-box/content-box/text	设置背景的裁剪区域，CSS3新增

背景简写属性：无严格顺序要求，推荐按以下顺序书写语法：background: color image repeat position/size attachment origin clip; 示例：background: #f5f5f5 url("bg.png") no-repeat center/cover fixed; 注意：position和size必须用/分隔，且必须按position/size顺序书写。

5.4 盒模型核心属性

CSS盒模型是布局的核心，所有HTML元素都可看作一个盒子，由内容content、内边距padding、边框border、外边距margin四部分组成。

5.4.1 盒模型类型（box-sizing）

box-sizing属性控制盒子宽高的计算方式，是解决布局错乱的核心属性。

属性值	计算规则	特点
`content-box`（默认）	标准盒模型，W3C规范元素总宽度 = width + padding + border + margin 元素总高度 = height + padding + border + margin	width/height仅设置内容区大小，padding/border会撑大盒子
`border-box`	怪异盒模型（IE盒模型）元素总宽度 = width + margin 元素总高度 = height + margin	width/height包含内容区+padding+border，padding/border不会撑大盒子，开发首选

示例：

        
        
        
    
/* 全局设置怪异盒模型，企业级开发标配 */
* {
  box-sizing: border-box;
}
.box {
  width: 200px;
  padding: 20px;
  border: 10px solid #000;
  /* border-box下，盒子实际内容宽度=200-20*2-10*2=140px，总宽度仍为200px */
}

5.4.2 内边距padding

用于设置元素内容与边框之间的间距，不可为负值。

语法：

        
        
        
    
/* 四值写法：上 右 下 左（顺时针） */
padding: 10px 20px 30px 40px;
/* 三值写法：上 左右 下 */
padding: 10px 20px 30px;
/* 两值写法：上下 左右 */
padding: 10px 20px;
/* 单值写法：四个方向统一 */
padding: 10px;
/* 单方向设置 */
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;

5.4.3 边框border

用于设置元素的边框，由边框宽度、边框样式、边框颜色三部分组成。

基础语法：

        
        
        
    
/* 简写：border: 宽度 样式 颜色; */
border: 1px solid #333;
/* 单方向设置 */
border-top: 2px dashed #f00;
border-right: 3px dotted #0f0;
border-bottom: 4px double #00f;
border-left: 1px solid #333;

核心边框样式：solid（实线）、dashed（虚线）、dotted（点线）、double（双线）、none（无边框）
CSS3边框扩展：
1. border-radius：圆角属性，语法同padding，支持百分比，border-radius: 50%可实现圆形
2. box-shadow：盒子阴影，语法：box-shadow: 水平偏移垂直偏移模糊半径扩散半径颜色 inset(内阴影);
  - 示例：box-shadow: 0 2px 8px rgba(0,0,0,0.1); 常用卡片阴影
3. border-image：边框图片，CSS3新增，用图片替代纯色边框

5.4.4 外边距margin

用于设置元素与元素之间的间距，可为负值。

语法：与padding完全一致，支持四值、三值、两值、单值写法，支持单方向设置margin-top/right/bottom/left
核心特性：
1. 水平居中：块级元素设置margin: 0 auto;可实现水平居中（前提：元素必须设置固定width）
2. 外边距合并（塌陷）：垂直方向的相邻外边距会发生合并，取最大值，分为两种场景：
  - 兄弟元素合并：上下两个兄弟元素，上元素的margin-bottom和下元素的margin-top合并，取最大值
  - 父子元素合并：父元素无border/padding/overflow:hidden，子元素的margin-top会传递给父元素，导致父元素整体下移
3. 合并解决方案：
  - 兄弟元素：仅给其中一个元素设置margin，避免垂直方向相邻margin
  - 父子元素：给父元素添加overflow: hidden、border-top、padding-top，或触发BFC

5.5 列表与表格属性

列表属性

属性	核心取值	作用
`list-style-type`	none/disc/circle/square/decimal等	设置列表项标记类型
`list-style-position`	inside/outside	设置列表标记的位置
`list-style-image`	url(图片路径)	用图片替换列表标记
`list-style`	简写属性	示例：`list-style: none;` 清除列表默认样式，开发最常用

表格属性

属性	核心取值	作用
`border-collapse`	collapse/separate	设置表格边框合并，`collapse`合并相邻边框，开发首选
`border-spacing`	长度单位	设置边框间距，仅separate模式生效
`caption-side`	top/bottom	设置表格标题位置
`empty-cells`	show/hide	设置空单元格是否显示边框
`table-layout`	auto/fixed	设置表格布局算法，fixed固定列宽，渲染更快

六、CSS布局核心语法

布局是CSS的核心应用场景，主流布局方式包括：常规流布局、浮动布局、定位布局、Flex弹性布局、Grid网格布局五大类。

6.1 常规流布局（文档流）

默认布局方式，元素按HTML书写顺序，从上到下、从左到右依次排列：

块级元素（div、p、h1-h6等）：独占一行，可设置width/height，默认宽度100%
行内元素（span、a、em等）：并排显示，不可设置width/height，宽高由内容撑开
行内块元素（img、input、button等）：并排显示，可设置width/height，不独占一行

控制元素显示类型的核心属性：display 核心取值：block（块级）、inline（行内）、inline-block（行内块）、none（隐藏元素，不占页面空间）

6.2 浮动布局（float）

通过float属性实现元素的横向排列，是早期多列布局的核心方案，目前多用于图文环绕场景。

核心取值：left（左浮动）、right（右浮动）、none（不浮动，默认）
核心特性：
1. 浮动元素会脱离文档流，不占常规流空间，父元素高度会塌陷（子元素全浮动时，父元素高度变为0）
2. 浮动元素之间横向并排，超出父元素宽度会自动换行
3. 浮动元素不会覆盖文字，实现文字环绕效果

核心问题：父元素高度塌陷，解决方案（清除浮动）

        
        
        
    
/* 方案1：单伪元素清除法（推荐） */
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
/* 方案2：overflow触发BFC */
.parent {
  overflow: hidden;
}

clear属性：用于清除浮动对当前元素的影响，取值left/right/both，both清除所有浮动影响。

6.3 定位布局（position）

通过position属性设置元素的定位方式，精准控制元素的位置，适用于弹窗、悬浮、固定导航等场景。

定位类型	取值	定位基准	是否脱离文档流	核心特点
静态定位	`static`	无，默认文档流	否	正常文档流，top/left等偏移属性无效
相对定位	`relative`	元素自身原来的位置	否	不脱离文档流，原来的位置保留，仅视觉偏移
绝对定位	`absolute`	最近的已定位（非static）祖先元素，无则相对于html根元素	是	脱离文档流，不占空间，宽高默认由内容撑开
固定定位	`fixed`	浏览器视口（viewport）	是	脱离文档流，页面滚动时位置固定不变，适用于固定导航、回到顶部按钮
粘性定位	`sticky`	视口+最近的滚动祖先元素	否	结合relative和fixed特性，滚动到指定位置时变为固定定位，适用于吸顶导航

核心偏移属性：top、right、bottom、left，设置元素相对于定位基准的偏移量，仅非static定位生效
层叠属性：z-index，设置元素的层叠顺序，数值越大越靠上，仅非static定位生效，默认值auto，可设负值

注意：z-index仅在同一个层叠上下文中比较，父元素z-index会限制子元素的层叠层级。

6.4 Flex弹性布局（CSS3）

Flex是一维布局模型，是目前移动端、PC端主流的布局方案，完美解决元素对齐、均分、自适应等问题，告别浮动和定位的繁琐。

6.4.1 核心概念

弹性容器：设置display: flex;的元素，称为flex容器
弹性项目：容器的直接子元素，自动成为flex项目
主轴：项目排列的方向，默认水平从左到右
交叉轴：与主轴垂直的方向，默认垂直从上到下

6.4.2 容器属性（父元素设置）

属性	核心取值	作用
`flex-direction`	row（默认）/row-reverse/column/column-reverse	设置主轴方向（水平/垂直）
`flex-wrap`	nowrap（默认）/wrap/wrap-reverse	设置项目是否换行，nowrap默认不换行，会压缩项目宽度
`flex-flow`	简写	`flex-flow: direction wrap;` 合并主轴方向和换行设置
`justify-content`	flex-start/flex-end/center/space-between/space-around/space-evenly	设置项目在主轴上的对齐方式
`align-items`	stretch（默认）/flex-start/flex-end/center/baseline	设置项目在交叉轴上的对齐方式
`align-content`	stretch/flex-start/flex-end/center/space-between/space-around	设置多行项目在交叉轴上的对齐方式，仅wrap换行生效

6.4.3 项目属性（子元素设置）

属性	核心取值	作用
`order`	数字，默认0	设置项目的排列顺序，数值越小越靠前，可设负值
`flex-grow`	数字，默认0	设置项目的放大比例，父容器有剩余空间时，按比例分配剩余空间
`flex-shrink`	数字，默认1	设置项目的缩小比例，父容器空间不足时，按比例缩小项目
`flex-basis`	长度单位，默认auto	设置项目在主轴上的初始大小，优先级高于width/height
`flex`	简写属性	`flex: grow shrink basis;`，默认值`0 1 auto`，常用`flex: 1;` 自适应占满剩余空间
`align-self`	auto/stretch/flex-start/flex-end/center/baseline	单独设置当前项目在交叉轴上的对齐方式，覆盖容器的align-items

常用示例：水平垂直居中

        
.parent {
  display: flex;
  justify-content: center; /* 主轴水平居中 */
  align-items: center; /* 交叉轴垂直居中 */
}

6.5 Grid网格布局（CSS3）

Grid是二维布局模型，同时控制行和列，是复杂多列布局的最优方案，适配大屏、复杂网格场景。

6.5.1 核心概念

网格容器：设置display: grid;的元素
网格项目：容器的直接子元素
网格线：划分网格的线，水平为行网格线，垂直为列网格线
网格轨道：两条相邻网格线之间的空间，即行和列
网格单元格：行和列交叉的区域，最小布局单位

6.5.2 容器属性（父元素设置）

属性	核心用法	作用
`grid-template-columns`	`grid-template-columns: 100px 1fr 2fr;`	设置列的数量和宽度，`fr`为剩余空间分配单位，支持`repeat(3, 1fr)`重复创建
`grid-template-rows`	`grid-template-rows: 80px 1fr 60px;`	设置行的数量和高度，用法同columns
`grid-template-areas`	命名网格区域	给网格区域命名，配合项目的grid-area使用，实现语义化布局
`gap` / `grid-gap`	`gap: 10px 20px;`	设置行间距和列间距，简写`gap: 10px` 行列间距统一
`justify-items`	start/end/center/stretch	设置项目在单元格内的水平对齐方式
`align-items`	start/end/center/stretch	设置项目在单元格内的垂直对齐方式
`place-items`	简写	`place-items: align justify;` 合并水平垂直对齐
`justify-content`	start/end/center/space-between等	设置整个网格在容器内的水平对齐方式（容器宽度大于网格总宽度时生效）
`align-content`	start/end/center/space-between等	设置整个网格在容器内的垂直对齐方式
`place-content`	简写	合并justify-content和align-content

6.5.3 项目属性（子元素设置）

属性	核心用法	作用
`grid-column`	`grid-column: 1 / 3;`	设置项目占据的列范围，基于网格线，`起始线 / 结束线`
`grid-row`	`grid-row: 2 / 4;`	设置项目占据的行范围，用法同column
`grid-area`	区域名称/网格线范围	配合grid-template-areas使用，指定项目所在的命名区域
`justify-self`	start/end/center/stretch	单独设置当前项目在单元格内的水平对齐方式
`align-self`	start/end/center/stretch	单独设置当前项目在单元格内的垂直对齐方式
`place-self`	简写	合并justify-self和align-self

常用示例：三栏布局

        
        
        
    
.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px; /* 左200px，中间自适应，右200px */
  grid-template-rows: 80px 1fr 60px; /* 头部80px，主体自适应，底部60px */
  grid-template-areas:
    "header header header"
    "aside main sidebar"
    "footer footer footer";
  gap: 10px;
}
.header { grid-area: header; }
.aside { grid-area: aside; }
.main { grid-area: main; }
.sidebar { grid-area: sidebar; }
.footer { grid-area: footer; }

七、CSS3高级特性

7.1 过渡transition

过渡用于实现元素属性变化时的平滑动画，是交互效果的核心，无需JavaScript即可实现简单动画。

核心语法：transition: 过渡属性过渡时长速度曲线延迟时间;

拆分属性：

属性	作用	示例
`transition-property`	指定需要过渡的CSS属性，`all`表示所有可过渡属性	`transition-property: width, background;`
`transition-duration`	过渡动画的时长，单位s/ms，必填项	`transition-duration: 0.3s;`
`transition-timing-function`	过渡的速度曲线	`ease`（默认，先快后慢）/`linear`（匀速）/`ease-in`（先慢后快）/`ease-out`（先快后慢）/`cubic-bezier()`自定义
`transition-delay`	过渡动画的延迟执行时间，单位s/ms	`transition-delay: 0.1s;`

示例：

        
        
        
    
.btn {
  width: 100px;
  height: 40px;
  background: #165DFF;
  /* 所有属性变化，0.3s平滑过渡，匀速 */
  transition: all 0.3s linear;
}
.btn:hover {
  background: #4080ff;
  transform: scale(1.05);
}

注意：不是所有CSS属性都支持过渡，仅数值型属性（宽高、颜色、位置、transform等）支持，display:none不支持过渡。

7.2 动画animation

animation实现复杂的关键帧动画，可控制动画的播放次数、方向、填充模式等，比transition更强大。

7.2.1 第一步：定义关键帧@keyframes

        
        
        
    
/* 语法：@keyframes 动画名称 { 关键帧节点 { 样式 } } */
@keyframes move {
  /* 起始状态，等价于0% */
  from {
    transform: translateX(0);
  }
  /* 结束状态，等价于100% */
  to {
    transform: translateX(200px);
  }
}
/* 多节点关键帧 */
@keyframes fadeInOut {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

7.2.2 第二步：调用动画属性

核心简写语法：animation: 动画名称时长速度曲线延迟播放次数播放方向填充模式播放状态;

拆分属性：

属性	作用	核心取值
`animation-name`	调用的@keyframes动画名称，必填	自定义动画名
`animation-duration`	动画单次播放时长，单位s/ms，必填	如1s、500ms
`animation-timing-function`	动画速度曲线	同transition，支持steps()帧动画
`animation-delay`	动画延迟播放时间	单位s/ms，可设负值
`animation-iteration-count`	动画播放次数	数字，默认1，`infinite`无限循环
`animation-direction`	动画播放方向	`normal`（默认）/`reverse`反向/`alternate`正反交替/`alternate-reverse`反正交替
`animation-fill-mode`	动画结束后的填充状态	`none`（默认，回到初始状态）/`forwards`（停在结束帧）/`backwards`（延迟时应用起始帧）/`both`（同时应用forwards和backwards）
`animation-play-state`	动画播放状态	`running`（默认，播放）/`paused`（暂停），可配合hover实现暂停

示例：无限循环呼吸动画

        
        
        
    
.breath {
  width: 100px;
  height: 100px;
  background: #165DFF;
  border-radius: 50%;
  animation: breath 2s ease-in-out infinite alternate;
}
@keyframes breath {
  from {
    transform: scale(0.8);
    opacity: 0.8;
  }
  to {
    transform: scale(1.2);
    opacity: 1;
  }
}

7.3 变形transform

transform用于对元素进行平移、旋转、缩放、倾斜等变形操作，配合过渡/动画实现炫酷效果，不会影响其他元素的布局。

核心语法：transform: 变形函数1 变形函数2 ...; 多个变形函数用空格分隔，执行顺序从右到左

2D变形核心函数：

函数	作用	示例
`translate(x, y)`	平移，沿X/Y轴移动元素	`translate(100px, 50px)` 右移100px，下移50px；`translateX(100px)` 仅X轴；`translateY(50px)` 仅Y轴
`rotate(角度)`	旋转，单位deg，正数顺时针，负数逆时针	`rotate(45deg)` 顺时针旋转45度
`scale(x, y)`	缩放，数值为缩放比例，1为默认	`scale(1.2)` 整体放大1.2倍；`scaleX(0.8)` 仅X轴缩放
`skew(x角度, y角度)`	倾斜，单位deg	`skew(10deg, 5deg)` X轴倾斜10度，Y轴倾斜5度

3D变形核心函数：

函数	作用
`translate3d(x, y, z)`	3D平移，Z轴平移需配合透视属性
`rotate3d(x, y, z, 角度)`	3D旋转，x/y/z为0-1的数值，代表旋转轴的向量
`scale3d(x, y, z)`	3D缩放

辅助属性：
1. transform-origin：设置变形的原点，默认元素中心50% 50%，支持方位词、长度单位、百分比
2. perspective：透视属性，设置3D透视距离，数值越小透视效果越强，给父元素设置
3. transform-style: preserve-3d：保留3D空间，给父元素设置，实现子元素的3D效果
4. backface-visibility: hidden：隐藏元素背面，3D旋转时生效

7.4 渐变gradient

渐变是CSS3提供的图像类型，可替代背景图片，实现平滑的颜色过渡效果，无需加载图片资源。

线性渐变：沿直线方向的颜色过渡

语法：linear-gradient(方向, 颜色1 位置, 颜色2 位置, ...)

示例：

        
/* 从左到右，红到蓝渐变 */
background: linear-gradient(to right, red, blue);
/* 45度角，多色渐变 */
background: linear-gradient(45deg, #ff0000 0%, #00ff00 50%, #0000ff 100%);

径向渐变：从中心点向外辐射的圆形/椭圆形渐变

语法：radial-gradient(形状大小 at 位置, 颜色1 位置, 颜色2 位置, ...)

示例：

        
/* 圆形径向渐变，中心红到边缘蓝 */
background: radial-gradient(circle, red, blue);
/* 椭圆渐变，指定位置 */
background: radial-gradient(ellipse at top left, #ff0000, #0000ff);

锥形渐变：围绕中心点旋转的锥形渐变，适用于饼图、色轮
- 语法：conic-gradient(起始角度 at 位置, 颜色1 角度, 颜色2 角度, ...)
- 示例：background: conic-gradient(red 0deg, yellow 120deg, blue 240deg, red 360deg);

7.5 CSS变量（自定义属性）

CSS变量允许开发者定义可复用的属性值，支持作用域、动态修改，是组件化、主题切换的核心方案。

定义语法：--变量名: 属性值; 变量名区分大小写，推荐小写+连字符
使用语法：var(--变量名, 备用值) 备用值为变量不存在时的兜底值
作用域：
1. 全局变量：定义在:root伪类中，整个文档都可使用
2. 局部变量：定义在选择器中，仅当前选择器及其后代元素可使用

示例：

        
        
        
    
/* 定义全局变量 */
:root {
  --primary-color: #165DFF;
  --font-size-base: 14px;
  --spacing-base: 16px;
}
/* 使用变量 */
.btn {
  background: var(--primary-color);
  font-size: var(--font-size-base);
  padding: calc(var(--spacing-base) / 2) var(--spacing-base);
}
/* 局部变量，仅.box内生效 */
.box {
  --box-bg: #f5f5f5;
  background: var(--box-bg);
}

优势：可通过JavaScript动态修改CSS变量，实现一键主题切换、动态样式调整，无需修改CSS文件。

八、CSS优先级与层叠规则

CSS全称层叠样式表，核心就是层叠规则，用于解决多个样式作用于同一个元素时的冲突问题，决定最终生效的样式。

8.1 优先级权重计算

样式优先级从高到低排序，权重越高越优先生效：

!important：最高优先级，强行覆盖所有样式，非必要绝对不滥用（会破坏整个优先级体系，难以维护）
行内样式：style属性内联样式，权重1000
ID选择器：权重0100
类选择器、伪类选择器、属性选择器：权重0010
标签选择器、伪元素选择器：权重0001
通配符选择器、继承样式*：权重0000
浏览器默认样式：最低优先级

权重计算规则：

权重按位叠加，不进位，10个类选择器权重也低于1个ID选择器

复合选择器的权重为所有组成选择器的权重之和

并集选择器的权重各自独立计算，互不影响

示例：#header .nav li 权重 = 0100 + 0010 + 0001 = 0111

8.2 层叠核心规则

权重不同：权重高的样式覆盖权重低的样式，无论书写顺序
权重相同：后面书写的样式覆盖前面的样式（就近原则）
继承样式：继承的样式优先级永远低于直接作用于元素的样式
!important例外：
- 只有!important能覆盖!important
- 行内!important优先级最高
- 不要用!important覆盖行内样式，会导致样式完全失控

8.3 CSS继承性

部分CSS属性会自动从父元素继承给子元素，无需重复设置，减少代码冗余。

可继承属性：字体相关（font-）、文本相关（color、text-、line-height、letter-spacing等）、列表相关（list-style-*）、表格相关属性
不可继承属性：布局相关（width、height、margin、padding、border）、背景相关、定位相关、浮动、overflow、transform等
强制继承：可通过inherit关键字强制子元素继承父元素的属性，示例：div { box-sizing: inherit; }

九、CSS响应式核心：媒体查询@media

媒体查询是响应式布局的核心，可根据设备的屏幕尺寸、分辨率、横竖屏等特性，应用不同的CSS样式，实现一套代码适配多终端。

9.1 基础语法

        
        
        
    
@media 媒体类型 and (媒体特性) and (媒体特性) {
  /* 满足条件时生效的CSS样式 */
  选择器 {
    属性: 值;
  }
}

9.2 核心组成

媒体类型：指定样式生效的设备类型
- all：所有设备，默认值
- screen：电脑、手机、平板等屏幕设备，最常用
- print：打印预览/打印设备

媒体特性：指定样式生效的条件，用括号包裹，多个条件用and连接

常用媒体特性	作用
`width` / `height`	视口宽度/高度
`max-width`	视口最大宽度，小于等于该值时生效
`min-width`	视口最小宽度，大于等于该值时生效
`max-height` / `min-height`	视口最大/最小高度
`orientation`	屏幕方向，`portrait`竖屏，`landscape`横屏
`device-pixel-ratio`	设备像素比，适配高清屏

9.3 常用示例

移动端适配（屏幕宽度≤768px时生效）

        
        
        
    
@media screen and (max-width: 768px) {
  body {
    font-size: 14px;
  }
  .container {
    width: 100%;
    padding: 0 10px;
  }
}

平板适配（768px≤屏幕宽度≤1200px时生效）

        
@media screen and (min-width: 768px) and (max-width: 1200px) {
  .container {
    width: 90%;
  }
}

PC大屏适配（屏幕宽度≥1200px时生效）

        
        
        
    
@media screen and (min-width: 1200px) {
  .container {
    width: 1200px;
    margin: 0 auto;
  }
}

9.4 移动端适配必备：viewport设置

媒体查询生效的前提是正确设置viewport元标签，在HTML的<head>中添加：

        
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

核心属性：width=device-width 让视口宽度等于设备屏幕宽度，initial-scale=1.0 初始缩放比例1:1

十、CSS常用@规则

@规则是CSS的特殊语句，用于定义特殊规则、导入资源、条件判断等，以@开头。

@规则	语法	核心作用
`@import`	`@import url("style.css") 媒体查询;`	导入外部CSS文件，必须写在CSS文件最顶部
`@font-face`	`@font-face { font-family: 自定义名称; src: url(字体路径); }`	自定义网页字体，实现特殊字体效果
`@keyframes`	见上文动画部分	定义CSS动画关键帧
`@media`	见上文媒体查询部分	条件判断，实现响应式布局
`@supports`	`@supports (属性: 值) { 样式 }`	特性查询，判断浏览器是否支持某个CSS属性，实现渐进增强
`@layer`	`@layer 层级名 { 样式 }`	定义级联层，手动控制样式的优先级，解决第三方样式冲突
`@namespace`	`@namespace url(XML命名空间);`	定义XML命名空间，用于XML/XHTML文档

@supports示例：判断浏览器是否支持flex布局，支持则应用flex样式
@supports (display: flex) {
  .box {
    display: flex;
  }
}

十一、CSS书写规范与兼容性

11.1 基础书写规范

命名规范：推荐使用小写字母+连字符-（kebab-case），如header-nav，避免驼峰、下划线、中文；复杂组件推荐BEM命名规范（块-元素-修饰符）
属性书写顺序：按功能优先级排序，提升可读性和渲染性能
- 第一优先级：布局相关（display、position、float、flex、grid等）
- 第二优先级：盒模型相关（width、height、margin、padding、border等）
- 第三优先级：文本字体相关（font、color、text-align、line-height等）
- 第四优先级：视觉装饰相关（background、box-shadow、border-radius、transform等）
- 第五优先级：动画过渡相关（transition、animation等）
- 第六优先级：其他（opacity、z-index、overflow等）
代码格式化：每个声明独占一行，冒号后加空格，分号结尾，选择器与{之间加空格，合理缩进

11.2 浏览器兼容性处理

浏览器私有前缀：针对部分CSS3新特性，添加浏览器厂商前缀，兼容旧版本浏览器
- -webkit-：Chrome、Safari、Edge、移动端webkit内核浏览器
- -moz-：Firefox火狐浏览器
- -ms-：IE浏览器、旧版Edge
- -o-：旧版Opera浏览器
- 示例：
```
.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}
```
渐进增强与优雅降级
- 渐进增强：先保证基础功能在低版本浏览器正常使用，再针对高版本浏览器添加新特性，提升体验
- 优雅降级：先基于高版本浏览器开发完整功能，再针对低版本浏览器做兼容处理，保证核心功能可用
兼容性查询：通过caniuse.com查询CSS属性的浏览器支持情况，针对性做兼容处理
自动化兼容：企业级开发中，通过PostCSS的autoprefixer插件自动添加浏览器前缀，无需手动书写

目录