CSS参考手册
本参考手册提供了完整的CSS属性列表、语法说明和实用示例，方便您快速查找和使用CSS属性。内容基于W3C最新CSS规范，涵盖了CSS Level 1至Level 4的所有核心属性。
布局属性
布局属性控制元素在页面上的排列方式，包括块级元素、行内元素、弹性盒子和网格布局等。
display
定义元素的显示类型，控制元素在文档流中的行为方式。
语法
display: block | inline | inline-block | flex | inline-flex | grid | inline-grid | none | contents | flow-root;| 值 | 描述 |
|---|---|
| block | 块级元素，占据父元素的整个宽度，前后有换行 |
| inline | 行内元素，只占据内容所需宽度，不强制换行 |
| inline-block | 行内块元素，像行内元素一样排列，但具有块级元素的特性 |
| flex | 块级弹性容器 |
| inline-flex | 行内弹性容器 |
| grid | 块级网格容器 |
| inline-grid | 行内网格容器 |
| none | 元素不显示，不占据文档流空间 |
| contents | 元素本身不生成盒子，但其子元素正常显示 |
| flow-root | 创建新的块级格式化上下文 |
inline-block
block
inline
position
定义元素的定位方式，控制元素在文档中的位置。
语法
position: static | relative | absolute | fixed | sticky;| 值 | 描述 |
|---|---|
| static | 默认值，正常文档流，不受top、right、bottom、left影响 |
| relative | 相对定位，相对于元素自身正常位置进行偏移 |
| absolute | 绝对定位，相对于最近的定位祖先元素进行定位 |
| fixed | 固定定位，相对于浏览器窗口进行定位 |
| sticky | 粘性定位，在滚动到特定阈值前为相对定位，之后为固定定位 |
float
定义元素浮动方式，使元素脱离正常文档流，向左或向右浮动。
语法
float: left | right | none | inline-start | inline-end;这是一个围绕浮动元素的文本。浮动元素会脱离正常文档流，其他内容会围绕它排列。这是一个较长的段落，用于展示文本如何围绕浮动元素排列。
clear
指定元素哪一侧不允许出现浮动元素，控制元素与浮动元素的相对位置。
语法
clear: none | left | right | both | inline-start | inline-end;visibility
定义元素是否可见，但不影响文档流布局。
语法
visibility: visible | hidden | collapse;| 值 | 描述 |
|---|---|
| visible | 元素可见（默认值） |
| hidden | 元素不可见，但仍占据布局空间 |
| collapse | 对于表格行、列等，元素不显示且不占据空间 |
文本属性
文本属性控制文本的显示方式，包括字体、大小、颜色、对齐方式等。
font-family
定义字体族，可以指定多个字体作为备选方案。
语法
font-family: "字体名称", 备用字体, 通用字体族;Arial, sans-serif
Times New Roman, serif
Courier New, monospace
Microsoft YaHei, sans-serif
font-size
定义字体大小，可以使用绝对单位、相对单位或关键字。
语法
font-size: 12px | 1em | 100% | small | medium | large | larger | smaller;12px 字体大小
16px 字体大小
24px 字体大小
1.5em 字体大小
font-weight
定义字体的粗细程度。
语法
font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;正常字体粗细
粗体
300 字体粗细
700 字体粗细
text-align
定义文本的水平对齐方式。
语法
text-align: left | right | center | justify | start | end;左对齐文本
居中对齐文本
右对齐文本
两端对齐文本。这是一个较长的段落，用于展示两端对齐的效果。两端对齐会使文本在左右两边都对齐，通过在单词之间添加额外的空间来实现。
line-height
定义行高，控制文本行之间的垂直间距。
语法
line-height: normal | 数字 | 长度 | 百分比;行高为1.2的文本。这是第一行。
这是第二行。
行高为2的文本。这是第一行。
这是第二行。
text-decoration
定义文本的装饰线，如下划线、删除线等。
语法
text-decoration: none | underline | overline | line-through | underline overline;无装饰文本
下划线文本
上划线文本
删除线文本
颜色和背景
颜色和背景属性控制元素的颜色和背景效果，包括背景颜色、背景图像、渐变等。
color
定义文本颜色，可以使用各种颜色表示方法。
语法
color: 颜色值;红色文本
绿色文本
蓝色文本
紫色文本
使用CSS变量
background-color
定义元素的背景颜色。
语法
background-color: 颜色值 | transparent;background-image
定义元素的背景图像，可以是图片或渐变。
语法
background-image: url() | linear-gradient() | radial-gradient() | conic-gradient();background-size
定义背景图像的尺寸。
语法
background-size: auto | cover | contain | 长度 | 百分比;| 值 | 描述 |
|---|---|
| auto | 保持图像的原始尺寸 |
| cover | 缩放图像以完全覆盖背景区域，可能裁剪部分图像 |
| contain | 缩放图像以完全适应背景区域，保持宽高比 |
| 长度值 | 指定背景图像的宽度和高度 |
| 百分比 | 相对于背景定位区域的百分比 |
background-repeat
定义背景图像的重复方式。
语法
background-repeat: repeat | repeat-x | repeat-y | no-repeat | space | round;| 值 | 描述 |
|---|---|
| repeat | 在水平和垂直方向重复图像 |
| repeat-x | 只在水平方向重复图像 |
| repeat-y | 只在垂直方向重复图像 |
| no-repeat | 不重复图像 |
| space | 图像在背景区域中均匀分布，不裁剪 |
| round | 图像在背景区域中缩放以填满空间 |
盒模型属性
盒模型属性控制元素的尺寸、边距、内边距和边框，定义了元素在页面上的占用空间。
width / height
定义元素的宽度和高度。
语法
width: 长度 | 百分比 | auto | max-content | min-content | fit-content;
height: 长度 | 百分比 | auto | max-content | min-content | fit-content;| 值 | 描述 |
|---|---|
| 长度 | 使用px、em、rem等单位指定具体尺寸 |
| 百分比 | 相对于父元素的百分比 |
| auto | 浏览器自动计算尺寸 |
| max-content | 元素内容的最大宽度 |
| min-content | 元素内容的最小宽度 |
| fit-content | 适合内容的最小宽度，但不超过可用空间 |
margin
定义元素的外边距，控制元素与其他元素之间的间距。
语法
margin: 长度 | 百分比 | auto;padding
定义元素的内边距，控制元素内容与边框之间的间距。
语法
padding: 长度 | 百分比;
有内边距的内容
border
定义元素的边框，包括宽度、样式和颜色。
语法
border: 宽度 样式 颜色;box-sizing
定义盒模型的计算方式，控制元素的宽度和高度的计算方式。
语法
box-sizing: content-box | border-box;| 值 | 描述 |
|---|---|
| content-box | 默认值，宽度和高度只包括内容，不包括内边距和边框 |
| border-box | 宽度和高度包括内容、内边距和边框 |
Flexbox属性
Flexbox属性用于创建灵活的一维布局，可以轻松地在不同屏幕尺寸上实现响应式设计。
flex-direction
定义主轴方向，控制Flex项目在Flex容器中的排列方向。
语法
flex-direction: row | row-reverse | column | column-reverse;| 值 | 描述 |
|---|---|
| row | 主轴为水平方向，从左到右排列 |
| row-reverse | 主轴为水平方向，从右到左排列 |
| column | 主轴为垂直方向，从上到下排列 |
| column-reverse | 主轴为垂直方向，从下到上排列 |
justify-content
定义Flex项目在主轴上的对齐方式。
语法
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;| 值 | 描述 |
|---|---|
| flex-start | 项目向主轴起点对齐 |
| flex-end | 项目向主轴终点对齐 |
| center | 项目在主轴居中 |
| space-between | 项目均匀分布，第一个在起点，最后一个在终点 |
| space-around | 项目均匀分布，每个项目两侧有相等的空间 |
| space-evenly | 项目均匀分布，每个项目之间的空间相等 |
align-items
定义Flex项目在交叉轴上的对齐方式。
语法
align-items: stretch | flex-start | flex-end | center | baseline;| 值 | 描述 |
|---|---|
| stretch | 默认值，项目拉伸以填满容器高度 |
| flex-start | 项目向交叉轴起点对齐 |
| flex-end | 项目向交叉轴终点对齐 |
| center | 项目在交叉轴居中 |
| baseline | 项目按基线对齐 |
flex-wrap
定义Flex项目是否换行。
语法
flex-wrap: nowrap | wrap | wrap-reverse;| 值 | 描述 |
|---|---|
| nowrap | 默认值，项目不换行 |
| wrap | 项目在需要时换行 |
| wrap-reverse | 项目在需要时换行，但方向相反 |
Grid布局属性
Grid布局属性用于创建二维网格布局，可以同时在行和列上控制元素的排列。
grid-template-columns
定义网格容器的列轨道大小和结构。
语法
grid-template-columns: none | track-list;1
2
3
grid-template-rows
定义网格容器的行轨道大小和结构。
语法
grid-template-rows: none | track-list;grid-gap / gap
定义网格行和列之间的间距。
语法
gap: 行间距 列间距;grid-area
定义网格项目在网格中的位置和大小。
语法
grid-area: 行起始 / 列起始 / 行结束 / 列结束;动画和过渡
动画和过渡属性用于创建平滑的视觉效果和交互反馈。
transition
定义元素从一种样式逐渐变为另一种样式的过渡效果。
语法
transition: 属性 持续时间 缓动函数 延迟时间;| 属性 | 描述 |
|---|---|
| transition-property | 指定应用过渡效果的CSS属性 |
| transition-duration | 指定过渡效果持续的时间 |
| transition-timing-function | 指定过渡效果的速度曲线 |
| transition-delay | 指定过渡效果开始前的延迟时间 |
animation
定义动画效果，可以创建更复杂的动画序列。
语法
animation: 名称 持续时间 缓动函数 延迟时间 迭代次数 方向 填充模式 播放状态;| 属性 | 描述 |
|---|---|
| animation-name | 指定@keyframes动画的名称 |
| animation-duration | 指定动画完成一个周期所需的时间 |
| animation-timing-function | 指定动画的速度曲线 |
| animation-delay | 指定动画开始前的延迟时间 |
| animation-iteration-count | 指定动画播放的次数 |
| animation-direction | 指定动画是否反向播放 |
| animation-fill-mode | 指定动画执行前后如何应用样式 |
| animation-play-state | 指定动画是运行还是暂停 |
变换
变换属性用于对元素进行旋转、缩放、倾斜或平移等变换操作。
transform
对元素应用2D或3D变换。
语法
transform: none | transform-function;| 函数 | 描述 |
|---|---|
| translate(x, y) | 在2D平面上移动元素 |
| translateX(x) | 沿X轴移动元素 |
| translateY(y) | 沿Y轴移动元素 |
| scale(x, y) | 缩放元素的尺寸 |
| scaleX(x) | 沿X轴缩放元素 |
| scaleY(y) | 沿Y轴缩放元素 |
| rotate(angle) | 旋转元素 |
| skew(x-angle, y-angle) | 倾斜元素 |
| matrix(a, b, c, d, tx, ty) | 使用6个值的矩阵定义2D变换 |
transform-origin
定义变换的原点。
语法
transform-origin: x-axis y-axis z-axis;其他常用属性
这些属性提供了额外的样式控制功能，包括视觉效果、交互行为和内容布局等。
cursor
opacity
visibility
z-index
overflow
box-shadow
text-shadow
transform
filter
clip-path
object-fit
pointer-events
user-select
resize
outline
clip
list-style
table-layout
border-collapse
word-wrap
word-break
white-space
text-overflow
vertical-align
direction
unicode-bidi
writing-mode
text-orientation
text-transform
letter-spacing
word-spacing
text-indent
quotes
CSS单位参考
CSS提供了多种单位用于定义尺寸、间距和其他数值属性。
| 单位 | 描述 | 示例 |
|---|---|---|
| px | 像素，绝对单位 | 10px |
| % | 百分比，相对于父元素 | 50% |
| em | 相对于父元素字体大小 | 1.5em |
| rem | 相对于根元素字体大小 | 1.5rem |
| vw | 视口宽度的百分比 | 50vw |
| vh | 视口高度的百分比 | 50vh |
| vmin | 视口较小尺寸的百分比 | 50vmin |
| vmax | 视口较大尺寸的百分比 | 50vmax |
| ch | 相对于"0"字符的宽度 | 20ch |
| ex | 相对于当前字体的x高度 | 2ex |
| cm | 厘米，绝对单位 | 2cm |
| mm | 毫米，绝对单位 | 10mm |
| in | 英寸，绝对单位 | 1in |
| pt | 点，绝对单位(1pt = 1/72in) | 12pt |
| pc | 派卡，绝对单位(1pc = 12pt) | 1pc |
CSS选择器参考
CSS选择器用于选择要应用样式的HTML元素。
| 选择器 | 描述 | 示例 |
|---|---|---|
| * | 所有元素 | * { margin: 0; } |
| element | 元素选择器 | p { color: red; } |
| .class | 类选择器 | .container { width: 100%; } |
| #id | ID选择器 | #header { height: 60px; } |
| [attribute] | 属性选择器 | [type="text"] { border: 1px solid; } |
| :hover | 伪类 | a:hover { color: blue; } |
| ::before | 伪元素 | p::before { content: "→"; } |
| element1 > element2 | 子元素选择器 | div > p { color: blue; } |
| element1 + element2 | 相邻兄弟选择器 | h1 + p { margin-top: 0; } |
| element1 ~ element2 | 通用兄弟选择器 | h1 ~ p { color: red; } |
| :first-child | 第一个子元素 | p:first-child { font-weight: bold; } |
| :last-child | 最后一个子元素 | p:last-child { margin-bottom: 0; } |
| :nth-child(n) | 第n个子元素 | li:nth-child(odd) { background: #eee; } |
| :not(selector) | 否定伪类 | :not(p) { color: blue; } |
CSS函数参考
CSS函数用于计算值、应用变换、创建颜色等。
| 函数 | 描述 | 示例 |
|---|---|---|
| calc() | 计算值 | width: calc(100% - 20px); |
| var() | 使用变量 | color: var(--primary-color); |
| rgb() / rgba() | RGB颜色 | color: rgb(255, 0, 0); |
| hsl() / hsla() | HSL颜色 | color: hsl(120, 100%, 50%); |
| url() | 引用资源 | background: url(image.jpg); |
| linear-gradient() | 线性渐变 | background: linear-gradient(red, blue); |
| radial-gradient() | 径向渐变 | background: radial-gradient(circle, red, blue); |
| conic-gradient() | 锥形渐变 | background: conic-gradient(red, yellow, green); |
| attr() | 获取属性值 | content: attr(data-label); |
| counter() | 使用计数器 | content: counter(section); |
| min() | 最小值 | width: min(50%, 300px); |
| max() | 最大值 | width: max(50%, 300px); |
| clamp() | 钳制值 | font-size: clamp(1rem, 2.5vw, 2rem); |