本文按「常用场景分类」整理CSS核心属性，涵盖布局、盒模型、视觉、文本、动画等高频类别，每个属性标注「语法+说明+简单示例」，兼顾全面性和实操性，适合新手查阅、老手备查，所有属性均兼容现代浏览器（Chrome、Edge、Firefox、Safari）。
说明：示例中单位默认使用 px（像素），实际开发可根据需求替换为 em、rem、% 等，特殊属性会单独标注兼容要求。
一、布局类属性（核心，控制元素排列）
用于控制元素在页面中的定位、排列方式，是布局的核心，搭配使用可实现各类页面结构。
1. 定位相关（position 系列）
- position：控制元素定位模式 语法：position: static | relative | absolute | fixed | sticky; 说明：static（默认，正常文档流）、relative（相对定位）、absolute（绝对定位）、fixed（固定定位）、sticky（粘性定位） 示例：position: relative; /* 作为绝对定位的参考容器 */
- top/right/bottom/left：配合position控制元素具体位置 语法：top: 数值; / right: 数值; / bottom: 数值; / left: 数值; 说明：仅对 position 为 relative/absolute/fixed/sticky 的元素有效，正数对应方向偏移，负数反向偏移 示例：top: 20px; left: 30px; /* 相对于参考物向下20px、向右30px */
- z-index：控制元素层叠顺序 语法：z-index: 数值;（正整数、负整数、0） 说明：数值越大，元素层级越高，仅对脱离文档流（position非static）的元素有效，默认值0 示例：z-index: 999; /* 确保元素在最上层，不被覆盖 */
2. Flex 弹性布局（高频）
- display: flex：开启弹性布局 语法：display: flex; / display: inline-flex; 说明：给父容器设置，子元素变为flex项目，默认横向排列；inline-flex不独占一行 示例：.container { display: flex; } /* 父容器开启flex布局 */
- flex-direction：控制主轴方向 语法：flex-direction: row | column | row-reverse | column-reverse; 说明：row（默认，水平从左到右）、column（垂直从上到下），reverse表示反向 示例：flex-direction: column; /* 子元素垂直排列 */
- justify-content：主轴对齐方式 语法：justify-content: flex-start | center | flex-end | space-between | space-around; 说明：控制flex项目在主轴上的对齐和分布 示例：justify-content: space-between; /* 两端对齐，项目间距相等 */
- align-items：交叉轴对齐方式 语法：align-items: stretch | center | flex-start | flex-end; 说明：控制flex项目在交叉轴上的对齐，stretch（默认，拉伸至父容器高度） 示例：align-items: center; /* 子元素垂直居中 */
- flex-wrap：控制项目换行 语法：flex-wrap: nowrap | wrap | wrap-reverse; 说明：nowrap（默认，不换行，压缩项目）、wrap（自动换行） 示例：flex-wrap: wrap; /* 超出父容器宽度时自动换行 */
- flex：子项目占比（简写） 语法：flex: 数字; / flex: flex-grow flex-shrink flex-basis; 说明：简写时数字表示flex-grow（占比），默认flex: 0 1 auto; 示例：.item { flex: 1; } /* 子项目平均分配剩余空间 */
- align-self：单个子项目交叉轴对齐（覆盖父容器align-items） 语法：align-self: stretch | center | flex-start | flex-end; 示例：.item-special { align-self: flex-end; } /* 单个项目靠下对齐 */
3. 浮动相关（float，传统布局）
- float：让元素浮动，脱离正常文档流 语法：float: left | right | none; 说明：left（向左浮动）、right（向右浮动）、none（默认，不浮动），浮动后会影响后续元素布局 示例：float: left; /* 元素向左浮动 */
- clear：清除浮动影响 语法：clear: left | right | both | none; 说明：both（清除左右两侧浮动），常用于解决高度塌陷问题 示例：clear: both; /* 清除浮动，避免被浮动元素覆盖 */
4. 其他布局属性
- display：控制元素显示模式（核心基础） 语法：display: block | inline | inline-block | none | flex | grid; 说明：block（块级元素，独占一行）、inline（行内元素，不独占一行）、inline-block（兼具两者）、none（隐藏元素） 示例：display: block; /* 行内元素转为块级元素 */
- visibility：控制元素可见性 语法：visibility: visible | hidden; 说明：hidden（隐藏元素，但保留元素位置），区别于display: none（隐藏且不占位置） 示例：visibility: hidden; /* 隐藏元素，保留占位 */
- overflow：控制元素内容溢出时的显示方式 语法：overflow: visible | hidden | scroll | auto; 说明：visible（默认，溢出显示）、hidden（溢出隐藏）、scroll（强制显示滚动条）、auto（自动显示滚动条） 示例：overflow: hidden; /* 隐藏溢出内容，同时可触发BFC解决高度塌陷 */
二、盒模型类属性（控制元素尺寸和间距）
CSS盒模型是元素的基础结构（内容区、内边距、边框、外边距），此类属性控制元素的尺寸、间距和边框样式。
1. 尺寸相关
- width：元素宽度 语法：width: 数值 | auto | 100%; 说明：auto（默认，自动适应内容），可设置固定值或百分比 示例：width: 300px; / width: 50%;
- height：元素高度 语法：height: 数值 | auto; 说明：auto（默认，由内容撑开），不可设置百分比（除非父元素有固定高度） 示例：height: 200px;
- min-width/max-width：元素最小/最大宽度 语法：min-width: 数值; / max-width: 数值; 说明：限制元素宽度的范围，避免被压缩或拉伸过度 示例：min-width: 200px; /* 元素最小宽度不小于200px */
- min-height/max-height：元素最小/最大高度 语法：min-height: 数值; / max-height: 数值; 示例：min-height: 100px; /* 元素最小高度不小于100px */
2. 内边距（padding）
控制元素内容区与边框之间的距离，不影响外部布局，会增加元素总尺寸（除非设置box-sizing: border-box）。
- padding：简写属性，控制四个方向内边距 语法：padding: 上 右 下 左;（顺时针）/ padding: 上下 左右; / padding: 统一值; 示例：padding: 10px 20px; /* 上下内边距10px，左右20px */
- padding-top/padding-right/padding-bottom/padding-left：单独控制单个方向内边距 示例：padding-left: 15px; /* 仅左侧内边距15px */
3. 外边距（margin）
控制元素与其他元素之间的距离，影响外部布局，可能出现margin重叠（垂直方向）。
- margin：简写属性，控制四个方向外边距 语法：margin: 上 右 下 左; / margin: 上下 左右; / margin: 统一值; 示例：margin: 20px auto; /* 上下外边距20px，左右自动（水平居中） */
- margin-top/margin-right/margin-bottom/margin-left：单独控制单个方向外边距 示例：margin-bottom: 10px; /* 仅底部外边距10px */
4. 边框（border）
- border：简写属性，控制边框样式、宽度、颜色 语法：border: 宽度 样式 颜色; 说明：样式（必填）：solid（实线）、dashed（虚线）、dotted（点线）、none（无边框） 示例：border: 1px solid #ccc; /* 1px 灰色实线边框 */
- border-width：边框宽度（单独控制） 语法：border-width: 上 右 下 左; / 统一值; 示例：border-width: 2px;
- border-style：边框样式（单独控制） 语法：border-style: solid | dashed | dotted | none; 示例：border-style: dashed; /* 虚线边框 */
- border-color：边框颜色（单独控制） 语法：border-color: 颜色值; 示例：border-color: #00aaff;
- border-radius：边框圆角 语法：border-radius: 数值 | 50%;（50%可实现圆形/椭圆形） 示例：border-radius: 8px; / border-radius: 50%;
- border-top/border-right/border-bottom/border-left：单独控制单个方向边框 示例：border-left: 3px solid #ff7d00; /* 仅左侧边框 */
5. 盒模型模式（box-sizing）
- box-sizing：控制元素总尺寸的计算方式 语法：box-sizing: content-box | border-box; 说明：content-box（默认，总尺寸=width+padding+border）；border-box（总尺寸=width，padding和border包含在width内） 示例：box-sizing: border-box; /* 避免padding和border增加元素总宽度 */
三、视觉类属性（控制元素外观、颜色、阴影）
用于美化元素外观，包括背景、颜色、阴影、透明度等，提升页面视觉效果。
1. 背景相关（background）
- background-color：元素背景色 语法：background-color: 颜色值 | transparent;（transparent透明，默认） 示例：background-color: #f5f5f5; / background-color: rgba(0,0,0,0.1);
- background-image：元素背景图片 语法：background-image: url("图片路径"); 示例：background-image: url("./img/bg.jpg");
- background-repeat：背景图片重复方式 语法：background-repeat: repeat | no-repeat | repeat-x | repeat-y; 说明：repeat（默认，重复填充）、no-repeat（不重复）、repeat-x（水平重复） 示例：background-repeat: no-repeat; /* 背景图不重复 */
- background-position：背景图片位置 语法：background-position: 水平位置 垂直位置;（可用像素、百分比、center/left/right/top/bottom） 示例：background-position: center center; /* 背景图居中显示 */
- background-size：背景图片尺寸 语法：background-size: 宽度 高度 | cover | contain; 说明：cover（覆盖整个容器，可能裁剪）、contain（完整显示图片，可能留白） 示例：background-size: cover; /* 背景图覆盖容器 */
- background：简写属性，整合所有背景相关属性 语法：background: 颜色 图片 重复 位置 尺寸; 示例：background: #f5f5f5 url("./img/bg.jpg") no-repeat center cover;
2. 颜色与透明度
- color：文本颜色 语法：color: 颜色值; 示例：color: #333; / color: #ff4444;
- opacity：元素整体透明度 语法：opacity: 0~1;（0完全透明，1不透明） 说明：会影响元素内所有内容（包括文本、子元素） 示例：opacity: 0.5; /* 元素半透明 */
- rgba() ：颜色+透明度（仅影响当前颜色，不影响子元素） 语法：rgba(红, 绿, 蓝, 透明度);（红/绿/蓝：0
255，透明度：01） 示例：background-color: rgba(0, 170, 255, 0.3); /* 蓝色半透明背景 */
3. 阴影相关（shadow）
- box-shadow：元素盒子阴影（常用） 语法：box-shadow: 水平偏移 垂直偏移 模糊度 扩散半径 颜色 inset; 说明：inset（可选，内阴影，默认外阴影）；模糊度和扩散半径可选（默认0） 示例：box-shadow: 0 2px 12px rgba(0,0,0,0.1); /* 柔和外阴影 */
- text-shadow：文字阴影 语法：text-shadow: 水平偏移 垂直偏移 模糊度 颜色; 示例：text-shadow: 2px 2px 4px #333; /* 文字阴影，增强立体感 */
4. 其他视觉属性
- cursor：鼠标悬浮在元素上时的指针样式 语法：cursor: default | pointer | text | move | help; 示例：cursor: pointer; /* 鼠标悬浮时显示手型（按钮、链接常用） */
- filter：元素滤镜（美化、特效） 语法：filter: blur(px) | brightness(%) | contrast(%) | grayscale(%); 示例：filter: blur(3px); /* 元素模糊效果 */
四、文本类属性（控制文本样式、排版）
用于控制文本的字体、大小、对齐、间距等，优化文本可读性和排版效果。
1. 字体相关（font）
- font-size：文本大小（核心） 语法：font-size: 数值px | em | rem; 示例：font-size: 16px; /* 常用默认字体大小 */
- font-weight：文本粗细 语法：font-weight: normal | bold | 100~900;（normal=400，bold=700） 示例：font-weight: bold; /* 粗体文本 */
- font-family：文本字体 语法：font-family: "字体名称", 备用字体; 示例：font-family: "Microsoft YaHei", sans-serif; /* 微软雅黑，无衬线字体备用 */
- font-style：文本样式（斜体/正常） 语法：font-style: normal | italic; 示例：font-style: italic; /* 斜体文本 */
- font：简写属性，整合字体相关属性 语法：font: 样式 粗细 大小 字体; 示例：font: normal bold 16px "Microsoft YaHei";
2. 文本对齐与排版
- text-align：文本水平对齐 语法：text-align: left | center | right | justify; 说明：justify（两端对齐，仅对多行文本有效） 示例：text-align: center; /* 文本水平居中 */
- text-align-last：最后一行文本对齐（配合justify使用） 语法：text-align-last: left | center | right | justify; 示例：text-align: justify; text-align-last: center; /* 多行两端对齐，最后一行居中 */
- line-height：文本行高（控制行间距，常用垂直居中） 语法：line-height: 数值 | 倍数;（倍数相对于font-size） 示例：line-height: 2; /* 行高为字体大小的2倍 */ / line-height: 30px;
- vertical-align：行内元素/inline-block元素垂直对齐 语法：vertical-align: top | middle | bottom | baseline; 示例：vertical-align: middle; /* 图片与文本垂直居中对齐 */
3. 文本装饰与间距
- text-decoration：文本装饰（下划线、删除线等） 语法：text-decoration: none | underline | line-through | overline; 说明：none（取消装饰，常用于清除链接下划线） 示例：text-decoration: none; /* 清除链接下划线 */
- text-indent：文本首行缩进（常用段落开头空两格） 语法：text-indent: 数值px | 2em;（2em=两个字符宽度） 示例：text-indent: 2em; /* 首行缩进两格 */
- letter-spacing：字符间距（控制每个字符之间的距离） 语法：letter-spacing: 数值px; 示例：letter-spacing: 2px; /* 字符间距2px */
- word-spacing：单词间距（仅对英文单词有效） 语法：word-spacing: 数值px; 示例：word-spacing: 5px; /* 英文单词间距5px */
4. 文本换行与溢出
- white-space：控制文本换行 语法：white-space: normal | nowrap | pre; 说明：normal（默认，自动换行）、nowrap（不换行）、pre（保留空格和换行） 示例：white-space: nowrap; /* 文本不换行 */
- text-overflow：文本溢出时的显示方式（需配合white-space: nowrap和overflow: hidden使用） 语法：text-overflow: clip | ellipsis; 说明：ellipsis（溢出显示省略号，常用）、clip（溢出裁剪） 示例：text-overflow: ellipsis; overflow: hidden; white-space: nowrap; /* 单行文本溢出显示省略号 */
五、动画与过渡类属性（控制元素动态效果）
用于实现元素的过渡、动画效果，提升页面交互体验，常用在hover、点击等场景。
1. 过渡属性（transition）
控制元素属性变化的过渡效果，让变化更平滑（如hover时的颜色、尺寸变化）。
- transition：简写属性，整合过渡相关属性 语法：transition: 属性名 时长 过渡曲线 延迟时间; 说明：属性名（all表示所有属性）、时长（必填，如0.3s）、过渡曲线（ease默认，匀速linear） 示例：transition: all 0.3s ease; /* 所有属性变化，0.3秒平滑过渡 */
- transition-property：指定过渡的属性 示例：transition-property: background-color, width; /* 仅背景色和宽度过渡 */
- transition-duration：过渡时长 示例：transition-duration: 0.5s; /* 过渡时长0.5秒 */
2. 动画属性（animation）
实现更复杂的动画效果，需配合@keyframes定义动画关键帧。
- animation：简写属性，整合动画相关属性 语法：animation: 动画名称 时长 动画曲线 延迟 播放次数 播放方向; 说明：播放次数（infinite表示无限次）、播放方向（normal默认，reverse反向） 示例：animation: move 1s linear infinite; /* 动画名称move，1秒匀速，无限播放 */
- @keyframes：定义动画关键帧（核心） 语法：@keyframes 动画名称 { 0% { 初始状态 } 100% { 结束状态 } } 示例： @keyframes move { 0% { transform: translateX(0); } 100% { transform: translateX(100px); } }
- animation-name：指定动画名称（对应@keyframes定义的名称） 示例：animation-name: move;
- animation-duration：动画时长 示例：animation-duration: 1s;
- animation-iteration-count：动画播放次数 示例：animation-iteration-count: infinite; /* 无限播放 */
3. 变形属性（transform）
用于元素的旋转、缩放、平移、倾斜，常配合过渡/动画使用。
- transform：整合变形效果 语法：transform: translate() | scale() | rotate() | skew(); 示例：transform: translate(20px, 30px); /* 向右平移20px，向下平移30px */
- translate(x, y) ：平移（x水平，y垂直） 示例：transform: translate(50%, 50%); /* 水平、垂直各平移50% */
- scale(x, y) ：缩放（x水平缩放，y垂直缩放，1为原尺寸） 示例：transform: scale(1.1); /* 整体放大1.1倍 */
- rotate(deg) ：旋转（deg为角度，正数顺时针，负数逆时针） 示例：transform: rotate(30deg); /* 顺时针旋转30度 */
- skew(deg, deg) ：倾斜（x、y方向倾斜角度） 示例：transform: skew(10deg, 0); /* 水平方向倾斜10度 */
六、其他常用属性（补充）
- list-style：列表样式（针对ul/ol） 语法：list-style: none | disc | circle | square; 说明：none（取消列表符号，常用）、disc（实心圆点，默认） 示例：list-style: none; /* 取消列表符号 */
- list-style-position：列表符号位置 语法：list-style-position: inside | outside; 示例：list-style-position: inside; /* 列表符号在列表项内部 */
- user-select：控制用户是否可选中文本 语法：user-select: none | auto; 示例：user-select: none; /* 禁止用户选中文本 */
七、使用说明（新手必看）
- 属性优先级：内联样式（style属性）> 内部样式（style标签）> 外部样式（link引入），!important可强制提升单个属性优先级（谨慎使用）。
- 单位说明：px（固定像素，适合固定尺寸）、em（相对于父元素字体大小）、rem（相对于根元素html字体大小，推荐响应式布局）、%（相对于父元素对应属性的百分比）。
- 兼容说明：本文所有属性均兼容现代浏览器，若需兼容IE11及以下，需注意：flex布局部分属性需加前缀（-ms-）、transform需加前缀、animation需加前缀。
- 简写属性规则：多个属性值按固定顺序书写，可省略部分可选值，未省略的按顺序解析。
