CSS 快速参考
CSS Quick Reference

泓熠 (HY)

Copyright © 2026, 泓熠 (HY).
Permission is granted to copy, distribute and/or modify this document under the terms of the GNU Free Documentation License, Version 1.3 or any later version published by the Free Software Foundation; with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts.

文件名与注释

源码文件扩展名.css


/* 注释内容，独行注释、行内注释、行尾注释、多行注释、都可用 */

样式表位置



<html>
	<head>
		<meta>
		<title>这是标题</title>
		<link rel="stylesheet" href="./example.css"> <!-- 声明外部样式位置，规范写在 head 之中 -->
		<style> <!-- 内部样式 -->
			h1 {
				color: green;
				font-size: 40px;
			}
			img {
				width: 200px;
			}
		</style>
	</head>
	<body>
		<h1 style="color: red; font-size: 60px">这是一级标题</h1> <!-- 行内样式(内联样式) -->
		<h2>这是二级标题</h2>
		<img src="./figure/example.png />
	</bady>
</html>

优先级

选中相同的元素为相同的属性设置不同的值时，才会产生冲突需要看优先级

并集选择器的优先级需分开单独看，相当于写了多个选择器

优先级总排序

先看 !important
再看是否为行内样式
再看 id 选择器个数
再看类、伪类、属性选择器个数
再看元素与伪元素选择器个数
再看后来居上
再看浏览器默认样式
再看近处的继承
再看远处的继承

!important 写法


h1 {
	color: green !important;
}

样式表优先级

行内样式 > 内部样式 = 外部样式

选择器优先级

id 选择器 > 类选择器 > 元素选择器 > 统配选择器
选择器优先级权重格式：（a, b, c）
a: id 选择器个数
b: 类、伪类、属性选择器个数
c: 元素、伪元素选择器个数

选择器

通配选择器（*）


* {} /* 选中所有元素 */

元素选择器


h2 {} /* 所有h2元素 */

类选择器（.）


.first {} /* 所有first类的元素 */
.second {} /* 所有second类的元素 */


<p id="num1" class="first"></p> /* 类为 first，id 为num1 */
<span id="num2" class="first second"></span> /* 类为 first 和 second，id 为 num2 */

id 选择器（#）


#num1 {} /* id为num1 */

交集选择器（.）


p.second {} /* 类为second的p */
.first.second {} /* 类为sceond且类为.first */

并集选择器（,）


#num1,
.first,
.second {} /* 类为first与类为second */

后代选择器（Space）


ul li span {} /* 作为ul的后代的li的后代的span */
.second ul {} /* 作为second类的后代的ul */
.second p.first {} /* 作为second类的后代的first类的p */

子代选择器（>）


ul>li {} /* 作为ul的儿子的li */
.first>div {} /* 作为first类元素的儿子的div */

兄弟选择器（+ / ~）


div+p {} /* 名为p且有紧邻哥哥名为div元素 */
div~p {} /* 名为p且有哥哥名为div的元素 */

属性选择器（[]）


[title] {} /* 具有title属性的元素 */
[title="text"] {} /* 具有title属性且值为"text" */
[title^="t"] {} /* 具有title属性且值为"t"开头 */
[title$="t"] {} /* 具有title属性且值为"t"结尾 */
[title*="text"] {} /* 具有title属性且值包含"test" */

动态伪类选择器（;）


input:focus {} 具有焦点的input元素
a:link {} 没有访问过的a元素
a:visited {} 访问过的a元素
a:hover {} 鼠标悬浮状态的a元素
a:active {} 鼠标按住不松激活状态的a元素
/* 状态变化顺序:
link 未曾点击
link hover 未曾点击，鼠标悬浮
link hover active 未曾点击，鼠标悬浮，按下激活
visited 曾被点击
visited hover 曾被点击，鼠标悬浮
visited hover active 曾被点击，鼠标悬浮，按下激活
四种伪类按 lvha 顺序写，避免后来居上覆盖 */

结构伪类选择器（:）


div>p:first-child {} /* 作为 div 的长子的 p */
div p:first-child {} /* div 的后代且作为某人长子的 p */
div>p:last-child {} /* 作为 div 小儿的 p */
div>p:nth-child(3) {} /* 作为 div 第三子的 p */
div>p:nth-child(2n) {} /* 作为 div 第偶数子的p */
div>p:nth-child(even) {} /* 作为 div 第偶数子的 p */
div>p:nth-child(odd) {} /* 作为 div 第奇数子的 p */
div>p:nth-child(-n+5) {} /* 作为 div 第前五子的 p，n 为自然数，且表达式形式为 an+b */
div>p:first-of-type {} /* div的第一个 p 儿子 */
div>p:last-of-type {} /* div的最后一个 p 儿子 */
div>p:nth-last-child(3) {} /* 作为 div 倒数第三儿子的p */
div>p:nth-last-of-type(3) {} /* 作为 div 倒数第三个p儿子 */
span:only-child {} /* 作为某人独生子的 span */
span:only-of-type {} /* 无同类型兄弟的 span */
:root {} /* html根元素 */
div:empty {} /* 无后代的div */

否定伪类选择器（:）


div>p:no(.fail) {} 作为div儿子的p且排除fail类的

UI 伪类选择器（:）


input:checked {} 勾选的复选框 checkbox 或单选 radio 按钮
input:disabled {} 选中禁用的 input 元素
input:enabled {} 选中可用的 input 元素

目标伪类选择器（:）


div:target {} /* #one 和 id 对上，有 id 的元素被选中 */

语言伪类选择器（:）


:lang(en) {}
div:lang(en) {}
div[lang="en"] {}

伪元素选择器（::）


div::first-letter {} /* div 中的第一个字母 */
div::first-line {} /* div 中的第一行文字 */
div::selection {} /* 被鼠标选中的文字 */
input::placeholder {} /* input 输入框中的提示文字 */
p::before {content:"$"} /* 在 p 元素开头添加文字 */
p::after {content:"$"} /* 在 p 元素结尾添加文字 */

继承

能继承的属性大都是与盒子无关的，如字体属性、文本属性（除了 vertical-align 不能继承），文字颜色等
不能继承的属性大都是与盒子相关的，如边框、背景、内边距、外边距、宽高、溢出方式等

颜色

颜色名


transparent /* 透明 */
red /* 红色 */
darkred /* 深红色 */
orange /* 橙色 */
chocolate /* 巧克力色 */

RGB/RGBA


rgb(255, 255, 255)
rgb(100%, 100%, 100%)
rgba(255, 0, 0, 0.5)
rgba(255, 0, 0, .7)
rgba(255, 0, 0, 100%)

四个数值从左至右依次为：红色成分、绿色成分、蓝色成分、不透明度

HEX/HEXA


#ffffff
#87ceebff
#87ceebff88
#fcd8

四个数值从左至右依次为：红色成分、绿色成分、蓝色成分、不透明度

HSL/HSLA


hsl(0deg, 100%, 50%)
hsl(60, 100%, 50%)
hsla(60, 100%, 50%, 0.7)
hsla(60, 100%, 50%, 7)
hsla(60, 100%, 50%, 40%)

四个数值从左至右依次为、色环角、饱和度（艳丽度）、亮度、不透明度

字体属性


span {
	font-size: 20px; /* Chrome浏览器默认接受的最小字号 12 px，在设置>外观>自定义字体>最小字号。若未设置此属性。Chrome 浏览器默认 16px，设置外观>自定义字体>字号。不同浏览器的默认字号与默认最小字号不一样 */
	font-family: "微软雅黑"; /* 字体族最好写英文名例如 Microsoft YaHei */
	font-family: "华文彩云", "华文琥珀", "Microsoft YaHei", sans-serif; /* sans-serif 随便找一个已安装的非衬线字体，serif 随便找一个衬线字体 */
	font-style:nomal;  /* 无风格 */
	font-style:italic;  /* 意大利斜体，字体设计者设计的斜体 */
	font-style:oblique;  /* 机械倾斜，强制斜体 */
	font-weight:lighter; /* 正常 */
	font-weight:normal; /* 细体 */
	font-weight:bold; /* 粗体 */
	font-weight:bolder; /* 更粗体，取决于字体设计者是否设计，多数字体无此字重 */
	font-weight:300; /* 整百数，100-300 等于 lighter，400-500 等于 normal，600-1000 等于 bold */
	font: bold italic 100px "Microsoft YaHei",sans-serif; /* 字体大小，字体族必须写；字体族必须最后一位，字体大小必须倒数第二位 */
}

衬线字体: 顿笔感强, 像毛笔与钢笔写的
非衬线字体: 顿笔感弱, 像古老打字机打印的

文本属性


div {
	color: red; /* 字体颜色 */
	letter-spacing: 20px; /* 字符间距，不写则 Chrome 默认为 0 px */
	word-spacing: 30px; /* 单词间距，用空格区分单词，不写则 Chrome 默认为 0 px */
	text-decoration:overline dotted; /* 上划虚线 */
	text-decoration:underline wavy red; /* 下划红色波浪线 */
	text-decoration:line-through; /* 删除线 */
	text-decoration:none; /* 无线 */
	text-indent: 120px; /* 首行缩进 120 像素 */
	text-align:left; /* 左对齐 */
	text-align:center; /* 居中 */
	text-align:right; /* 右对齐 */
	line-height:normal; /* 自动调整行高 */
	line-height:40px; /* 行高 40 px */
	line-height:1.667; /* 行高为字号 1.667 倍 */
	line-height:150%; /* 行高为字号的 150% */
	height: 100px; /* 若没有设置，则为行高乘以行数 */
	vertical-align:baseline; /* 基线对齐 */ /* 该属性仅能用于行内元素也可用于表格中的单元格 */
	vertical-align:middle; /* 元素正中央与父元素 x 字母中心点对齐 */
	vertical-align:top; /* 顶部对齐 */
	vertical-align:bottom; /* 底部对齐 */
}

不同字符的字体设计框高度都一样，但宽度可能不一样，在字体设计时会调整
根据字体设计师的设计，字体笔画可以超出字体设计框
font-size 指定字体设计框的高度; 宽度则按比例自动变化
基线紧贴小写字母 x 的下边缘
上下相邻的两行之间的行高条与行高条紧贴
字体设计框在行高条中垂直居中，行高条的位置决定了字体设计框的位置
同行文字设置不同行高，整行显示高度由最大行高决定，同行文字基线对齐
鼠标左键按住拖动选中文字选中的范围是行高与字体设计框两者中最大者
元素高度为行高

列表属性


ul { /* 以下属性 ul、ol、li 都可用 */
	list-style-type:none; /* 没有列表符号 */
	list-style-type:decimal; /* 列表符号为阿拉伯数字 */
	list-style-type:square; /* 列表符号为黑色实心方块 */
	list-style-type:lower-roman; /* 列表符号为小写罗马数字 */
	list-style-type:upper-reman; /* 列表符号为大写罗马数字 */
	list-style-posion: inside ; /* 列表符号在背景色里 */
					 : outside; /* 列表符号在背景色外 */
	list-style-image: url(./icon/example.gif); /* 列表符号为指定图片 */
	list-style: square inside; /* 复合属性，无数量顺序要求 */
}

表格属性


table {
	border-width: 2px;
	border-color: red;
	border-style: solid;
	border: 2px red solid; /* boder属性与盒模型border属性写法完全一致 */
	width: 500px; /* 表格整体宽度 */
}
td,
th {
	border:2px orange solid;
	width: 50px; /* 单列宽度 */
	height: 70px; /* 单行宽度 */
}
table { /* 以下属性只能用于表格元素
	table-layout: auto; /* 自动调整列宽(默认值) */
	table-layout: fixed; /* 所有列均宽 */
	border-spacint: 10px; /* 单元格间距 */
	border-collapse:separate; /* 不合并单元格边框(默认值) */
	border-collapse:collapse; /* 合并单元格边框，一旦合并则间距白写 */
	empty-cells:show; /* 显示空单元格(默认值) */
	empty-cells:hide; /* 隐藏空单元格 */
	caption-side:top; /* 表格标题在表格上方(默认值) */
	caption-side:bottom; /* 表格标题在表格下方 */
}

背景属性


div {
	background-color: transparent; /* 背景颜色透明(默认值) */
	background-color: url(./example.jpg); /* 背景图片 */
	background-repeat: repeat; /* 背景图片平铺会重复 */
	background-repeat: norepeat; /* 背景图片平铺不会重复 */
	background-repeat: repeat-x; /* 背景图片平铺只在水平方向会重复 */
	background-repeat: repeat-x; /* 背景图片平铺只在竖直方向会重复 */
	background-position: left top; /* 从左上角开始平铺(默认值) */
	background-position: center; /* 从水平与垂直的正中间开始平铺 */
	background-position: left; /* 从左侧正中间开始平铺 */
	background-position: 10px 20px; /* 相对于左上角偏右 10 px，偏下 20 px 开始平铺 */
	background-position: 100px; /* 相对于左上角偏下 100 px，竖直方位在正中间开始平铺 */
	background: skyblue url(./example.jpg) /* 复合属性 */
}

鼠标属性


div {
	cursor:pointer; /* 点击形状 */
	cursor:move; /* 拖动形状 */
	cursor:wait; /* 加载形状 */
	cursor:cosshair; /* 十字架形状 */
	cursor:help; /* 帮助形状 */ /* 更多鼠标形状参考MDN */
	cursor:url("./arrow.png"),pointer; /* 自定义图片 */
}

长度单位


mm /* 毫米 */
cm /* 厘米 */
px /* 像素 */
em /* 相对于当前元素 font-size 的倍数 */
rem /* 相对于 html 根元素的 font-size 的倍数 */
% /* 相对于父元素同名属性的百分比 */
vw /* 相对于视口宽度的百分比 */
vh /* 相对于视口高度的百分比 */
vmax /* 相对于视口宽高最大者的百分比 */
vmin /* 相对于视口宽高最小者的百分比 */

元素的显示模式

块元素独占一行，默认宽度撑满父元素，默认高度由内容撑开，可手动用 CSS 设置宽高，常见块元素如下:
1. 主体结构标签 <html><body>
2. 排版标签 <h1><h6><hr><p><pre><div>
3. 列表标签 <ul><ol><li><dl><dt><dd>
4. 表格标签 <table><thead><tbody><tfoot><tr><caption>
5. <form><option>
行内元素不独占行，若内容过多导致一行容不下则另起一行，默认宽度和高度都由内容撑开，无法用 CSS 手动设置宽高，常见行内元素如下:
1. 文本标签<br><em><strong><sup><sub><del><ins>
2. <a><label>
行内块元素不独占行，若内容过多一行容不下则另起一行，默认宽度和高度都由内容撑开，可以用 CSS 手动设置宽高
1. 图片<img>
2. 单元格<td><th>
3. 表单控件<input><textarea><select><button>
4. 框架标签<iframe>

行内元素、行内块元素调整位置的时候相当于文字
行内元素、行内块元素之间的若干的换行与空格都会解析成一个空格


div {
	display: block; /* 修改显示模式为块元素 */
	display: inline; /* 修改显示模式为行内元素 */
	display: inline-block; /* 修改显示模式为行内块元素 */
	display: none; /* 隐藏元素，不占位 */
	visibliity: show; /* 正常显示内容，默认值 */
	visibliity: hidden; /* 隐藏内容，灵魂仍然占位 */
}

盒子模型

所有元素都是一个盒子，由内而外依次为:

内容区（content）
内边距 / 补白（padding）
边框（border）
外边距（margin），即盒子与父元素内容区域边界的距离

子元素存在的空间基础是父元素的内容区


div {
	width: 400px; /* 内容区宽度 */
	min-width: 300px; /* 内容区最小宽度 */
	max-width: 500px; /* 内容区最大宽度 */
	height: 400px; /* 内容区高度 */
	min-height: 300px; /* 内容区最小高度 */
	max-height: 500px; /* 内容区最大高度 */
	padding-left: 20px; /* padding 左侧宽度 */
	padding-top: 30px; /* padding 上侧宽度 */
	padding-right: 40px; /* padding 右侧宽度 */
	padding-bottom: 50px; /* padding 下侧宽度 */
	padding: 100px; /* padding 上下左右宽度 100 px */
	padding: 10px 20px; /* padding 上下宽度 10 px，左右宽度 20 px */
	padding: 10px 20px 30px; /* padding 上侧宽度 10 px，左右宽度 20 px，下侧宽度 30 px */
	padding: 10px 20px 30px 40px; /* padding 上侧宽度 10 px，右侧宽度 20 px，下侧宽度 30 px，左侧宽度 40 px */
	border-left-width : 10px; /* border 左侧宽度 */
	border-top-color : 10px; /* border 上侧颜色 */
	border-right-style: 10px; /* border 右侧风格，style 取值有 solid 单实线，dashed 虚线，dotted 点线，double 双实线 */
	border-bottom: 50px; /* border 下侧复合样式 */
	border: 10px 20px 30px 40px; /* 复合样式，共 4×5=20 种写法，复合样式宽度写法和 padding 相同 */
	/* margin宽度值可以为负数，其他与 padding 写法完全相同 */
	margin-left: auto; /* 离左边尽量远，左右 margin 都为 auto 时则居中 */
	/* 行内元素设置上下 margin 无效，行内元素设置上下 padding 会遮挡重叠，凸出部分不占位 */
}

margin 塌陷与合并

margin 塌陷

长子的上 margin 与小儿的下 margin 会被父元素抢走
给父元素添加属性 overflow: hidden 不让其抢子元素的 margin

margin 合并

哥哥的下侧 margin 和紧邻弟弟的上侧 margin 会合并取最大值

处理内容溢出


overflow: hidden /* 溢出的内容隐藏 */
overflow: visable /* 溢出的内容显示 */
overflow: scrool /* 一直有滚动条 */
overflow: auto /* 如果溢出会有滚动条 */
overflow-x: /* 分别调节横向与纵向的溢出，参数与上述一致 */
overflow-y: /* x和y不可以一个 hidden 一个 visable */

浮动


div {
	float: left; /* 飘在父元素的最左侧 */
	float: right; /* 飘在父元素的最右侧 */
}
div {
	clear: left; /* 消除左浮动哥哥产生的影响 */
	clear: right; /* 消除右浮动哥哥产生的影响 */
	clear: both; /* 消除浮动哥哥产生的影响 */
}

浮动后脱离文档流
浮动后上天，不在地面占位，但地面文字躲开阴影
浮动后宽高默认都由内容撑开，浮动后不存在 margin 塌陷与 margin 合并

定位

相对定位


div {
	position: relative; /* 开启相对定位 */
	left: 240px; /* 相对定位后相对原来位置向右移动 */
	left: -10px;
	right: 100px /* right 不能和 left 同时设置，否则 right 失效 */
	top: 240 /* 相对定位相对原来的位置向下移动 */
	bottom: 100px /* bottom 不能和 top 同时设置，否则 bottom 失效 */
}

开启定位的元素覆盖没有开启定位的元素，后写定位的元素覆盖先写定位的元素

相对定位不脱离文档流

绝对定位


div{
	position: absulute;
	top: 100px;
	left: 50px;
}

绝对定位的元素脱离了文档流。
没脱流元素的父元素是其包含块。
脱流元素的第一个开定位祖先是其包含块，如果都没有开定位则为 body。
绝对定位的参考位置是其包含块即第一个开定位元素。
尽量不要给绝对定位的元素加 margin。
浮动不能和绝对定位或固定定位一起用，否则浮动失效。

固定定位


div {
	position: fixed;
	top: 0;
	left: 0;
}

固定定位参考的整个视口

粘性定位


div {
	position: sticky;
	top: 0px;
}

参考点离它最近的拥有滚动属性的祖先元素，如果都没有滚动条则为 body，父容器在滚动视口消失时，被粘的元素页同步消失.

覆盖层级

开启定位的元素有 z-index 属性，确定覆盖层级关系，数值越大表明覆盖能力越强:


div {
	z-index: auto;
	z-index: 0;
	z-index: 50;
}

私有前缀


-webkit- /* Chrome&Safari&Edge */
-moz- /* Firefox */
-ms- /* IE */
-o- /* Opera */

可以在 CanIuse 上查询各属性的兼容性情况

CSS 快速参考 CSS Quick Reference