3
社区成员
发帖
与我相关
我的任务
分享CSS核心属性信息表
| 属性名 | 取值及含义（基础取值+扩展取值，含义精准说明） | 多场景使用示例（覆盖常见用法） | 属性定义（明确功能与分类） | 属性作用（全面说明核心功能） | 备注（补充使用规范、兼容性、注意事项） |
| align-items | 一、基础取值（弹性容器子元素交叉轴对齐方式）：1. stretch：默认值，子元素沿交叉轴拉伸填充容器（子元素无固定高度/宽度时生效）；2. flex-start：子元素沿交叉轴起始端对齐；3. flex-end：子元素沿交叉轴结束端对齐；4. center：子元素沿交叉轴居中对齐；5. baseline：子元素沿文字基线对齐；二、扩展取值：1. inherit：继承父元素的align-items属性值；2. initial：恢复默认值stretch；三、生效前提：仅作用于flex容器（display: flex/inline-flex） | 1. 垂直居中对齐：.button-container { display: flex; justify-content: center; align-items: center; height: 100px; }2. 交叉轴起始端对齐：.card-list { display: flex; align-items: flex-start; gap: 20px; }3. 文字基线对齐：.text-container { display: flex; align-items: baseline; gap: 10px; }.text-container h3 { font-size: 24px; }.text-container p { font-size: 16px; }4. 拉伸填充对齐：.nav-item { display: flex; align-items: stretch; height: 60px; }.nav-item a { flex: 1; display: flex; align-items: center; } | CSS弹性布局核心属性，属于弹性容器对齐控制类属性，用于定义flex容器内子元素在交叉轴方向上的对齐方式，与justify-content配合实现子元素的全方位对齐，是弹性布局的核心对齐属性之一 | 1. 实现交叉轴精准对齐：快速实现子元素在交叉轴的居中、起始端、结束端等对齐效果，解决垂直居中难等传统布局问题；2. 统一子元素对齐基准：通过baseline取值实现不同尺寸文字的基线对齐，提升文本布局的美观度；3. 实现拉伸填充效果：通过stretch取值让子元素自动填充交叉轴方向的容器空间，简化布局；4. 配合主轴对齐：与justify-content配合，实现子元素在容器内的水平+垂直全方位对齐 | 1. 兼容性：IE10+支持，需添加-ms-前缀（如-ms-flex-align）；现代浏览器全兼容；2. 交叉轴依赖：交叉轴方向与主轴垂直（主轴水平时交叉轴垂直，主轴垂直时交叉轴水平）；3. stretch生效条件：子元素在交叉轴方向无固定尺寸（如主轴水平时子元素无固定高度），否则stretch不生效；4. 与align-self区别：align-items作用于flex容器，控制所有子元素的交叉轴对齐；align-self作用于单个子元素，覆盖容器的align-items设置；5. 继承性：具有继承性；6. 性能影响：无明显性能影响；7. 注意事项：当子元素设置了margin: auto时，可能会覆盖align-items的对齐效果 |
| animation | 一、复合属性拆解（需配合@keyframes定义动画关键帧）：1. animation-name：动画名称，对应@keyframes定义的动画名；2. animation-duration：动画持续时间（s/ms，必须设置，否则动画无效）；3. animation-timing-function：动画速度曲线（ease、linear、ease-in等，同transition-timing-function）；4. animation-delay：动画延迟时间（s/ms，默认0s）；5. animation-iteration-count：动画播放次数（number数字、infinite无限循环）；6. animation-direction：动画播放方向（normal正向、reverse反向、alternate正反交替、alternate-reverse反正交替）；7. animation-fill-mode：动画结束后状态（none默认、forwards保持最后一帧、backwards保持第一帧、both兼具forwards和backwards）；8. animation-play-state：动画播放状态（running播放、paused暂停）；二、扩展取值：1. inherit：继承父元素的animation属性值；2. initial：恢复默认值none | 1. 基础旋转动画：@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }.loading { width: 40px; height: 40px; border: 4px solid #eee; border-top: 4px solid #007bff; border-radius: 50%; animation: spin 1s linear infinite; }2. 淡入淡出动画：@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }.fade-in-element { animation: fadeIn 0.5s ease forwards; opacity: 0; }3. 移动动画：@keyframes move { 0% { transform: translateX(0); } 50% { transform: translateX(200px); } 100% { transform: translateX(0); } }.moving-box { width: 50px; height: 50px; background: #dc3545; animation: move 3s ease-in-out infinite alternate; }4. 暂停动画：.animation-box { animation: spin 2s linear infinite; }.animation-box:hover { animation-play-state: paused; } | CSS动画体系核心属性，属于关键帧动画复合属性，通过配合@keyframes定义的动画关键帧，控制元素的复杂动画效果，可实现平移、旋转、淡入淡出等多种动态效果 | 1. 实现复杂动画：突破transition的局限，实现多关键帧、循环、反向等复杂动画效果（如加载动画、滚动动画）；2. 增强页面生动性：通过动画效果吸引用户注意力，提升页面的交互质感和视觉体验；3. 传递状态信息：用加载动画提示用户等待，用淡入动画提示元素加载完成；4. 控制动画细节：精准控制动画的播放时长、速度曲线、播放次数、方向等，实现多样化的动画效果 | 1. 兼容性：IE10+支持animation属性；Chrome 43+、Firefox 16+支持；部分旧浏览器需添加-webkit-前缀；@keyframes关键帧也需对应添加前缀（如@-webkit-keyframes）；2. 动画生效前提：必须定义@keyframes关键帧（指定动画的开始和结束状态，或中间关键状态），且设置animation-duration（动画持续时间），否则动画无法触发；3. 性能优化：优先使用transform和opacity属性实现动画（硬件加速优化好），避免使用width、height、margin等会触发重排的属性；复杂动画可设置will-change: transform, opacity提前告知浏览器优化；4. 动画暂停与恢复：通过animation-play-state: paused/running控制动画的暂停与恢复，常用于hover暂停动画的场景；5. 复合属性书写规则：推荐顺序为animation: name duration timing-function delay iteration-count direction fill-mode play-state; 可简写为animation: spin 1s linear infinite;（默认normal、none、running）；6. 多个动画：多个动画用逗号分隔，可分别设置不同的动画参数；7. 性能影响：过多复杂动画会占用大量浏览器资源，导致页面卡顿，建议合理控制动画数量和复杂度 |
| animation-duration | 一、基础取值（关键帧动画持续时间）：1. 时间值：单位为s（秒）或ms（毫秒），必选值（如animation-duration: 1s; 持续1秒）；2. 多个时间值：为多个动画名称分别指定时长（与animation-name顺序对应，如animation-duration: 0.5s, 1.2s;）；二、扩展取值：1. inherit：继承父元素的animation-duration属性值；2. initial：恢复默认值0s（默认无动画效果）；三、生效前提：需配合animation-name（指定动画）使用，单独设置无效 | 1. 基础旋转动画：@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }.loading-icon { animation-name: spin; animation-duration: 1.5s; animation-iteration-count: infinite; animation-timing-function: linear; }2. 多动画差异化时长：@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }@keyframes slideUp { from { transform: translateY(20px); } to { transform: translateY(0); } }.box { animation-name: fadeIn, slideUp; animation-duration: 0.5s, 0.8s; }3. 快速反馈动画：@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }.error-input { animation-name: shake; animation-duration: 0.3s; }4. 长时循环动画：@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }.balloon { animation: float 3s ease-in-out infinite; } | CSS关键帧动画核心子属性，属于动画时长控制类属性，用于定义关键帧动画从开始到结束的总持续时间，决定动画的快慢节奏，是触发关键帧动画的必选属性，为animation复合属性的组成部分 | 1. 控制动画节奏：通过设置不同时长，适配不同动画场景（如快速反馈动画用短时长，平缓浮动动画用长时长）；2. 实现多动画协同：为同时执行的多个动画设置不同时长，打造层次丰富的动画效果；3. 定义循环周期：配合animation-iteration-count: infinite，通过时长定义循环动画的周期（如1s一圈的旋转动画）；4. 保障动画流畅性：合理的时长设置可避免动画过于急促或拖沓，提升用户视觉体验 | 1. 兼容性：与animation-name一致，IE10+支持，现代浏览器全兼容，部分旧浏览器需添加前缀；2. 默认值陷阱：默认值为0s，即使设置了animation-name，也不会有动画效果，必须显式设置时长；3. 时长单位：支持s和ms，推荐使用s，便于直观控制（如0.3s、2s）；4. 多动画对应规则：多个时长值需与animation-name的动画顺序一一对应；值的数量少于动画数量时，剩余动画复用最后一个时长值；5. 与过渡时长区别：animation-duration是关键帧动画的总时长，可循环执行；transition-duration是过渡动画的时长，仅在属性变化时触发一次；6. 继承性：具有继承性；7. 性能影响：时长过长可能导致动画冗长，过短可能让动画不完整；关键帧中使用transform、opacity时，无论时长如何，性能均优于使用重排属性；8. 最佳实践：日常动画时长推荐0.2s-2s，循环动画时长推荐1s-3s，需根据动画复杂度和交互目的合理调整 |
| animation-iteration-count | 一、基础取值（关键帧动画循环次数）：1. 数值：正整数（如animation-iteration-count: 3; 循环3次）、小数（如0.5; 执行半次动画）；2. infinite：无限循环（常用值，如animation-iteration-count: infinite; 持续执行动画）；二、扩展取值：1. inherit：继承父元素的animation-iteration-count属性值；2. initial：恢复默认值1（默认执行1次）；三、生效前提：需配合animation-name和animation-duration使用，否则无意义 | 1. 有限循环动画：@keyframes bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }.button-click { animation: bounce 0.5s ease 2; /* 循环2次 */ }2. 无限旋转动画：@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }.loading { animation: spin 1s linear infinite; }3. 半次动画效果：@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }.half-animation { animation: fadeOut 1s ease 0.5; /* 执行半次，停在半透明状态 */ }4. 多动画不同循环次数：@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }.box { animation-name: fadeIn, float; animation-duration: 0.5s, 2s; animation-iteration-count: 1, infinite; } | CSS关键帧动画核心子属性，属于动画循环控制类属性，用于定义关键帧动画的执行次数，可控制动画执行有限次或无限次，是实现循环动画效果的关键属性，为animation复合属性的组成部分 | 1. 控制动画执行次数：根据需求设置有限循环（如点击反馈动画执行2次）或无限循环（如加载动画持续执行）；2. 实现特殊动画效果：通过小数次数（如0.5）让动画停在中间状态，打造独特视觉效果；3. 多动画差异化循环：为同时执行的多个动画设置不同循环次数，实现主次分明的动画效果；4. 适配交互场景：有限循环适配一次性交互反馈（如点击、提交），无限循环适配持续状态提示（如加载、等待） | 1. 兼容性：IE10+支持，现代浏览器全兼容，部分旧浏览器需添加前缀；2. 数值规则：取值为正整数或小数，不支持负数（负数视为无效，按默认值1处理）；小数次数表示执行动画的比例（如0.5表示执行从开始到50%进度的动画）；3. 与动画方向配合：当设置animation-direction: alternate（反向循环）时，偶数次循环会反向执行动画，奇数次数正向执行，无限循环时则正向-反向交替进行；4. 多动画对应：多个循环次数值需与animation-name的动画顺序一一对应；5. 继承性：具有继承性；6. 性能影响：无限循环动画需确保关键帧中使用高效属性（transform、opacity），避免使用重排属性，否则长期执行可能导致性能下降；7. 注意事项：无限循环动画需提供停止机制（如通过JS修改animation-iteration-count为1或none），避免不必要的性能消耗；有限循环动画结束后，元素会回到初始状态（如需保持结束状态，需设置animation-fill-mode: forwards） |
| animation-name | 一、基础取值（指定关键帧动画名称）：1. none：默认值，不应用任何关键帧动画；2. 自定义动画名称：与@keyframes定义的动画名称一致（如animation-name: fadeIn; 对应@keyframes fadeIn { ... }）；二、扩展取值：1. inherit：继承父元素的animation-name属性值；2. initial：恢复默认值none；三、生效前提：必须与@keyframes定义的动画名称匹配，且需配合animation-duration设置时长，否则动画不生效 | 1. 基础淡入动画：@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }.modal { animation-name: fadeIn; animation-duration: 0.5s; }2. 缩放动画：@keyframes scaleUp { 0% { transform: scale(0.8); } 100% { transform: scale(1); } }.card { animation-name: scaleUp; animation-duration: 0.3s; }3. 暂停动画：.loading { animation-name: spin; animation-duration: 1s; animation-iteration-count: infinite; }.loading.paused { animation-name: none; }4. 复合动画简写：.banner { animation: slide 2s ease infinite alternate; /* 隐含animation-name: slide */ } | CSS关键帧动画核心子属性，属于动画名称指定类属性，用于关联元素与通过@keyframes定义的关键帧动画，是触发关键帧动画的核心关联属性，为animation复合属性的组成部分 | 1. 关联关键帧动画：将元素与自定义的关键帧动画绑定，触发动画执行；2. 控制动画开关：通过切换为none或具体动画名称，实现动画的启动与暂停；3. 支持多动画组合：可指定多个动画名称（用逗号分隔），让元素同时执行多个关键帧动画；4. 区分不同动画场景：为不同元素或不同状态指定不同动画名称，实现多样化的动画效果 | 1. 兼容性：IE10+支持，现代浏览器全兼容，部分旧浏览器需添加-ms-、-webkit-前缀（如-webkit-animation-name）；2. 名称匹配规则：animation-name的取值必须与@keyframes定义的动画名称完全一致（区分大小写），否则无法触发动画；3. 必配属性：必须配合animation-duration（时长）使用，默认时长0s，无动画效果；同时可配合animation-iteration-count（循环次数）、animation-direction（方向）等属性优化动画；4. 多动画执行：指定多个动画名称时，用逗号分隔，每个动画可单独设置时长、速度曲线等（用逗号对应顺序）；5. 继承性：具有继承性，但子元素通常单独指定动画名称；6. 性能影响：动画名称本身无性能影响，性能消耗取决于关键帧中定义的属性（transform、opacity性能最优，width、height等重排属性性能较差）；7. 注意事项：避免为过多元素同时应用复杂动画，以免导致页面卡顿；动画名称建议使用语义化命名（如fadeIn、slideUp），提升代码可读性 |
| aspect-ratio | 一、基础取值（元素宽高比）：1. auto：默认值，元素宽高比由内容或宽高属性决定，无固定宽高比；2. 数值：直接指定宽高比（如aspect-ratio: 16/9; 宽高比16:9；aspect-ratio: 1; 正方形，宽高比1:1）；3. 百分比值：基于父元素宽度与高度的比例（较少使用，兼容性较差）；二、扩展取值：1. inherit：继承父元素的aspect-ratio属性值；2. initial：恢复默认值auto；三、生效规则：当元素设置了宽度或高度中的一个，另一个会根据宽高比自动计算；若同时设置宽高，宽高比可能被覆盖（取决于box-sizing） | 1. 视频容器16:9比例：.video-container { width: 100%; aspect-ratio: 16/9; background: #000; }.video-container video { width: 100%; height: 100%; object-fit: cover; }2. 正方形图片：.square-img { width: 200px; aspect-ratio: 1; object-fit: cover; }3. 响应式卡片宽高比：.card { width: 100%; max-width: 300px; aspect-ratio: 3/4; background: #f8f9fa; padding: 20px; }4. 动态宽高比调整：.responsive-box { aspect-ratio: 4/3; transition: aspect-ratio 0.3s; }.responsive-box:hover { aspect-ratio: 16/9; } | CSS布局核心属性，属于元素宽高比控制类属性，用于定义元素的固定宽高比，确保元素在不同尺寸下保持预设的宽度与高度比例，无需通过padding或JS计算，简化响应式宽高比布局 | 1. 简化响应式布局：无需复杂计算或额外容器，直接固定元素宽高比，适配不同屏幕尺寸（如视频、图片、卡片）；2. 保持视觉一致性：确保元素在宽高变化时（如响应式缩放）始终保持预设比例，避免内容变形；3. 适配媒体内容：为视频、图片等媒体元素容器设置固定宽高比，提前预留空间，避免页面加载时布局跳动；4. 简化UI开发：快速实现正方形、16:9、3:4等常见比例的元素，减少代码量 | 1. 兼容性：IE不支持aspect-ratio；Chrome 88+、Firefox 89+、Safari 15+支持，部分旧浏览器需添加-webkit-前缀；2. 宽高计算优先级：- 仅设置宽度：高度 = 宽度 / 宽高比；- 仅设置高度：宽度 = 高度 * 宽高比；- 同时设置宽高：宽高比不生效，元素按设置的宽高显示；3. 与object-fit配合：为替换元素（img、video）设置aspect-ratio时，建议配合object-fit: cover/contain，避免内容变形；4. 容器限制：若父元素设置了overflow: hidden，元素按宽高比计算后的尺寸可能被裁剪；5. 继承性：具有继承性；6. 性能影响：无明显性能影响，是高效的宽高比控制方案；7. 降级处理：为不支持的浏览器，可使用“固定padding+绝对定位子元素”的传统方案模拟宽高比（如16:9容器设置padding-bottom: 56.25%;） |
| backdrop-filter | 一、基础取值（背景模糊/滤镜效果）：1. none：默认值，无背景滤镜效果；2. blur(px)：背景模糊效果（px为模糊半径，值越大越模糊，如backdrop-filter: blur(5px);）；3. brightness(值)：调整背景亮度（值为1时正常，>1变亮，<1变暗，如brightness(0.8);）；4. contrast(值)：调整背景对比度（值为1时正常，>1增强，<1降低，如contrast(1.2);）；5. grayscale(%)：背景灰度化（%为灰度比例，100%全灰度，0%正常，如grayscale(50%);）；6. 多滤镜组合：多个滤镜用空格分隔（如backdrop-filter: blur(3px) brightness(0.9);）；二、扩展取值：inherit（继承父元素值）、initial（恢复默认值none）；三、生效前提：元素需有半透明背景（如background: rgba(255,255,255,0.5);），否则效果不明显 | 1. 毛玻璃导航栏：.navbar { position: fixed; top: 0; width: 100%; background: rgba(255,255,255,0.7); backdrop-filter: blur(8px); z-index: 999; }2. 半透明弹窗背景：.modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(255,255,255,0.8); backdrop-filter: blur(5px) contrast(1.1); padding: 20px; border-radius: 8px; }3. 图片上方半透明遮罩：.image-overlay { position: absolute; bottom: 0; width: 100%; background: rgba(0,0,0,0.4); backdrop-filter: blur(2px) brightness(0.8); color: #fff; padding: 10px; }4. 多滤镜组合效果：.card { background: rgba(255,255,255,0.6); backdrop-filter: blur(4px) grayscale(20%) brightness(0.95); border-radius: 10px; padding: 15px; } | CSS视觉效果核心属性，属于背景滤镜类属性，用于为元素后方的内容添加模糊、亮度调整、灰度化等滤镜效果，实现毛玻璃等现代视觉效果，区别于filter（作用于元素自身及子元素） | 1. 实现毛玻璃效果：通过blur()取值为半透明元素添加毛玻璃效果，让元素与背景更好地融合，提升页面现代感；2. 调整背景视觉：通过brightness、contrast等取值调整元素后方背景的亮度和对比度，增强元素可读性；3. 打造个性化风格：通过多滤镜组合，为页面元素添加独特的视觉风格（如复古灰度+模糊）；4. 突出前景内容：通过模糊背景，让半透明元素的前景内容（文字、图标）更醒目 | 1. 兼容性：IE不支持backdrop-filter；Chrome 76+、Firefox 70+、Safari 14+支持，部分旧浏览器需添加-webkit-前缀（如-webkit-backdrop-filter）；2. 与filter区别：backdrop-filter作用于元素后方的内容（背景）；filter作用于元素自身及其所有子元素；两者作用对象完全不同；3. 生效关键：元素必须设置半透明背景（如rgba、hsla），若背景为不透明（如solid纯色），则无法看到后方背景的滤镜效果；4. 性能影响：滤镜效果（尤其是blur）会消耗一定GPU资源，模糊半径越大、应用元素越多，性能消耗越大；复杂页面建议谨慎使用；5. 继承性：具有继承性；6. 层级影响：backdrop-filter仅作用于元素后方层级较低的内容，层级高于该元素的内容不受影响；7. 降级处理：为不支持的浏览器，可使用filter配合绝对定位的半透明元素模拟类似效果，但性能和效果略差 |
| backface-visibility | 一、基础取值（元素背面可见性）：1. visible：默认值，元素背面朝向观察者时可见；2. hidden：元素背面朝向观察者时不可见；二、扩展取值：1. inherit：继承父元素的backface-visibility属性值；2. initial：恢复默认值visible；三、生效前提：需配合transform的3D旋转属性（如rotateY、rotateX）使用，仅在3D变换场景下生效 | 1. 3D卡片翻转效果：.card { position: relative; width: 200px; height: 300px; transform-style: preserve-3d; transition: transform 0.6s; }.card-front, .card-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; }.card-back { transform: rotateY(180deg); }.card:hover { transform: rotateY(180deg); }2. 3D立方体侧面隐藏：.cube-face { backface-visibility: hidden; width: 100px; height: 100px; position: absolute; }.cube-face.front { transform: translateZ(50px); }.cube-face.back { transform: rotateY(180deg) translateZ(50px); }3. 3D旋转文字隐藏：.rotate-text { backface-visibility: hidden; transition: transform 0.5s; }.rotate-text:hover { transform: rotateX(180deg); } | CSS 3D变换辅助属性，属于3D视觉控制类属性，用于控制元素在3D旋转后，背面是否可见，配合transform-style: preserve-3d和3D旋转属性，实现真实的3D立体效果 | 1. 实现真实3D翻转：在卡片翻转、立方体等3D效果中，隐藏元素背面，避免正面与背面重叠显示，提升3D效果的真实感；2. 优化3D视觉体验：防止背面内容干扰正面显示，让3D变换的视觉效果更清晰；3. 辅助3D交互设计：配合transition/animation，实现流畅的3D翻转交互（如卡片hover翻转） | 1. 兼容性：IE10+支持，IE9及以下不支持3D变换，故不生效；现代浏览器全兼容，部分旧浏览器需添加-webkit-前缀；2. 必配属性：必须同时设置transform-style: preserve-3d（开启3D空间）和3D旋转transform（如rotateY），否则该属性无效；3. 背面定义：元素的背面是其正面的镜像，默认与正面重叠，backface-visibility: hidden可隐藏该镜像；4. 性能影响：开启3D变换和backface-visibility可能轻微增加GPU消耗，但现代浏览器优化较好；5. 继承性：具有继承性；6. 注意事项：若元素无背景色/背景图，即使设置backface-visibility: hidden，仍可能看到背面的子元素；需确保元素有不透明的正面内容或背景 |
| background | 一、复合属性拆解（可单独设置子属性）：1. background-color：背景颜色（取值同color属性的颜色值）；2. background-image：背景图片，取值为url("图片路径")，支持渐变（linear-gradient、radial-gradient）；3. background-repeat：背景重复方式，取值：repeat（默认，全方向重复）、repeat-x（水平重复）、repeat-y（垂直重复）、no-repeat（不重复）；4. background-position：背景位置，取值：关键字（center、top left等）、百分比、长度值（如background-position: 50% 50%; background-position: 10px 20px;）；5. background-size：背景图片尺寸，取值：auto（默认）、cover（覆盖元素，可能裁剪）、contain（完整显示，可能留白）、长度值/百分比（如background-size: 100% 100%; background-size: 200px 150px;）；6. background-attachment：背景滚动方式，取值：scroll（默认，随页面滚动）、fixed（固定，不随页面滚动）、local（随元素内容滚动）；二、扩展取值：inherit（继承父元素的background属性值） | 1. 纯色背景设置：.bg-gray { background: #f5f5f5; }.bg-primary { background: #007bff; color: #fff; }2. 背景图片设置：.banner { background: url(banner.jpg) no-repeat center center; background-size: cover; height: 500px; }3. 渐变背景设置：.gradient-btn { background: linear-gradient(to right, #007bff, #28a745); color: #fff; padding: 10px 20px; border: none; }.radial-gradient { background: radial-gradient(circle, #ffc107, #dc3545); width: 300px; height: 300px; }4. 多重背景设置：.multi-bg { background: url(icon.png) no-repeat 10px center, linear-gradient(to bottom, #f8f9fa, #e9ecef); padding-left: 40px; height: 60px; line-height: 60px; } | CSS样式体系核心属性，属于元素背景控制复合属性，用于统一控制元素的背景颜色、背景图片、图片重复、位置、尺寸等多个背景相关特性 | 1. 定义元素背景风格：通过纯色、图片、渐变等背景效果，提升元素视觉表现力；2. 实现复杂背景效果：支持多重背景叠加（图片+渐变、多张图片），构建丰富的视觉层次；3. 优化背景显示：通过background-repeat、background-position、background-size控制背景图片的显示方式，适配不同元素尺寸；4. 实现特殊交互效果：通过background-attachment实现背景固定，配合滚动产生视差效果；5. 辅助内容排版：通过背景色区分页面区域，或通过背景图片作为内容的视觉辅助（如图标背景） | 1. 兼容性：基础子属性（background-color、background-image、background-repeat、background-position）全浏览器兼容；background-size IE9+支持；渐变背景IE10+支持；2. 复合属性书写规则：子属性顺序无严格要求，但建议按「background-color → background-image → background-repeat → background-position → background-size → background-attachment」的顺序书写，提升可读性；background-size需跟在background-position后，用/分隔（如background: url(img.jpg) no-repeat center/cover;）；3. 背景图片路径：相对路径基于CSS文件所在位置，绝对路径基于网站根目录；建议使用相对路径，便于项目迁移；4. 背景图片性能：避免使用过大的背景图片，建议压缩图片；可使用CSS渐变替代简单的图片背景，提升加载性能；5. 多重背景层级：多张背景图片按书写顺序叠加，先写的在底层，后写的在上层；背景色始终在最底层；6. 透明背景注意：background-color设置为transparent（透明）时，元素背景会显示父元素的背景；RGBA颜色的透明背景仅影响背景，不影响前景内容（文字、边框等） |
| background-attachment | 一、基础取值：1. scroll：默认值，背景图片随页面滚动而滚动，不随元素内容滚动；2. fixed：背景图片固定在视口（浏览器窗口）中，不随页面或元素内容滚动；3. local：背景图片随元素内容滚动而滚动，不随页面滚动；二、扩展取值：1. inherit：继承父元素的background-attachment属性值；2. initial：恢复默认值scroll | 1. 视差滚动效果：.parallax-bg { height: 500px; background: url(parallax.jpg) no-repeat center center; background-size: cover; background-attachment: fixed; }2. 元素内滚动背景：.content-box { width: 300px; height: 200px; overflow: auto; background: url(inner-bg.jpg) no-repeat center; background-size: cover; background-attachment: local; }3. 默认滚动背景：.normal-bg { background: url(normal.jpg) repeat; background-attachment: scroll; }4. 响应式背景滚动：.responsive-attachment { background-attachment: fixed; }@media (max-width: 768px) { .responsive-attachment { background-attachment: scroll; } } | CSS背景样式核心属性，属于背景滚动控制类属性，用于定义背景图片的滚动行为，控制背景图片是随页面滚动、随元素内容滚动还是固定不动，是实现视差滚动等特效的关键属性 | 1. 实现视差效果：通过fixed取值让背景图片固定，配合页面滚动实现前景内容与背景分离的视差效果，提升页面视觉层次感；2. 控制元素内背景滚动：通过local取值让背景随元素内容滚动，适配滚动容器内的背景显示需求；3. 适配不同场景：根据页面布局和交互需求，选择背景滚动方式（默认滚动、固定、随内容滚动）；4. 响应式适配：在移动设备上切换背景滚动方式（如fixed改为scroll），避免视差效果在小屏幕上体验不佳 | 1. 兼容性：全浏览器兼容，无版本限制；2. 视差效果注意：实现视差滚动时，背景图片建议设置background-size: cover确保覆盖元素，且元素需有足够的高度（如500px以上），才能体现出视差效果；3. 移动设备体验：background-attachment: fixed在部分移动设备（尤其是iOS）上体验不佳，可能出现背景错位、滚动卡顿等问题，建议在移动设备上通过媒体查询改为scroll；4. 性能影响：fixed背景图片可能增加浏览器滚动时的渲染压力，尤其是在复杂页面中；建议优化背景图片尺寸和质量，减少性能消耗；5. 与background-position配合：背景图片的位置（background-position）会影响滚动时的显示效果，建议设置center center确保背景居中显示；6. 继承性：具有继承性，子元素默认继承父元素的背景滚动方式；7. 多层背景：若元素有多个背景图片，可通过background-attachment分别设置每个背景的滚动方式（用逗号分隔） |
| background-clip | 一、基础取值（背景裁剪范围）：1. border-box：默认值，背景裁剪到边框盒子，背景会显示在边框下方；2. padding-box：背景裁剪到内边距盒子，背景不会显示在边框下方；3. content-box：背景裁剪到内容盒子，背景仅显示在内容区域，不显示在内边距和边框下方；4. text：背景裁剪到文本，背景会显示在文本的轮廓内（即文字填充背景效果）；二、扩展取值：1. inherit：继承父元素的background-clip属性值；2. initial：恢复默认值border-box；三、生效前提：作用于设置了背景（background-color、background-image）的元素，控制背景的显示范围 | 1. 背景不显示在边框下：.padding-clip { width: 200px; height: 100px; border: 5px dashed #dc3545; padding: 15px; background: #f8f9fa; background-clip: padding-box; }2. 背景仅显示在内容区：.content-clip { width: 200px; height: 100px; padding: 15px; border: 5px solid #007bff; background: #ffc107; background-clip: content-box; }3. 文字填充背景效果：.text-clip { font-size: 48px; font-weight: bold; background: url("bg.jpg") no-repeat center; background-size: cover; -webkit-background-clip: text; background-clip: text; color: transparent; }4. 响应式文字填充：.responsive-text-clip { font-size: clamp(24px, 5vw, 48px); background: linear-gradient(to right, #007bff, #dc3545); -webkit-background-clip: text; background-clip: text; color: transparent; } | CSS背景控制核心属性，属于背景范围控制类属性，用于控制元素背景的裁剪范围，决定背景在元素的边框、内边距、内容区域的显示与否，尤其适用于实现文字填充背景等特殊效果 | 1. 精准控制背景显示范围：根据设计需求，限制背景的显示区域，避免背景在不需要的区域（如边框下）显示，提升页面排版规整度；2. 实现文字填充效果：通过background-clip: text配合透明文本，实现文字填充图片或渐变的特殊视觉效果；3. 优化边框与背景的配合：当使用虚线、透明边框时，让背景不显示在边框下，使边框效果更清晰；4. 丰富背景表现形式：通过不同的裁剪范围组合，实现多样化的背景显示效果，提升页面设计感 | 1. 兼容性：IE9+支持border-box、padding-box、content-box；text取值IE不支持，Chrome 54+、Firefox 49+、Safari 10+支持，text取值需添加-webkit-前缀；2. 文字填充效果注意：使用background-clip: text时，必须将text-color设置为transparent，否则背景无法透过文本显示；3. 与background-origin的区别：- background-clip：控制背景的裁剪范围（显示区域）；- background-origin：控制背景的起始位置；4. 继承性：具有继承性；5. 注意事项：当元素没有设置背景时，background-clip无效；使用text取值时，建议配合background-size调整背景尺寸，确保填充效果清晰；旧浏览器对text取值的支持不完善，需做好降级处理（如设置默认文本颜色） |
| background-origin | 一、基础取值（背景起始位置）：1. border-box：默认值，背景从边框盒子的左上角开始显示；2. padding-box：背景从内边距盒子的左上角开始显示；3. content-box：背景从内容盒子的左上角开始显示；二、扩展取值：1. inherit：继承父元素的background-origin属性值；2. initial：恢复默认值border-box；三、生效前提：作用于设置了背景图片（background-image）的元素，控制背景图片的起始显示位置；对background-color无效 | 1. 背景从内边距开始显示：.padding-origin { width: 200px; height: 100px; border: 5px solid #007bff; padding: 15px; background: url("bg.png") no-repeat; background-origin: padding-box; }2. 背景从内容区开始显示：.content-origin { width: 200px; height: 100px; padding: 15px; background: url("icon.png") no-repeat; background-origin: content-box; }3. 配合背景位置：.origin-position { width: 300px; height: 200px; padding: 20px; background: url("bg-large.png") no-repeat right bottom; background-origin: padding-box; }4. 渐变背景起始位置：.gradient-origin { width: 200px; height: 100px; padding: 15px; background: linear-gradient(to right, #007bff, #dc3545); background-origin: content-box; } | CSS背景控制核心属性，属于背景位置控制类属性，用于控制元素背景图片的起始显示位置，决定背景图片从元素的边框、内边距还是内容区域开始渲染，精准调整背景图片的显示位置 | 1. 精准调整背景图片位置：根据设计需求，控制背景图片的起始渲染位置，避免背景图片显示在不需要的区域；2. 优化背景与内容的配合：让背景图片与元素内的内容更好地协调，提升页面排版的美观度；3. 配合背景裁剪使用：与background-clip配合，实现更精准的背景显示效果（如背景从内边距开始，裁剪到内容区）；4. 适配不同元素样式：针对不同边框、内边距设置的元素，灵活调整背景图片的起始位置，确保背景显示效果一致 | 1. 兼容性：IE9+支持，IE8及以下不支持；现代浏览器全兼容，部分旧浏览器需添加-webkit-前缀；2. 生效限制：仅对background-image（背景图片、渐变）生效，对background-color无效；3. 与background-clip的配合：两者取值可相同或不同，例如background-origin: padding-box; background-clip: content-box; 表示背景从内边距开始，裁剪到内容区；4. 与background-position的关系：background-position基于background-origin设置的起始位置进行定位；5. 继承性：具有继承性；6. 注意事项：当元素的background-attachment设置为fixed时，background-origin无效，背景图片的起始位置基于视口；使用时需确保背景图片的尺寸与元素尺寸适配，避免背景显示不完整 |
| background-size | 一、基础取值（背景尺寸）：1. auto：默认值，背景图片按原始尺寸显示；2. cover：背景图片等比例缩放，确保覆盖整个元素的背景区域，可能导致图片被裁剪；3. contain：背景图片等比例缩放，确保图片完全包含在元素的背景区域内，可能留有空白；4. 长度值：设置背景图片的宽高（如background-size: 200px 100px; 宽200px，高100px）；仅设置一个值时，另一个值为auto（等比例缩放）；5. 百分比值：基于元素背景区域的宽高百分比（如background-size: 50% 80%; 宽为元素背景区50%，高为80%）；二、扩展取值：1. 多背景尺寸：多个背景图片的尺寸用逗号分隔（如background-size: 100% auto, 50% 50%;）；2. inherit：继承父元素的background-size属性值；3. initial：恢复默认值auto；三、生效前提：作用于设置了背景图片（background-image）的元素，控制背景图片的尺寸 | 1. 背景图片覆盖元素：.cover-bg { width: 300px; height: 200px; background: url("bg.jpg") no-repeat center; background-size: cover; }2. 背景图片完全包含：.contain-bg { width: 300px; height: 200px; background: url("bg-small.jpg") no-repeat center; background-size: contain; background-color: #f8f9fa; }3. 固定背景图片尺寸：.fixed-size-bg { width: 200px; height: 150px; background: url("icon.png") no-repeat; background-size: 50px 50px; }4. 多背景尺寸设置：.multi-bg-size { width: 400px; height: 300px; background: url("bg1.jpg") no-repeat left top, url("bg2.jpg") no-repeat right bottom; background-size: 50% auto, 30% 30%; } | CSS背景控制核心属性，属于背景尺寸控制类属性，用于控制元素背景图片的显示尺寸，通过等比例缩放、固定尺寸、百分比尺寸等方式，调整背景图片与元素背景区域的适配关系，实现理想的背景显示效果 | 1. 适配不同元素尺寸：让背景图片根据元素的尺寸灵活缩放，避免背景图片过大或过小导致的显示异常；2. 实现背景覆盖/包含效果：通过cover/contain取值，快速实现背景图片覆盖整个元素或完全包含在元素内的效果；3. 精准控制背景图片大小：通过固定长度值或百分比值，精准调整背景图片的尺寸，适配特殊设计需求；4. 支持多背景适配：为多个背景图片分别设置尺寸，实现复杂的多背景叠加效果 | 1. 兼容性：IE9+支持，IE8及以下不支持；现代浏览器全兼容，部分旧浏览器需添加-webkit-前缀；2. 等比例缩放规则：当仅设置一个长度值或使用cover/contain时，背景图片会保持原始宽高比进行缩放；设置两个不同的长度值或百分比值时，图片会被拉伸变形；3. 与background-position配合：建议配合background-position: center; 使用，确保背景图片在缩放后居中显示，提升视觉效果；4. 性能影响：过大的背景图片缩放会增加GPU消耗，建议使用与元素尺寸适配的图片资源；5. 继承性：具有继承性；6. 注意事项：使用cover取值时，需注意图片的主体内容，避免关键内容被裁剪；使用contain取值时，需设置背景色，避免空白区域影响视觉效果；多背景尺寸设置时，需确保各背景图片的尺寸和位置不冲突 |
| border | 一、复合属性拆解（可单独设置子属性或单方向属性）：1. 核心子属性：- border-width：边框宽度，取值为长度值（px、em等，如border-width: 2px;）；- border-style：边框样式（必选，否则边框不显示），取值：solid（实线）、dashed（虚线）、dotted（点线）、double（双线）、groove（3D凹槽）、ridge（3D凸槽）、none（无样式，默认）；- border-color：边框颜色，取值同color属性的颜色值；2. 单方向拆分属性：- 全方向：border-top、border-right、border-bottom、border-left；- 单方向子属性：border-top-width、border-top-style、border-top-color等；二、扩展取值：inherit（继承父元素的border属性值）、initial（恢复默认值none） | 1. 基础边框设置：.card { border: 1px solid #ddd; border-radius: 4px; padding: 15px; }.btn { border: 1px solid #007bff; background: transparent; color: #007bff; }2. 单方向边框设置：.section-divider { border-bottom: 2px solid #f5f5f5; margin: 20px 0; }.tag { border-left: 3px solid #28a745; padding-left: 10px; }3. 特殊边框样式：.dashed-box { border: 2px dashed #dc3545; width: 200px; height: 200px; }.dotted-line { border-bottom: 1px dotted #666; }4. 圆角边框组合：.rounded-circle { border: 2px solid #007bff; border-radius: 50%; width: 100px; height: 100px; } | CSS样式体系核心属性，属于元素边框控制复合属性，用于统一控制元素边框的宽度、样式、颜色，可精准控制全方向或单方向边框特性 | 1. 定义元素边界：通过边框清晰区分元素与周边区域，提升页面布局的规整性；2. 实现装饰效果：通过不同边框样式（虚线、点线、双线）和颜色，为元素添加装饰，丰富页面视觉风格；3. 单方向分隔：通过单方向边框（如下边框）实现元素间的分隔，替代额外的分隔线元素；4. 配合圆角实现特殊形状：与border-radius属性配合，实现圆角矩形、圆形、胶囊等特殊形状；5. 交互反馈：通过:hover、:active等伪类动态修改边框样式/颜色，实现元素的交互反馈（如按钮 hover 边框变色） | 1. 兼容性：全浏览器兼容，无版本限制；2. 边框生效条件：border-style必须设置为非none值（如solid、dashed），否则即使设置了border-width和border-color，边框也不会显示；3. 盒模型影响：默认box-sizing: content-box模式下，边框宽度会叠加到元素的width和height上，使元素总尺寸增大；设置box-sizing: border-box后，边框包含在元素宽高内部；4. 单方向边框简化写法：单方向边框可直接简写（如border-top: 1px solid #ddd;），无需分别设置width、style、color；5. 边框颜色默认值：若未设置border-color，边框颜色会默认继承元素的color属性值；6. 圆角边框注意：border-radius属性可单独设置，用于实现圆角效果，其取值为长度值或百分比；圆角会裁剪边框和背景；7. 性能建议：避免为大量元素设置过粗或复杂样式的边框，可能增加页面渲染计算量 |
| border-image | 一、基础取值（边框图像）：1. none：默认值，不使用图像作为边框，显示普通边框；2. 图像路径：指定作为边框的图像URL（如border-image: url("border.png");）；3. 裁剪值：设置图像的裁剪区域，可取值为长度（px、em）、百分比或关键字（fill、stretch、repeat、round）；4. 组合取值：border-image: 图像路径 裁剪值 重复方式;（如border-image: url("border.png") 30 round;）；二、扩展取值：1. inherit：继承父元素的border-image属性值；2. initial：恢复默认值none；三、生效前提：需配合border属性使用（至少设置border-width），否则图像边框无法显示 | 1. 简单图像边框：.img-border { border: 10px solid transparent; border-image: url("border.jpg") 20 round; }2. 拉伸图像边框：.stretch-border { border: 8px solid transparent; border-image: url("border-line.png") 10 stretch; }3. 重复图像边框：.repeat-border { border: 15px solid transparent; border-image: url("border-dot.png") 5 repeat; }4. 带填充的图像边框：.fill-border { border: 12px solid transparent; border-image: url("border-fill.png") 30 fill round; } | CSS边框美化核心属性，属于边框样式类属性，用于将图像作为元素的边框，替代传统的纯色边框，通过裁剪、重复、拉伸等方式控制图像边框的显示效果，实现多样化的边框样式 | 1. 实现个性化边框：使用自定义图像作为边框，打造独特的视觉效果，提升页面设计感；2. 灵活控制边框显示：通过裁剪值调整图像边框的有效区域，通过重复/拉伸方式适配不同尺寸的元素；3. 丰富边框表现形式：支持填充（fill）模式，让图像覆盖边框内部区域，实现更复杂的边框效果；4. 简化复杂边框实现：无需嵌套多个元素模拟复杂边框，直接通过border-image快速实现 | 1. 兼容性：IE11+支持，IE10及以下不支持；现代浏览器全兼容，部分旧浏览器需添加-webkit-前缀；2. 必配属性：必须设置border-width（边框宽度），否则图像边框无显示空间；建议设置border: 宽度 solid transparent; 避免默认边框干扰；3. 图像要求：建议使用可拉伸的图像（如无缝纹理），避免拉伸后变形；图像尺寸需与裁剪值匹配，否则可能出现显示异常；4. 与border-radius冲突：border-image与border-radius无法同时生效，设置border-radius后border-image会失效；5. 继承性：不具有继承性；6. 注意事项：图像边框不支持过渡（transition）和动画（animation）；若需要动态边框效果，建议使用背景图像模拟；使用时需测试不同尺寸元素下的边框显示效果，确保适配性 |
| border-radius | 一、基础取值：1. 长度值：px、em、rem等单位（如border-radius: 4px; 表示四个角均为4px圆角）；2. 百分比值：基于元素宽高的百分比（如border-radius: 50%; 正方形元素可实现圆形，长方形元素实现椭圆形）；3. 复合取值规则（顺时针顺序：上左→上右→下右→下左）：- 单值：border-radius: 8px;（四个角圆角大小相同）；- 双值：border-radius: 8px 4px;（上左、下右为8px；上右、下左为4px）；- 三值：border-radius: 8px 4px 6px;（上左8px；上右、下左4px；下右6px）；- 四值：border-radius: 8px 4px 6px 2px;（上左、上右、下右、下左分别为对应值）；二、扩展取值：1. 单角取值：border-top-left-radius、border-top-right-radius等（单独设置某个角的圆角）；2. 椭圆圆角：border-radius: 10px/20px;（水平半径/垂直半径，实现椭圆角）；3. inherit：继承父元素的border-radius属性值 | 1. 基础圆角设置：.card { border: 1px solid #ddd; border-radius: 8px; padding: 15px; }.btn { border-radius: 4px; padding: 8px 16px; }2. 圆形元素：.avatar { width: 100px; height: 100px; border-radius: 50%; overflow: hidden; }.avatar img { width: 100%; height: 100%; object-fit: cover; }3. 不规则圆角：.special-box { border-radius: 10px 20px 30px 40px; background: #f5f5f5; padding: 20px; }4. 椭圆圆角：.oval-box { width: 200px; height: 100px; border-radius: 50px/25px; background: #007bff; } | CSS样式核心属性，属于边框圆角控制类属性，用于定义元素边框角的圆角大小，可实现圆角矩形、圆形、椭圆形等多种特殊形状，是美化元素外观的常用属性 | 1. 美化元素外观：为卡片、按钮、图片等元素添加圆角，替代尖锐的直角，提升页面视觉美观度；2. 实现特殊形状：通过50%百分比实现圆形、椭圆形元素（如头像、图标）；3. 精准控制圆角：单独设置某个角的圆角大小，实现不规则的圆角效果，适配多样化的设计需求；4. 配合其他属性：与overflow: hidden配合实现圆形图片裁剪，与border配合强化圆角边框效果 | 1. 兼容性：IE9+支持border-radius属性；现代浏览器全兼容；部分旧浏览器需添加-webkit-、-moz-等前缀；2. 圆角裁剪：border-radius会裁剪元素的背景、内容和边框；若需裁剪图片，需配合overflow: hidden（元素为块级或inline-block）；3. 百分比取值注意：百分比取值基于元素的宽高，正方形元素设置50%为圆形，长方形元素为椭圆形；若元素宽高比例变化，圆形可能变为椭圆形；4. 边框影响：边框宽度会影响圆角的视觉大小，设置圆角时需考虑边框宽度，确保效果符合预期；5. 性能影响：简单圆角对性能无影响；过多复杂圆角（如大量元素设置不同不规则圆角）可能轻微影响渲染效率，但可忽略；6. 继承性：具有继承性，子元素默认继承父元素的圆角设置；7. 最佳实践：项目内统一圆角大小规范（如按钮4px、卡片8px、头像50%），提升页面风格一致性 |
| box-decoration-break | 一、基础取值（跨断元素装饰处理）：1. slice：默认值，元素跨断（如换行、分页）时，边框、背景等装饰被裁剪，各段独立显示，共享同一个装饰区域；2. clone：元素跨断时，边框、背景等装饰被复制到每一段，每一段都拥有完整的装饰效果；二、扩展取值：1. inherit：继承父元素的box-decoration-break属性值；2. initial：恢复默认值slice；三、生效前提：作用于可能跨断的元素（如换行的行内块元素、多列布局中的元素、分页元素） | 1. 换行元素完整边框：.clone-border { display: inline-block; padding: 5px 10px; border: 2px solid #007bff; border-radius: 4px; box-decoration-break: clone; }2. 多列布局背景延续：.multi-column { column-count: 2; column-gap: 20px; }.multi-column p { background: #f8f9fa; padding: 10px; box-decoration-break: clone; }3. 跨页打印完整装饰：.print-clone { border: 1px solid #333; box-decoration-break: clone; }@media print { .print-clone { page-break-inside: avoid; } }4. 对比效果：.slice-demo { box-decoration-break: slice; }.clone-demo { box-decoration-break: clone; } | CSS装饰控制辅助属性，属于跨断元素样式类属性，用于控制元素在跨断（换行、分页、多列布局）时，边框、背景、圆角等装饰效果的显示方式，解决跨断元素装饰不完整的问题 | 1. 优化跨断元素显示：让跨断的元素每一段都拥有完整的边框、背景等装饰，提升视觉完整性；2. 适配多列布局：在多列布局中，确保元素在不同列中的装饰效果一致且完整；3. 提升打印效果：跨页打印时，让元素在每一页都显示完整的装饰，避免裁剪导致的样式残缺；4. 优化换行元素样式：对于换行的行内块元素，确保每一行都有完整的边框和圆角，提升排版美观度 | 1. 兼容性：IE不支持，Chrome 32+、Firefox 29+、Safari 6.1+支持，部分旧浏览器需添加-webkit-前缀；2. 生效元素类型：对inline、inline-block、inline-table等行内级元素效果明显；块级元素跨断时效果有限；3. 支持的装饰类型：支持border、background、border-radius、box-shadow、outline等装饰属性；4. 性能影响：clone取值会复制装饰效果，可能轻微增加渲染消耗，但现代浏览器优化较好；5. 继承性：具有继承性；6. 注意事项：避免对大量跨断元素使用clone取值，可能影响页面性能；在多列布局中使用时，建议配合column-fill: balance，提升整体排版效果；部分浏览器对border-radius和box-shadow的clone支持存在细微差异，需测试验证 |
| box-shadow | 一、基础取值（参数顺序）：box-shadow: h-offset v-offset blur spread color inset;1. h-offset：水平偏移量（必选，正值向右，负值向左）；2. v-offset：垂直偏移量（必选，正值向下，负值向上）；3. blur：模糊半径（可选，值越大阴影越模糊，默认0）；4. spread：阴影扩散半径（可选，正值阴影扩大，负值阴影缩小，默认0）；5. color：阴影颜色（可选，默认与元素颜色一致，常用rgba设置透明阴影）；6. inset：内阴影关键字（可选，无inset为外阴影，有inset为内阴影）；二、扩展取值：1. 多重阴影：多个阴影用逗号分隔（如box-shadow: 0 2px 4px #000, 0 4px 8px #666;）；2. inherit：继承父元素的box-shadow属性值；3. none：默认值，无阴影效果 | 1. 基础外阴影：.card { box-shadow: 0 2px 8px rgba(0,0,0,0.1); border-radius: 8px; padding: 15px; }2. 内阴影效果：.input-box { box-shadow: inset 0 1px 3px rgba(0,0,0,0.1); padding: 8px 12px; border: none; }3. 多重阴影：.btn-hover { box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,123,255,0.2); transition: box-shadow 0.3s; }.btn-hover:hover { box-shadow: 0 4px 8px rgba(0,0,0,0.2), 0 6px 12px rgba(0,123,255,0.3); }4. 发光效果：.glow-element { box-shadow: 0 0 10px rgba(40,167,69,0.5); border: 1px solid #28a745; } | CSS视觉效果核心属性，属于元素阴影控制类属性，用于为元素添加外阴影或内阴影效果，通过控制阴影的偏移、模糊、扩散和颜色，增强元素的立体感和视觉层次感 | 1. 增强元素立体感：为卡片、按钮等元素添加外阴影，模拟真实光影效果，让元素更具层次感；2. 实现特殊视觉效果：通过内阴影模拟凹陷效果，通过多重阴影实现复杂的光影叠加，或通过发光阴影突出元素；3. 交互反馈：配合hover、transition实现阴影的动态变化，增强元素的交互质感；4. 美化界面布局：通过阴影区分元素层级，提升页面的视觉整洁度和美观度 | 1. 兼容性：IE9+支持box-shadow属性；现代浏览器全兼容；部分旧浏览器需添加-webkit-、-moz-等前缀；2. 性能影响：阴影的模糊半径（blur）越大、阴影数量越多，对浏览器渲染性能的影响越大；建议合理控制blur值（避免过大）和阴影数量（避免过多多重阴影）；复杂阴影可设置will-change: box-shadow提前优化；3. 阴影位置：外阴影（无inset）默认在元素下方和右侧，内阴影（inset）在元素内部；通过h-offset和v-offset控制阴影的偏移方向；4. 透明阴影：推荐使用rgba颜色设置阴影，可实现半透明阴影效果，避免阴影过于生硬，提升视觉质感；5. 继承性：不具有继承性，子元素不会默认继承父元素的阴影；6. 与border-radius配合：阴影会跟随元素的圆角（border-radius）形状，无需额外设置；7. 性能优化：避免为大量元素同时添加复杂阴影；在移动设备上可适当简化阴影效果，提升页面滚动流畅度 |
| box-sizing | 一、基础取值：1. content-box：默认值，盒模型宽度/高度 = content（内容）宽度/高度，padding和border会叠加在宽高之外，使元素总尺寸增大；2. border-box：怪异盒模型，盒模型宽度/高度 = content（内容）宽度/高度 + padding + border，padding和border包含在宽高内部，元素总尺寸不变；二、扩展取值：1. inherit：继承父元素的box-sizing属性值；2. initial：恢复默认值content-box | 1. 全局盒模型重置：* { box-sizing: border-box; } /* 项目全局使用怪异盒模型，简化布局计算 */2. 固定尺寸元素设置：.btn { width: 120px; height: 40px; padding: 0 20px; border: 1px solid #007bff; box-sizing: border-box; }3. 局部盒模型调整：.content-box { box-sizing: content-box; width: 300px; padding: 20px; border: 2px solid #ddd; /* 总宽度300+20*2+2*2=344px */ }4. 表单元素适配：input[type="text"] { width: 100%; padding: 8px 12px; border: 1px solid #ccc; box-sizing: border-box; } | CSS盒模型核心属性，属于盒模型类型控制类属性，用于定义元素盒模型的计算方式，决定width和height属性所包含的范围（内容、内边距、边框） | 1. 简化布局计算：使用border-box可避免因padding和border导致的元素总尺寸偏差，简化宽高计算，尤其适合100%宽度的自适应布局；2. 精准控制元素尺寸：固定宽高的元素使用border-box，可确保元素总尺寸不变，避免布局错乱；3. 统一盒模型风格：项目全局设置border-box，可消除不同元素的盒模型差异，提升布局一致性；4. 适配表单元素：表单元素（input、button）默认盒模型可能存在浏览器差异，设置border-box可统一适配 | 1. 兼容性：content-box全浏览器兼容；border-box IE8+支持，现代浏览器全兼容；2. 最佳实践：推荐在项目全局使用* { box-sizing: border-box; }，可极大简化布局计算，减少因盒模型导致的布局问题；3. 计算差异示例：同样设置width: 200px、padding: 10px、border: 1px solid #000，content-box总宽度200+10*2+1*2=222px，border-box总宽度200px（内容宽度178px）；4. 继承性：具有继承性，但建议全局统一设置，避免局部差异；5. 对min-width/max-width的影响：border-box模式下，min-width/max-width同样包含padding和border；6. 性能影响：两种盒模型对性能无明显差异，核心是提升布局开发效率和准确性 |
| caret-color | 一、基础取值（光标颜色）：1. auto：默认值，光标颜色与当前文本颜色一致；2. 颜色值：可取值为十六进制（#ff0000）、RGB/RGBA（rgb(255,0,0)、rgba(255,0,0,0.5)）、HSL/HSLA（hsl(0,100%,50%)）、颜色名称（red）；二、扩展取值：1. inherit：继承父元素的caret-color属性值；2. initial：恢复默认值auto；三、生效前提：作用于可编辑元素（如input、textarea、[contenteditable="true"]的元素），控制输入光标（插入符）的颜色 | 1. 自定义输入框光标颜色：.custom-caret input { caret-color: #007bff; border: 1px solid #ddd; padding: 8px; }2. 半透明光标：.transparent-caret textarea { caret-color: rgba(255,0,0,0.6); width: 300px; height: 100px; }3. 可编辑元素光标颜色：.editable-div { caret-color: #28a745; contenteditable: true; border: 1px dashed #ccc; padding: 10px; }4. 响应式光标颜色：.responsive-caret input { caret-color: #ffc107; }@media (max-width: 768px) { .responsive-caret input { caret-color: #dc3545; } } | CSS交互样式核心属性，属于输入光标控制类属性，用于自定义可编辑元素的输入光标颜色，替代默认的文本颜色光标，提升输入交互的视觉体验，适配页面主题风格 | 1. 适配页面主题：根据页面整体配色方案，自定义光标颜色，让光标与页面风格更协调；2. 提升视觉辨识度：在浅色背景或特殊文本颜色的可编辑元素中，设置高对比度的光标颜色，方便用户定位光标位置；3. 增强交互反馈：通过光标颜色的变化，为用户提供清晰的输入状态反馈（如聚焦/失焦时切换颜色）；4. 自定义可编辑元素样式：为contenteditable元素设置光标颜色，提升自定义编辑区域的交互体验 | 1. 兼容性：IE不支持，Chrome 57+、Firefox 53+、Safari 11.1+支持，部分旧浏览器需添加-webkit-前缀；2. 生效元素限制：仅对可编辑元素生效，非可编辑元素设置后无效果；3. 与text-color的关系：默认情况下caret-color继承text-color，设置自定义颜色后会覆盖继承值；4. 光标样式限制：caret-color仅控制光标颜色，无法改变光标形状（形状需通过caret-shape控制，兼容性较差）；5. 继承性：具有继承性；6. 注意事项：建议选择与背景色对比度高的光标颜色，确保光标清晰可见；避免使用过于鲜艳或刺眼的颜色，影响长时间输入的视觉舒适度；旧浏览器需做好降级处理（显示默认文本颜色光标） |
| clip-path | 一、基础取值（元素裁剪路径）：1. none：默认值，不裁剪元素，显示完整元素；2. 基本形状函数：- circle(r at x,y)：圆形裁剪（r为半径，x,y为圆心坐标，如circle(50px at center); 圆心居中，半径50px）；- ellipse(rx ry at x,y)：椭圆形裁剪（rx水平半径，ry垂直半径，如ellipse(60px 40px at center);）；- polygon(x1 y1, x2 y2, ...)：多边形裁剪（多个坐标点组成多边形，如polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); 菱形）；- inset(top right bottom left round 圆角)：矩形裁剪（可设置内边距和圆角，如inset(10px 20px round 5px); 内缩10px/20px，圆角5px）；3. url()：引用SVG的clipPath元素作为裁剪路径；二、扩展取值：inherit（继承父元素值）、initial（恢复默认值none） | 1. 圆形头像裁剪：.avatar { width: 100px; height: 100px; object-fit: cover; clip-path: circle(50% at center); }2. 菱形卡片：.diamond-card { width: 200px; height: 200px; background: #007bff; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }3. 内缩圆角矩形：.inset-card { width: 300px; height: 200px; background: #f8f9fa; clip-path: inset(15px 10px round 8px); }4. 不规则多边形：.hexagon { width: 120px; height: 140px; background: #dc3545; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); }5. SVG路径裁剪：.svg-clip { clip-path: url(#myClipPath); }<svg width="0" height="0"><clipPath id="myClipPath"><path d="M50,0 L100,50 L50,100 L0,50 Z"></path></clipPath></svg> | CSS视觉效果核心属性，属于元素裁剪类属性，用于定义元素的可见区域边界，通过基本形状或SVG路径裁剪元素，只显示裁剪路径内的部分，隐藏路径外的部分，实现多样化的元素形状 | 1. 实现特殊元素形状：无需使用SVG或图片，通过CSS实现圆形、菱形、多边形等不规则形状的元素；2. 打造个性化UI组件：为头像、卡片、按钮等组件添加独特的裁剪形状，提升页面视觉吸引力；3. 实现动画过渡效果：配合transition或animation，让裁剪路径动态变化，实现元素形状渐变的动画；4. 精准控制可见区域：通过裁剪路径精准隐藏元素的多余部分，聚焦核心内容 | 1. 兼容性：IE不支持clip-path；Chrome 55+、Firefox 54+、Safari 10.1+支持基础形状函数，SVG路径裁剪在现代浏览器也支持，部分旧浏览器需添加-webkit-前缀；2. 坐标单位：支持px、%、em等单位，%基于元素自身的宽高计算（如50%为元素中心）；3. 裁剪区域：裁剪路径内的部分显示，路径外的部分隐藏（包括边框、阴影等）；4. 动画支持：clip-path的属性值可过渡或动画（如从圆形过渡到菱形），但仅支持相同类型的形状函数（如都是polygon），且坐标点数量需一致；5. 性能影响：简单形状裁剪性能较好，复杂SVG路径或动态裁剪可能轻微增加渲染压力；6. 继承性：具有继承性；7. 注意事项：裁剪后的元素依然占据原有空间（文档流位置不变）；若元素有背景图，需配合object-fit（替换元素）或background-size（背景图）确保裁剪后显示正常 |
| color | 一、基础取值：1. 颜色名：预定义关键字（如red、blue、green、#fff、gray等，共147个标准颜色名）；2. 十六进制颜色：#RRGGBB或#RGB简写（如#ff0000、#f00表示红色；#ffffff、#fff表示白色）；3. RGB颜色：rgb(R, G, B)，取值范围0-255（如rgb(255,0,0)表示红色；rgb(0,128,0)表示绿色）；4. RGBA颜色：rgba(R, G, B, A)，在RGB基础上增加透明度A（取值0-1，0完全透明，1完全不透明）；二、扩展取值：1. HSL颜色：hsl(H, S, L)，H（色相0-360）、S（饱和度0%-100%）、L（亮度0%-100%）；2. HSLA颜色：hsla(H, S, L, A)，HSL基础上增加透明度A；3. inherit：继承父元素的color属性值；4. currentColor：将当前元素的color值作为其他属性的取值（如border-color: currentColor;） | 1. 基础文字颜色设置：.title { color: #333; font-size: 24px; }.text-danger { color: #dc3545; }.text-success { color: #28a745; }2. 透明文字效果：.hint-text { color: rgba(0,0,0,0.6); font-size: 14px; }3. HSL颜色使用：.link { color: hsl(210, 100%, 50%); text-decoration: none; }.link:hover { color: hsl(210, 100%, 60%); }4. currentColor复用：.icon-btn { color: #007bff; border: 1px solid currentColor; padding: 8px 12px; }.icon-btn:hover { color: #0056b3; } | CSS样式体系核心属性，属于文字颜色控制类属性，用于定义元素内文本的颜色，包括普通文本、链接文本、按钮文本等，是页面视觉风格的基础属性之一 | 1. 定义文字视觉风格：通过颜色区分文本层级（标题、正文、辅助文本），传递语义信息（成功、危险、警告）；2. 实现透明文字效果：借助RGBA、HSLA实现带透明度的文字，适配特殊视觉场景；3. 颜色复用优化：通过currentColor复用文字颜色到边框、背景等属性，简化样式维护，提升颜色一致性；4. 提升视觉对比度：合理设置文字颜色与背景色的对比度，保障页面可访问性；5. 交互反馈：通过:hover、:active等伪类动态修改color，实现文字的交互反馈效果（如链接 hover 变色） | 1. 兼容性：颜色名、十六进制、RGB全浏览器兼容；RGBA、HSLA IE9+支持；HSL、HSLA IE9+支持；currentColor IE9+支持；2. 继承性：color具有继承性，子元素默认继承父元素的文字颜色；若需修改子元素颜色，需单独设置；3. 链接颜色默认值：浏览器默认链接颜色为蓝色（#0000ee），已访问链接为紫色（#551a8b），可通过a:link、a:visited修改；4. 可访问性要求：文字颜色与背景色的对比度需符合WCAG标准（正文至少4.5:1，大文本至少3:1），避免过低对比度导致阅读困难；5. 颜色格式选择：十六进制颜色兼容性最好，书写简洁；RGBA/HSLA适合需要透明度的场景；HSL适合需要微调颜色亮度/饱和度的场景；6. 性能影响：不同颜色格式对性能无明显影响，建议项目内统一颜色格式，提升代码可维护性 |
| column-gap | 一、基础取值（列间距控制）：1. normal：默认值，列间距为0（多列布局下有默认约1em间距）；2. 长度值：px、em、rem等（如column-gap: 25px; 列间距为25px）；3. 百分比值：基于父容器宽度的百分比（如column-gap: 6%; 列间距为父容器宽度的6%）；二、扩展取值：1. inherit：继承父元素的column-gap属性值；2. initial：恢复默认值normal；三、生效前提：作用于grid布局、flex布局容器，或多列布局容器，仅控制列方向间距 | 1. Grid布局列间距：.grid-column-gap { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 30px; row-gap: 15px; }2. Flex布局列间距：.flex-column-gap { display: flex; column-gap: 20px; }.flex-item { flex: 1; }3. 多列布局列间距：.multi-column-gap { column-count: 3; column-gap: 20px; column-rule: 1px dashed #ccc; }4. 响应式列间距：.responsive-column-gap { display: grid; column-gap: 25px; }@media (max-width: 768px) { .responsive-column-gap { column-gap: 15px; } } | CSS布局辅助属性，属于间距控制类属性，是gap的单列方向拆分属性，专门用于控制grid、flex布局容器内子元素的列间距，或多列布局的列间距，实现行列间距的精准拆分控制 | 1. 精准控制列间距：单独调整列方向间距，不影响行间距，适配行列间距不同的布局需求；2. 配合row-gap使用：与row-gap组合，实现行列间距的独立控制，适配复杂布局场景；3. 优化多列排版：在多列布局中，精准控制列间距，提升文本阅读体验；4. 灵活响应式适配：响应式布局中，可单独修改列间距，适配不同屏幕宽度 | 1. 兼容性：与gap一致，IE不支持，现代浏览器支持，部分旧浏览器需添加-webkit-前缀；2. 多列布局默认值：多列布局下，column-gap默认值为normal（约1em），其他布局默认值为0；3. 单位选择：百分比值基于父容器宽度，适配响应式布局更灵活；固定长度单位适合固定宽度布局；4. 与padding区别：column-gap是子元素之间的间距，padding是容器内边距，两者作用范围不同，可配合使用；5. 继承性：具有继承性；6. 注意事项：grid布局中，column-gap会增加容器的总宽度，需注意容器尺寸计算（如父容器固定宽度时，列宽+列间距总和不能超过父容器宽度）；多列布局中，列间距不宜过大，避免单列宽度过窄影响阅读 |
| contain | 一、基础取值（元素渲染隔离）：1. none：默认值，无渲染隔离，元素渲染影响全局；2. strict：严格隔离（等价于 contain: layout paint size style）；3. layout：布局隔离，元素内部布局变化不影响外部，外部布局变化不影响内部；4. paint：绘制隔离，元素的绘制区域被限制在自身盒模型内，不会溢出绘制；5. size：尺寸隔离，元素的尺寸仅由自身内容决定，不受外部影响；6. style：样式隔离，元素的样式计算不影响外部（部分浏览器支持）；二、扩展取值：inherit（继承父元素值）、initial（恢复默认none）；三、作用：减少浏览器重排重绘范围，提升渲染性能 | 1. 组件渲染隔离：.custom-component { contain: layout paint; /* 布局和绘制隔离 */ }2. 动态内容性能优化：.dynamic-list { contain: size layout; /* 尺寸和布局隔离，内部更新不影响外部 */ }3. 严格隔离组件：.heavy-component { contain: strict; /* 全面隔离，最大化性能优化 */ }4. 配合动画优化：.animated-element { contain: paint; animation: slide 1s infinite; /* 绘制隔离，避免动画触发全局重绘 */ } | CSS性能优化核心属性，属于渲染隔离类属性，用于限制元素的渲染影响范围，将元素的布局、绘制、尺寸、样式计算隔离在自身范围内，减少浏览器重排重绘的代价，提升页面性能 | 1. 减少重排重绘：元素内部内容变化时，仅触发自身的重排重绘，不影响外部元素，降低渲染消耗；2. 优化组件性能：对独立组件（如卡片、弹窗）设置隔离，避免组件间渲染干扰，提升组件复用性；3. 提升动画流畅度：对动画元素设置绘制隔离，防止动画触发全局重绘，避免卡顿；4. 辅助内容可见性优化：与content-visibility配合使用，进一步强化渲染性能优化效果 | 1. 兼容性：IE不支持，Chrome 52+、Firefox 49+、Safari 10.1+支持，部分旧浏览器需添加-webkit-前缀；2. 取值组合：可组合多个取值（如layout paint），实现精准的隔离控制；推荐根据需求组合，而非直接使用strict（可能过度隔离）；3. 布局隔离注意：设置contain: layout后，元素会成为BFC（块级格式化上下文），可能影响浮动、margin折叠等布局行为；4. 绘制隔离效果：设置contain: paint后，元素溢出的内容会被裁剪（类似overflow: hidden），需注意内容显示需求；5. 继承性：不具有继承性；6. 适用场景：动态更新的组件（如列表刷新）、复杂动画元素、独立功能组件；简单静态元素使用提升有限；7. 注意事项：避免过度使用strict隔离，可能导致布局异常；使用前需测试组件的布局和交互是否正常 |
| content | 一、基础取值：1. normal：默认值，无内容（伪元素::before/::after默认值，此时伪元素不显示）；2. 字符串：直接写入文本内容（如content: "→";）；3. url()：插入图片内容（如content: url(icon.png);）；4. attr(属性名)：获取元素的指定属性值作为内容（如content: attr(data-text);）；5. counter()/counters()：插入计数器内容（配合counter-reset和counter-increment实现自定义列表序号）；二、扩展取值：1. 组合内容：多个取值用空格分隔（如content: "[" attr(title) "]";）；2. inherit：继承父元素的content属性值；3. initial：恢复默认值normal | 1. 伪元素添加文本：.link::after { content: " (新)"; color: #dc3545; font-size: 12px; }2. 伪元素添加图标：.arrow::before { content: url(arrow-right.png); margin-right: 5px; }3. 读取元素属性值：span[data-tip]::after { content: attr(data-tip); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: #333; color: #fff; padding: 2px 8px; font-size: 12px; }4. 自定义列表序号：ol { counter-reset: list-counter; list-style: none; padding-left: 0; }ol li::before { content: counter(list-counter) ". "; counter-increment: list-counter; font-weight: bold; } | CSS伪元素核心属性，属于内容生成类属性，主要用于为::before和::after伪元素生成内容（文本、图片、属性值等），伪元素必须设置content才会显示，是美化和扩展元素内容的重要属性 | 1. 扩展元素内容：通过伪元素为元素添加额外的文本、图标等内容，无需修改HTML结构；2. 实现装饰效果：为链接、按钮等元素添加箭头、标签等装饰性内容，提升视觉效果；3. 显示元素属性信息：读取元素的自定义属性值并显示，实现提示文本、状态标签等功能；4. 自定义序号：配合计数器实现自定义列表序号，突破默认列表标记的限制 | 1. 兼容性：全浏览器兼容，无版本限制；2. 伪元素依赖：content属性主要用于::before和::after伪元素，这两个伪元素必须设置content（非normal）才会被渲染显示；3. 内容类型限制：插入的图片内容无法直接控制尺寸，需将伪元素转为块级或行内块元素后通过width/height控制；4. 计数器使用条件：使用counter()/counters()需先通过counter-reset在父元素重置计数器，再通过counter-increment在子元素递增计数器；5. 继承性：具有继承性，但伪元素的content通常直接设置，较少继承；6. 可访问性：伪元素生成的内容可能无法被部分屏幕阅读器识别，重要信息不建议仅通过伪元素content展示；7. 性能影响：简单文本或小图标内容对性能无影响；插入大量图片或复杂计数器可能轻微影响渲染效率 |
| content-visibility | 一、基础取值（元素内容可见性优化）：1. visible：默认值，元素正常渲染，无论是否在视口内；2. hidden：元素不在视口内时不渲染内容（仅渲染元素自身盒模型），进入视口后渲染；3. auto：浏览器自动判断，不在视口内且无交互的元素不渲染内容，提升性能；二、扩展取值：1. inherit：继承父元素的content-visibility属性值；2. initial：恢复默认值visible；三、配套属性：contain-intrinsic-size（设置元素不可见时的占位尺寸，避免布局跳动） | 1. 长列表性能优化：.list-item { content-visibility: auto; contain-intrinsic-size: 100px; /* 占位高度100px */ }2. 滚动容器优化：.scroll-container { height: 500px; overflow: auto; }.scroll-container > div { content-visibility: auto; contain-intrinsic-size: 200px; }3. 隐藏元素优化：.offscreen-element { content-visibility: hidden; contain-intrinsic-size: 300px 200px; /* 占位宽高 */ }4. 动态内容优化：.dynamic-content { content-visibility: auto; contain-intrinsic-size: auto 500px; /* 最小高度500px */ } | CSS性能优化核心属性，属于内容渲染控制类属性，用于控制元素内容是否渲染，通过延迟渲染视口外的元素内容，减少初始渲染时间和内存占用，大幅提升长列表、复杂页面的加载性能 | 1. 提升加载性能：延迟渲染视口外元素的内容，减少初始渲染的DOM节点和样式计算量，加快页面加载速度；2. 降低内存占用：不渲染不可见内容，减少浏览器内存消耗，避免页面卡顿；3. 避免布局跳动：配合contain-intrinsic-size设置占位尺寸，确保元素不可见时仍有固定大小，避免滚动时布局偏移；4. 优化动态页面：对动态加载、滚动加载的内容，自动控制渲染时机，简化性能优化代码 | 1. 兼容性：Chrome 85+、Edge 85+支持，Firefox、Safari暂不支持；需添加-webkit-前缀适配webkit内核浏览器；2. 核心配套属性：使用content-visibility时必须配合contain-intrinsic-size，否则元素不可见时高度为0，会导致页面布局跳动；3. 渲染时机：元素进入视口后会立即渲染内容，离开视口后若再次进入，会重新渲染（部分浏览器有缓存优化）；4. 交互元素注意：若元素包含交互事件（如click、hover），设置content-visibility: auto时，浏览器会优先渲染以保证交互正常；5. 继承性：具有继承性；6. 性能提升场景：对长列表（千行以上）、复杂组件（大量嵌套DOM）的优化效果最明显；简单页面使用提升有限；7. 降级处理：不支持的浏览器会忽略该属性，元素正常渲染，可通过@supports检测是否支持：@supports (content-visibility: auto) { .list-item { content-visibility: auto; } } |
| counter-increment | 一、基础取值：1. none：默认值，不递增任何计数器；2. 计数器名称：递增指定名称的计数器（默认递增1，如counter-increment: list-num;）；3. 计数器名称+递增步长：指定计数器的递增步长（如counter-increment: list-num 2; 每次递增2）；二、扩展取值：1. 多个计数器：同时递增多个计数器（用空格分隔，如counter-increment: counter1 counter2 3;）；2. 负步长：设置负数步长实现计数器递减（如counter-increment: list-num -1; 每次递减1）；3. inherit：继承父元素的counter-increment属性值；4. initial：恢复默认值none | 1. 基础计数器递增：ul { counter-reset: item-counter; list-style: none; }ul li { counter-increment: item-counter; }ul li::after { content: "第" counter(item-counter) "项"; }2. 自定义递增步长：ol { counter-reset: step-counter; list-style: none; }ol li { counter-increment: step-counter 2; }ol li::before { content: "步骤" counter(step-counter) "："; } /* 2、4、6... */3. 计数器递减：.count-down { counter-reset: down-counter 10; }.count-down .item { counter-increment: down-counter -1; }.count-down .item::before { content: counter(down-counter); } /* 9、8、7... */4. 多个计数器递增：.multi-counter { counter-reset: c1 0 c2 0; }.multi-counter .box { counter-increment: c1 1 c2 3; }.multi-counter .box::before { content: "c1:" counter(c1) ", c2:" counter(c2); } | CSS计数器核心属性，属于计数器递增类属性，用于递增（或递减）通过counter-reset初始化的自定义计数器，控制计数器数值的变化，是CSS计数器体系中连接初始化和显示的关键环节 | 1. 控制计数器数值变化：通过默认递增、自定义步长递增或递减，实现多样化的计数规则；2. 支持多计数器联动：同时递增多个计数器，适配需要同步计数的复杂场景；3. 实现倒计时效果：通过负步长实现计数器递减，满足倒计时、倒序编号等需求；4. 精准控制计数节奏：根据业务需求调整递增步长，实现2、4、6...或3、6、9...等特殊计数序列 | 1. 兼容性：全浏览器兼容，无版本限制；2. 依赖counter-reset：必须先通过counter-reset初始化对应名称的计数器，counter-increment才能生效；未初始化的计数器递增无效果；3. 递增时机：counter-increment在元素渲染时执行递增，伪元素::before/::after中使用counter()可获取递增后的值；4. 步长默认值：未指定步长时，默认递增1；步长可设为任意整数（正整数递增，负整数递减）；5. 多个计数器：同时递增多个计数器时，用空格分隔每个计数器（含步长）；若未指定步长，默认递增1；6. 继承性：具有继承性，子元素会继承父元素的计数器递增规则；7. 性能影响：无明显性能影响，是实现有序编号的高效CSS方案，优于JS动态编号；8. 注意事项：计数器数值仅在CSS中生效，无法直接通过JS获取；若需JS交互，需额外同步数值 |
| counter-reset | 一、基础取值：1. none：默认值，不重置任何计数器；2. 计数器名称：自定义计数器名称（如counter-reset: list-num;），可同时重置多个计数器（用空格分隔）；3. 计数器名称+初始值：指定计数器的初始值（默认初始值为0，如counter-reset: list-num 1; 初始值为1）；二、扩展取值：1. inherit：继承父元素的counter-reset属性值；2. initial：恢复默认值none；三、适用范围：通常作用于计数器的父容器，为子元素的counter-increment提供计数基础 | 1. 基础计数器重置：ul { counter-reset: item-counter; list-style: none; padding-left: 20px; }ul li::before { content: counter(item-counter) ". "; counter-increment: item-counter; }2. 自定义初始值：ol { counter-reset: order-counter 5; list-style: none; padding-left: 20px; }ol li::before { content: counter(order-counter) ". "; counter-increment: order-counter; } /* 序号从5开始 */3. 多个计数器：.container { counter-reset: counter1 0 counter2 10; }.box1::before { content: counter(counter1); counter-increment: counter1; }.box2::before { content: counter(counter2); counter-increment: counter2; }4. 嵌套计数器：.parent-list { counter-reset: parent-counter; }.parent-list li::before { content: counter(parent-counter); counter-increment: parent-counter; }.child-list { counter-reset: child-counter; }.child-list li::before { content: counter(parent-counter) "-" counter(child-counter); counter-increment: child-counter; } | CSS计数器核心属性，属于计数器初始化类属性，用于在指定元素上重置（初始化）一个或多个自定义计数器，为后续通过counter-increment递增计数器和counter()显示计数内容提供基础 | 1. 初始化自定义计数器：为列表、步骤条等需要有序编号的场景，初始化计数器的名称和初始值；2. 支持多计数器场景：同时重置多个计数器，适配需要多种编号体系的复杂布局；3. 实现嵌套编号：配合嵌套容器重置子计数器，实现父子层级的联动编号（如1-1、1-2）；4. 灵活控制计数起点：通过指定初始值，让计数器从任意数字开始，满足特殊编号需求 | 1. 兼容性：全浏览器兼容，无版本限制；2. 计数器联动：counter-reset需与counter-increment、counter()/counters()配合使用，三者共同构成CSS计数器体系；仅重置计数器不递增和显示，无实际效果；3. 作用范围：计数器的作用范围为设置counter-reset的元素及其所有子元素，子元素内可重置新的计数器（嵌套计数器）；4. 初始值默认：未指定初始值时，计数器默认初始值为0；若需从1开始计数，可省略初始值（counter-increment默认递增1）；5. 继承性：具有继承性，子元素会继承父元素的计数器重置规则；6. 性能影响：简单计数器对性能无影响；大量嵌套计数器或频繁重置计数器可能轻微影响渲染效率；7. 适用场景：主要用于自定义列表序号、步骤条编号、表单字段编号等需要有序标识的场景，替代复杂的JS编号逻辑 |
| cursor | 一、基础取值（常用鼠标样式关键字）：1. default：默认光标（箭头）；2. pointer：手型光标，提示元素可点击（如链接、按钮）；3. text：文本光标（I型），提示元素可选中/输入文本；4. wait：等待光标（转圈/沙漏），提示正在加载中；5. help：帮助光标（箭头+问号），提示有帮助信息；6. move：移动光标（十字箭头），提示元素可拖动；7. not-allowed：禁止光标（圆圈加斜杠），提示操作不可用；二、扩展取值：1. 自定义光标：url("光标图片路径"), 备用光标（如cursor: url(custom.cur), pointer;）；2. inherit：继承父元素的cursor属性值；3. initial：恢复默认值default | 1. 基础交互光标设置：a { cursor: pointer; }input[type="text"] { cursor: text; }.btn-disabled { cursor: not-allowed; opacity: 0.6; }2. 功能场景光标：.draggable { cursor: move; }.loading { cursor: wait; }.help-icon { cursor: help; }3. 自定义光标：.custom-cursor { cursor: url(icon-cursor.png) 8 8, pointer; /* 8 8为光标热点坐标 */ }4. 响应式光标：.responsive-cursor { cursor: pointer; }@media (max-width: 768px) { .responsive-cursor { cursor: default; } } | CSS交互样式核心属性，属于鼠标光标控制类属性，用于定义鼠标悬停在元素上时的光标样式，通过视觉反馈引导用户理解元素的交互特性 | 1. 提示交互功能：通过不同光标样式，直观告知用户元素的可交互类型（可点击、可输入、可拖动、不可用）；2. 提升用户体验：明确的光标反馈可减少用户的操作困惑，提升交互的流畅性；3. 适配功能场景：在加载、帮助、拖动等特殊功能场景下，通过光标样式提示用户当前状态；4. 强化品牌风格：通过自定义光标样式，增强页面的个性化和品牌辨识度（谨慎使用，避免影响可用性） | 1. 兼容性：常用关键字光标（default、pointer、text等）全浏览器兼容；自定义光标IE9+支持，现代浏览器全兼容；2. 自定义光标要求：光标图片格式支持cur、png、gif等，建议提供备用光标（如pointer），避免图片加载失败时无光标反馈；需指定光标热点坐标（默认0 0，即图片左上角），确保光标点击位置准确；3. 生效范围：cursor作用于元素的整个区域，包括padding和border；4. 继承性：具有继承性，子元素默认继承父元素的光标样式；5. 移动设备注意：移动设备（手机、平板）无鼠标光标，cursor属性对其无效，无需为移动优先的元素额外设置；6. 性能影响：默认光标样式对性能无影响；自定义光标需确保图片体积小，避免加载延迟导致的光标显示异常 |
| display | 一、基础取值：1. none：元素完全隐藏，不占据任何页面空间，从渲染树中移除；2. block：块级元素模式，独占一行布局，可正常设置width、height、margin、padding全方向属性；3. inline：行内元素模式，与其他行内元素同行排列，无法设置宽高，仅水平方向margin、padding生效；4. inline-block：行内块混合模式，既保持同行排列特性，又可正常设置宽高及全方向内外边距；二、扩展取值：1. flex：将元素定义为弹性布局容器，子元素遵循flexbox布局规则排列；2. grid：将元素定义为网格布局容器，子元素按网格轨道规则排列；3. table：模拟表格容器特性，子元素可配合table-cell等实现表格布局；4. inherit：继承父元素的display属性值 | 1. 元素隐藏与显示：.hidden-element { display: none; }.show-element { display: block; }2. 行内块按钮布局：.btn-group .btn { display: inline-block; width: 120px; height: 40px; margin: 0 5px; }3. 弹性居中布局：.center-container { display: flex; justify-content: center; align-items: center; width: 100%; height: 300px; }4. 网格卡片布局：.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } | CSS布局体系核心属性，属于元素显示模式控制类属性，用于定义元素的渲染显示类型及所属布局模式，是控制页面布局的基础属性 | 1. 控制元素渲染状态：切换元素显示/隐藏，决定元素是否参与页面布局；2. 定义布局容器类型：通过flex、grid等取值快速构建现代弹性布局、网格布局；3. 调整元素排列特性：在块级、行内、行内块等模式间切换，适配不同排版需求；4. 重置默认显示模式：覆盖浏览器对HTML元素的默认显示设定（如将span转为block实现独占一行）；5. 实现特殊布局模拟：通过table取值模拟表格布局，适配特定需求场景 | 1. 兼容性：基础取值（none、block、inline、inline-block）全浏览器兼容；flex取值IE10+支持（需添加-ms-前缀）；grid取值IE11+支持（需添加-ms-前缀）；2. 关键区别：display: none与visibility: hidden的差异——前者不占空间、从渲染树移除，后者占空间仅视觉隐藏；3. 行内元素限制：inline模式下设置width、height、垂直margin/padding无效，需切换为inline-block或block；4. 布局优先级：display定义的布局模式优先级高于float、position（定位元素除外）；5. 性能影响：频繁切换display: none会触发重排重绘，影响页面性能，动态显示隐藏优先考虑visibility或opacity（需配合position脱离文档流） |
| filter | 一、基础取值（滤镜函数）：1. none：默认值，无滤镜效果；2. blur(px)：模糊效果，px为模糊半径（值越大越模糊）；3. brightness(%)：亮度调整，100%为原始亮度，>100%提亮，<100%变暗；4. contrast(%)：对比度调整，100%为原始对比度，>100%增强，<100%降低；5. grayscale(%)：灰度效果，0%为原始色彩，100%为全灰度；6. opacity(%)：透明度调整（与opacity属性类似，0%完全透明，100%完全不透明）；7. saturate(%)：饱和度调整，100%为原始饱和度，>100%增强，<100%降低；二、扩展取值：1. 组合滤镜：多个滤镜函数用空格分隔（如filter: blur(2px) brightness(120%);）；2. inherit：继承父元素的filter属性值；3. initial：恢复默认值none | 1. 图片模糊效果：.blur-img { filter: blur(3px); transition: filter 0.3s; }.blur-img:hover { filter: none; }2. 灰度图片效果：.gray-img { filter: grayscale(100%); }.gray-img:hover { filter: grayscale(0%); }3. 亮度与对比度调整：.dark-img { filter: brightness(80%) contrast(120%); }4. 组合滤镜效果：.vintage-img { filter: sepia(30%) saturate(80%) brightness(90%); }5. 毛玻璃效果：.glassmorphism { filter: blur(8px); background: rgba(255,255,255,0.5); } | CSS视觉效果核心属性，属于图像滤镜类属性，通过滤镜函数对元素（图片、文字、背景等）进行模糊、亮度、对比度、灰度等视觉处理，实现丰富的特效效果 | 1. 美化图像显示：为图片添加模糊、灰度、复古等效果，提升页面视觉质感；2. 实现交互特效：配合hover、transition实现滤镜效果的平滑切换，增强交互体验；3. 营造氛围效果：通过亮度、对比度调整营造明暗氛围，或通过毛玻璃效果实现分层视觉；4. 统一视觉风格：对页面元素统一应用滤镜，强化整体视觉主题（如复古、暗黑模式） | 1. 兼容性：IE不支持filter属性；Chrome 53+、Firefox 35+、Safari 9.1+支持；部分旧浏览器需添加-webkit-前缀；2. 性能影响：filter属性（尤其是blur）会增加浏览器渲染压力，大量元素使用或模糊半径过大会导致页面卡顿；建议仅对关键元素使用，避免过度使用；3. 与opacity区别：filter: opacity(%)与opacity属性效果类似，但filter的透明度会参与滤镜计算，且部分浏览器对filter的硬件加速优化更好；4. 作用范围：filter作用于元素及其所有子元素，无法单独对父元素应用滤镜而不影响子元素；5. 毛玻璃效果注意：实现毛玻璃时，元素需有背景色（半透明），且父元素有可模糊的背景（如图片、渐变），否则效果不明显；6. 打印影响：部分浏览器打印时不支持filter效果，需单独设置打印样式（@media print）关闭滤镜 |
| filter: drop-shadow | 一、基础取值（元素投影）：1. none：默认值，无投影效果；2. 多值组合：水平偏移 垂直偏移 模糊半径 投影颜色;（如filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.3));）；- 水平偏移：必选，正数向右，负数向左；- 垂直偏移：必选，正数向下，负数向上；- 模糊半径：可选，默认0，值越大投影越模糊；- 投影颜色：可选，默认与元素颜色一致；二、扩展取值：1. 多重投影：多个投影规则用逗号分隔（较少使用）；2. inherit：继承父元素的filter属性值；3. initial：恢复默认值none；三、生效前提：作用于所有HTML元素，是filter属性的子功能，控制元素的投影效果 | 1. 透明元素投影：.transparent-shadow { width: 100px; height: 100px; border-radius: 50%; background: rgba(0,123,255,0.5); filter: drop-shadow(3px 3px 5px rgba(0,0,0,0.2)); }2. 图片投影：.img-drop-shadow { filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.3)); }3. 嵌套元素统一投影：.parent-drop { filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.2)); }.parent-drop .child { width: 50px; height: 50px; background: #dc3545; margin: 10px; }4. 投影与过渡：.hover-drop { filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.2)); transition: filter 0.3s; }.hover-drop:hover { filter: drop-shadow(4px 4px 8px rgba(0,0,0,0.3)); } | CSS元素美化辅助属性，属于filter滤镜类的子属性，用于为元素添加投影效果，与box-shadow不同，drop-shadow会跟随元素的透明区域轮廓显示投影，适用于透明图片、不规则形状元素等场景 | 1. 适配不规则元素：为透明图片、圆角元素、自定义形状元素等添加投影，投影会跟随元素的实际轮廓显示，效果更自然；2. 统一嵌套元素投影：为父元素设置drop-shadow，所有子元素会共享一个投影效果，避免多个子元素单独设置阴影导致的重叠问题；3. 实现自然投影效果：相比box-shadow，drop-shadow的投影效果更接近真实世界的光线投影，尤其是对于透明和不规则元素；4. 配合滤镜组合使用：可与其他filter滤镜（如brightness、contrast）组合使用，实现更丰富的视觉效果 | 1. 兼容性：IE不支持，Chrome 53+、Firefox 35+、Safari 9.1+支持，部分旧浏览器需添加-webkit-前缀；2. 与box-shadow的区别：- box-shadow：基于元素的盒模型（矩形）显示阴影，不考虑元素的透明区域；- drop-shadow：基于元素的Alpha通道（实际可见轮廓）显示阴影，支持透明区域；3. 性能影响：drop-shadow属于滤镜效果，性能消耗比box-shadow略高；大量使用可能导致页面卡顿；4. 投影范围：drop-shadow的投影范围受元素的可见区域限制，透明区域不会显示投影；5. 继承性：不具有继承性；6. 注意事项：避免在大尺寸透明元素上使用drop-shadow，性能消耗较大；drop-shadow不支持扩散半径和内阴影，若需要这些效果，需使用box-shadow；使用时需测试不同浏览器下的显示效果，确保投影轮廓准确 |
| flex | 一、复合属性拆解（flex子元素伸缩属性，可单独设置子属性）：1. flex-grow：伸缩增长因子，定义子元素的增长比例（默认0，不增长；数值越大，增长空间越多）；2. flex-shrink：伸缩收缩因子，定义子元素的收缩比例（默认1，可收缩；0为不收缩）；3. flex-basis：子元素的基础尺寸（默认auto，为元素本身尺寸；可设px、%等固定/相对尺寸）；二、常用简写取值：1. flex: none：等同于flex: 0 0 auto（不增长、不收缩、基础尺寸为自身尺寸）；2. flex: auto：等同于flex: 1 1 auto（可增长、可收缩、基础尺寸为自身尺寸）；3. flex: 1：等同于flex: 1 1 0%（可增长、可收缩、基础尺寸为0%）；三、扩展取值：inherit（继承父元素的flex属性值）、initial（恢复默认值0 1 auto） | 1. 均等分配空间：.flex-container { display: flex; height: 200px; gap: 10px; }.flex-item { flex: 1; /* 子元素均等分配容器空间 */ }2. 固定尺寸不伸缩：.fixed-item { flex: none; width: 150px; }3. 按比例分配空间：.flex-container { display: flex; }.item1 { flex: 2; } /* 占2份空间 */.item2 { flex: 1; } /* 占1份空间 */4. 响应式伸缩：.product-card { flex: 1 1 200px; /* 基础尺寸200px，可伸缩 */ }@media (max-width: 768px) { .product-card { flex: 1 1 100%; } } | CSS弹性布局核心属性，属于flex子元素伸缩控制复合属性，用于定义flex子元素在容器内的伸缩规则（增长、收缩比例及基础尺寸），决定子元素如何分配容器的剩余空间或收缩以适应容器 | 1. 分配剩余空间：通过flex-grow按比例分配容器的剩余空间，实现子元素的灵活伸缩；2. 控制收缩行为：通过flex-shrink控制子元素在容器不足时是否收缩及收缩比例，避免内容溢出；3. 定义基础尺寸：通过flex-basis设置子元素的基础尺寸，精准控制换行时机和初始大小；4. 简化伸缩设置：通过简写取值快速实现常见的伸缩需求，减少代码量 | 1. 兼容性：IE10+支持，需添加-ms-前缀（如-ms-flex）；现代浏览器全兼容；2. 生效条件：仅作用于flex容器的子元素（flex item），父元素必须设置display: flex/inline-flex；3. 简写规则：flex的简写顺序为flex-grow flex-shrink flex-basis，后两个值可省略（省略时flex-shrink为1，flex-basis为0%或auto，取决于是否有单位）；4. flex-basis优先级：flex-basis的优先级高于width/height（主轴方向），若主轴为水平，flex-basis优先于width；5. 不伸缩场景：设置flex: none（0 0 auto）时，子元素不会伸缩，保持自身尺寸；6. 继承性：具有继承性，但子元素通常单独设置flex规则；7. 性能影响：无明显性能影响，是弹性布局中控制子元素伸缩的高效方案 |
| flex-direction | 一、基础取值（弹性容器子元素排列方向）：1. row：默认值，水平方向从左到右排列（主轴为水平方向）；2. row-reverse：水平方向从右到左排列；3. column：垂直方向从上到下排列（主轴为垂直方向）；4. column-reverse：垂直方向从下到上排列；二、扩展取值：1. inherit：继承父元素的flex-direction属性值；2. initial：恢复默认值row；三、生效前提：仅作用于flex容器（display: flex/inline-flex） | 1. 水平排列布局：.nav-container { display: flex; flex-direction: row; justify-content: space-between; align-items: center; }2. 水平反向排列：.reverse-list { display: flex; flex-direction: row-reverse; gap: 15px; }3. 垂直排列布局：.card-container { display: flex; flex-direction: column; gap: 20px; }4. 垂直反向排列：.footer-links { display: flex; flex-direction: column-reverse; align-items: center; } | CSS弹性布局核心属性，属于弹性容器方向控制类属性，用于定义flex容器内子元素的排列方向（水平或垂直），决定弹性布局的主轴方向，是构建弹性布局的基础属性之一 | 1. 控制布局方向：快速切换水平/垂直布局，适配不同的页面结构需求（如导航栏水平排列、卡片垂直排列）；2. 实现反向排列：无需调整HTML结构，通过反向取值实现元素的逆序排列，提升布局灵活性；3. 适配响应式布局：配合媒体查询动态切换排列方向（如大屏水平、小屏垂直），提升页面适配性；4. 构建复杂弹性布局：与其他flex属性配合，构建多样化的弹性布局结构 | 1. 兼容性：IE10+支持，需添加-ms-前缀（如-ms-flex-direction）；现代浏览器全兼容；2. 主轴与交叉轴：flex-direction决定主轴方向（row/row-reverse为主轴水平，column/column-reverse为主轴垂直），交叉轴与主轴垂直，justify-content控制主轴对齐，align-items控制交叉轴对齐；3. 子元素影响：flex容器的子元素（flex item）会跟随主轴方向排列，默认不换行（需配合flex-wrap控制换行）；4. 继承性：具有继承性，子flex容器会继承父容器的排列方向；5. 性能影响：无明显性能影响，弹性布局本身是高效的布局方案；6. 与display配合：必须先将父元素设置为display: flex或inline-flex，该属性才会生效 |
| flex-wrap | 一、基础取值（弹性容器子元素换行控制）：1. nowrap：默认值，子元素不换行，超出容器时会收缩或溢出；2. wrap：子元素在主轴方向超出容器时自动换行，换行后子元素沿交叉轴方向排列；3. wrap-reverse：子元素超出容器时自动换行，但换行方向与wrap相反（交叉轴反向排列）；二、扩展取值：1. inherit：继承父元素的flex-wrap属性值；2. initial：恢复默认值nowrap；三、生效前提：仅作用于flex容器（display: flex/inline-flex） | 1. 自动换行布局：.product-grid { display: flex; flex-wrap: wrap; gap: 20px; padding: 20px; }.product-card { flex: 1 1 250px; /* 最小宽度250px，超出自动收缩 */ }2. 不换行收缩布局：.nav-links { display: flex; flex-wrap: nowrap; gap: 10px; overflow-x: auto; padding: 10px; }3. 反向换行布局：.reverse-wrap { display: flex; flex-wrap: wrap-reverse; gap: 15px; }4. 响应式换行：.flex-container { display: flex; flex-wrap: nowrap; }@media (max-width: 768px) { .flex-container { flex-wrap: wrap; } } | CSS弹性布局核心属性，属于弹性容器换行控制类属性，用于定义flex容器内子元素在主轴方向超出容器宽度/高度时是否自动换行及换行方向，是实现响应式弹性布局的关键属性 | 1. 实现响应式布局：无需媒体查询即可实现子元素的自动换行，适配不同屏幕尺寸，避免子元素溢出或挤压；2. 控制换行方向：通过正向/反向换行，灵活调整换行后子元素的排列顺序；3. 构建网格式布局：配合flex属性实现类似网格的多行多列布局，替代复杂的浮动布局；4. 处理溢出内容：避免子元素不换行导致的内容溢出或布局错乱，提升页面稳定性 | 1. 兼容性：IE10+支持，需添加-ms-前缀（如-ms-flex-wrap）；现代浏览器全兼容；2. 与flex-direction配合：换行方向由flex-direction决定的主轴和交叉轴方向决定（wrap为交叉轴正向换行，wrap-reverse为反向）；3. 换行后对齐：子元素换行后，行与行之间的对齐方式由align-content控制，而非align-items（align-items控制单行子元素的交叉轴对齐）；4. 子元素尺寸影响：子元素设置flex-basis（基础尺寸）会影响换行时机，基础尺寸越大，越容易触发换行；5. 继承性：具有继承性；6. 性能影响：无明显性能影响，弹性换行是高效的响应式解决方案；7. 最佳实践：结合flex: 1 1 [基础尺寸] 为子元素设置伸缩规则，配合flex-wrap: wrap实现灵活的响应式换行布局 |
| font-size | 一、基础取值：1. 长度值：- 固定单位：px（像素，固定尺寸，如font-size: 16px;）；- 相对单位：em（基于父元素font-size，如1.2em表示父元素的1.2倍）、rem（基于根元素html的font-size，如1.5rem）；2. 百分比值：基于父元素font-size的百分比（如font-size: 120%; 表示父元素的1.2倍）；3. 关键字取值：xx-small、x-small、small、medium（默认，多数浏览器为16px）、large、x-large、xx-large；二、扩展取值：inherit（继承父元素的font-size属性值）、initial（恢复默认值medium） | 1. 基础字号设置：html { font-size: 16px; } /* 根元素字号重置 */.h1 { font-size: 2rem; } /* 32px */.h2 { font-size: 1.5rem; } /* 24px */.body-text { font-size: 1rem; } /* 16px */.hint-text { font-size: 0.875rem; } /* 14px */2. 相对字号设置：.parent { font-size: 18px; }.child { font-size: 1.2em; } /* 21.6px */3. 响应式字号设置：html { font-size: 16px; }@media (min-width: 768px) { html { font-size: 18px; } }@media (min-width: 1200px) { html { font-size: 20px; } }.title { font-size: 2rem; }4. 关键字字号设置：.notice { font-size: large; color: #dc3545; } | CSS字体体系核心属性，属于文字尺寸控制类属性，用于定义元素内文本的字体大小，是区分文本层级（标题、正文、辅助文本）的核心属性 | 1. 定义文本层级：通过不同字号区分页面中的标题（一级、二级、三级）、正文、辅助文本，构建清晰的内容层级结构；2. 适配响应式布局：通过rem相对单位配合根元素字号的媒体查询，实现不同屏幕尺寸下的字号自适应；3. 提升阅读体验：为不同类型的内容设置合适的字号（如正文14-16px，标题20-24px），保障阅读舒适度；4. 语义化样式匹配：配合语义化HTML标签（h1-h6、p、small）设置对应的font-size，强化内容语义与视觉的一致性；5. 适配不同设备：相对单位（em、rem）可适配用户自定义的浏览器默认字号，提升可访问性 | 1. 兼容性：全浏览器兼容，无版本限制；2. 继承性：font-size具有继承性，子元素默认继承父元素的字号；根元素html的默认font-size多数浏览器为16px；3. em vs rem：em基于父元素字号，可能出现多层级嵌套后的字号累积偏差；rem基于根元素字号，层级清晰，推荐用于响应式布局；4. 字号重置最佳实践：建议将根元素html的font-size设置为62.5%（即10px），简化rem计算（1rem=10px，1.6rem=16px）；5. 可访问性要求：正文字号建议不小于14px，避免过小字号导致阅读困难；同时应支持用户浏览器的字号缩放功能，不使用固定px字号限制缩放；6. 浏览器默认字号：用户可在浏览器设置中自定义默认字号，使用相对单位（em、rem、%）可适配该设置，使用固定px则可能覆盖用户设置；7. 性能影响：不同字号单位对性能无明显影响，建议项目内统一字号单位，提升代码可维护性 |
| font-weight | 一、基础取值：1. 关键字：normal（默认，常规粗细，对应数值400）、bold（粗体，对应数值700）、bolder（比父元素更粗）、lighter（比父元素更细）；2. 数值：100（最细）、200、300、400、500、600、700、800、900（最粗），仅整百数值有效；二、扩展取值：inherit（继承父元素的font-weight属性值）、initial（恢复默认值normal） | 1. 基础字体粗细设置：.title { font-weight: bold; font-size: 24px; }.body-text { font-weight: normal; font-size: 16px; }2. 数值型粗细控制：.sub-title { font-weight: 600; }.light-text { font-weight: 300; }3. 相对粗细设置：.parent { font-weight: 500; }.child-bold { font-weight: bolder; } /* 若父元素500，子元素可能为700 */.child-light { font-weight: lighter; } /* 若父元素500，子元素可能为300 */ | CSS字体体系核心属性，属于文字粗细控制类属性，用于定义元素内文本的字体粗细程度，是强化文本层级和视觉重点的关键属性 | 1. 强化文本层级：通过不同粗细区分标题与正文、重点内容与普通内容，提升页面内容的可读性；2. 突出关键信息：对按钮文本、标签、强调语句等设置粗体，引导用户关注核心内容；3. 适配字体风格：配合不同字重的字体（如常规、粗体、黑体），实现丰富的视觉效果；4. 相对粗细适配：通过bolder、lighter实现与父元素的粗细关联，保障样式的一致性 | 1. 兼容性：全浏览器兼容，无版本限制；2. 数值对应关系：400=normal，700=bold，其他数值需字体本身支持对应的字重，否则可能降级显示；3. 字体支持限制：并非所有字体都包含9种字重，多数常用字体仅支持normal（400）和bold（700），使用其他数值前需确认字体支持；4. 继承性：具有继承性，子元素默认继承父元素的字体粗细；5. 与strong标签区别：strong是语义化标签，表示内容重要，默认渲染为bold；font-weight仅控制视觉粗细，无语义含义 |
| gap | 一、基础取值（网格/弹性容器子元素间距）：1. 单值：设置子元素之间的水平和垂直间距相等（如gap: 20px; 水平和垂直间距均为20px）；2. 双值：第一个值为水平间距（列间距），第二个值为垂直间距（行间距）（如gap: 15px 25px; 水平15px，垂直25px）；3. 长度值：px、em、rem等固定单位；4. 百分比值：基于容器宽度（水平间距）或高度（垂直间距）的百分比；二、扩展取值：1. inherit：继承父元素的gap属性值；2. initial：恢复默认值normal（normal在flex中为0，在grid中为0或极小值，因浏览器而异）；三、生效前提：作用于flex容器（display: flex/inline-flex）和grid容器（display: grid/inline-grid） | 1. 弹性容器均匀间距：.flex-list { display: flex; gap: 15px; flex-wrap: wrap; }2. 网格容器行列间距：.grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 30px; /* 列间距20px，行间距30px */ }3. 响应式间距：.card-container { display: flex; gap: 10px; flex-wrap: wrap; }@media (min-width: 768px) { .card-container { gap: 20px; } }4. 百分比间距：.percent-gap { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5%; } | CSS布局核心属性，属于容器子元素间距控制类属性，用于定义flex容器或grid容器内子元素之间的间距（水平和垂直），替代传统的margin间距设置，是简化布局间距控制的关键属性 | 1. 统一控制间距：一次性设置子元素的水平和垂直间距，避免为每个子元素单独设置margin，简化代码；2. 区分行列间距：通过双值取值精准控制水平（列）和垂直（行）间距，提升布局的规整性；3. 适配响应式布局：配合媒体查询动态调整间距大小，适配不同屏幕尺寸，提升页面适配性；4. 避免边缘间距：gap仅作用于子元素之间，不会在容器边缘产生间距，避免传统margin布局的边缘间距问题 | 1. 兼容性：IE不支持gap属性；Chrome 68+、Firefox 61+、Safari 11.1+支持flex容器的gap；grid容器的gap兼容性稍好（Chrome 57+、Firefox 52+）；2. 别名属性：gap是row-gap和column-gap的复合属性；row-gap控制垂直间距（行间距），column-gap控制水平间距（列间距）；3. 容器类型影响：在flex容器中，gap仅控制子元素之间的间距（水平间距在row方向，垂直间距在wrap换行后）；在grid容器中，gap同时控制列间距和行间距；4. 与margin区别：gap是容器级属性，控制所有子元素之间的间距；margin是元素级属性，控制单个元素的间距；gap不会产生容器边缘间距，margin可能需要额外清除边缘间距；5. 继承性：具有继承性；6. 性能影响：无明显性能影响；7. 降级处理：为不支持gap的浏览器，可通过子元素的margin设置间距，并配合容器的padding清除边缘间距 |
| grid-template-columns | 一、基础取值（网格容器列的定义）：1. 长度值：px、em、rem等固定单位（如grid-template-columns: 100px 200px; 定义2列，宽度分别为100px、200px）；2. 百分比值：基于容器宽度的百分比（如grid-template-columns: 30% 70%; 定义2列，占比3:7）；3. fr单位：网格剩余空间的比例单位（如grid-template-columns: 1fr 2fr; 定义2列，占比1:2）；4. repeat()函数：重复定义列规则（如grid-template-columns: repeat(3, 1fr); 定义3列，每列1fr）；5. auto：自动计算列宽（如grid-template-columns: auto 1fr; 第一列自适应内容，第二列占剩余空间）；二、扩展取值：1. inherit：继承父元素的grid-template-columns属性值；2. initial：恢复默认值none；三、生效前提：仅作用于grid容器（display: grid/inline-grid） | 1. 等分布列网格：.grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }2. 固定+自适应列：.layout { display: grid; grid-template-columns: 200px 1fr; gap: 15px; }.sidebar { grid-column: 1; }.main { grid-column: 2; }3. 自适应列宽：.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }4. 混合单位列：.mixed-grid { display: grid; grid-template-columns: 100px 2fr 30%; gap: 10px; } | CSS网格布局核心属性，属于网格容器列定义类属性，用于定义grid容器内列的数量、宽度和尺寸规则，是构建网格布局的基础属性，决定网格的列结构 | 1. 构建列结构：精准定义网格的列数和每列的宽度，实现多样化的列布局（如2列、3列、固定+自适应列）；2. 灵活分配空间：通过fr单位和repeat()函数，快速实现列的等分布局或按比例分配空间；3. 实现响应式网格：通过auto-fit/auto-fill配合minmax()函数，实现自适应列数的响应式网格，无需媒体查询；4. 简化复杂布局：替代传统的浮动+定位布局，用简洁的代码实现复杂的多列布局 | 1. 兼容性：IE不支持grid布局；Chrome 57+、Firefox 52+、Safari 10.1+支持；部分旧浏览器需添加-webkit-前缀；2. 与grid-template-rows配合：grid-template-columns定义列，grid-template-rows定义行，两者共同构成网格的行列结构；3. fr单位特性：fr单位基于网格容器的剩余空间计算，多个fr值按比例分配剩余空间；若存在固定尺寸列，先扣除固定尺寸再分配剩余空间；4. auto-fit/auto-fill：auto-fit会自动调整列数，让列填满容器；auto-fill会尽可能多创建列（即使列无内容）；两者需配合minmax()使用；5. 继承性：具有继承性；6. 性能影响：网格布局是浏览器优化的高效布局方案，无明显性能影响；复杂网格（多列+多嵌套）建议合理规划结构；7. 最佳实践：响应式网格优先使用repeat(auto-fit, minmax(基础尺寸, 1fr))，实现无需媒体查询的自适应布局 |
| grid-template-rows | 一、基础取值（网格容器行的定义）：1. 长度值：px、em、rem等固定单位（如grid-template-rows: 50px 150px; 定义2行，高度分别为50px、150px）；2. 百分比值：基于容器高度的百分比（如grid-template-rows: 20% 80%; 定义2行，占比2:8）；3. fr单位：网格剩余空间的比例单位（如grid-template-rows: 1fr 3fr; 定义2行，占比1:3）；4. repeat()函数：重复定义行规则（如grid-template-rows: repeat(2, 100px); 定义2行，每行100px）；5. auto：自动计算行高（如grid-template-rows: auto 1fr; 第一行自适应内容，第二行占剩余空间）；6. minmax()函数：定义行高的最小值和最大值（如grid-template-rows: minmax(100px, auto); 行高最小100px，最大自适应）；二、扩展取值：1. inherit：继承父元素的grid-template-rows属性值；2. initial：恢复默认值none；三、生效前提：仅作用于grid容器（display: grid/inline-grid） | 1. 固定行高网格：.grid-layout { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 80px 200px 100px; gap: 15px; }.header { grid-row: 1; grid-column: 1 / -1; }.content { grid-row: 2; grid-column: 1 / -1; }2. 自适应行高：.card-grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: auto auto; gap: 20px; }3. 比例分配行高：.main-layout { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr 4fr; gap: 10px; }4. 最小行高限制：.text-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(80px, auto); gap: 15px; } | CSS网格布局核心属性，属于网格容器行定义类属性，用于定义grid容器内行的数量、高度和尺寸规则，与grid-template-columns配合构成网格的完整行列结构，是构建网格布局的基础属性 | 1. 构建行结构：精准定义网格的行数和每行的高度，实现多样化的行布局（如固定行高、自适应行高、比例行高）；2. 灵活分配垂直空间：通过fr单位和repeat()函数，实现行的等分布局或按比例分配垂直剩余空间；3. 控制行高限制：通过minmax()函数设置行高的最小值和最大值，确保行高既不过小也不过大；4. 简化垂直布局：替代传统的margin+padding垂直布局方式，用简洁的代码实现复杂的垂直行列结构 | 1. 兼容性：与grid-template-columns一致，IE不支持，现代浏览器支持；2. 行列协同：grid-template-rows与grid-template-columns共同定义网格的行列数和尺寸，网格项通过grid-row和grid-column定位到具体行列；3. 自动行高特性：当grid-template-rows未定义足够的行，或网格项超出定义的行时，浏览器会自动创建行，行高默认auto（自适应内容）；可通过grid-auto-rows定义自动创建行的高度；4. 百分比行高生效条件：若父容器无明确高度，grid-template-rows的百分比值可能无法生效，需确保网格容器有固定高度或继承高度；5. 继承性：具有继承性；6. 性能影响：无明显性能影响；7. 注意事项：行高设置过小时，可能导致内容溢出；建议结合内容特性合理设置行高，或使用minmax()函数保证最小行高 |
| height | 一、基础取值：1. 长度值：px、em、rem等固定单位（如height: 200px; height: 15em;）；2. 百分比值：基于父元素高度的百分比（如height: 50%; height: 100%;）；3. 关键字取值：- auto：默认值，元素高度自动适配内容高度（绝大多数元素默认值）；- max-content、min-content、fit-content：与width关键字含义一致，基于内容适配高度；- 视口单位：vh（视口高度的1%，如height: 100vh; 即占满整个浏览器窗口高度）；二、扩展取值：inherit（继承父元素的height属性值）、initial（恢复默认值auto） | 1. 固定高度设置：.banner { height: 500px; background: url(banner.jpg) center center no-repeat; background-size: cover; }.footer { height: 120px; background: #333; color: #fff; }2. 占满视口高度：.full-screen { height: 100vh; display: flex; flex-direction: column; justify-content: center; }3. 自适应高度优化：.content { height: auto; min-height: 300px; /* 保障内容过少时的最小高度 */ }4. 百分比高度布局：.parent-box { height: 400px; position: relative; }.child-box { height: 50%; width: 100%; background: rgba(0,0,0,0.1); } | CSS尺寸控制核心属性，属于元素高度定义类属性，用于指定元素在垂直方向上的高度尺寸，配合width共同构建页面的布局结构 | 1. 定义元素垂直尺寸：固定或自适应元素的高度，适配banner、footer、卡片等组件的垂直布局需求；2. 实现全屏布局：通过100vh单位快速实现元素占满浏览器视口高度，构建全屏页面（如登录页、首页Hero区）；3. 保障布局稳定性：通过min-height设置元素最小高度，避免内容过少时布局塌陷；4. 配合定位布局：固定高度的父元素可作为absolute子元素的定位容器，实现垂直方向的精准布局；5. 内容适配：利用auto或关键字取值，让元素高度随内容自动调整，适配动态内容场景（如列表、文章） | 1. 兼容性：基础取值（px、auto）全浏览器兼容；百分比高度需父元素有明确高度方可生效；vh单位IE9+支持；max-content等关键字IE不支持；2. 百分比高度生效条件：父元素必须设置明确的高度（非auto），否则子元素的百分比高度会被解析为auto；若需实现多层级100%高度，需从根元素（html、body）开始设置height: 100%;3. 行内元素限制：inline行内元素设置height无效，需转为block或inline-block；4. 内容溢出处理：固定高度的元素若内容过多，会出现内容溢出，需配合overflow属性处理（如overflow: auto; 显示滚动条；overflow: hidden; 隐藏溢出内容）；5. 替换元素特性：img、video等替换元素的height默认基于原始尺寸，设置height后会按比例缩放（若未设置width）；6. 性能建议：避免为大量动态内容元素设置固定高度，可能导致内容溢出或布局错乱，优先使用auto或min-height |
| hyphens | 一、基础取值（连字符换行控制）：1. none：默认值，禁止使用连字符换行，文本仅在空格或标点后换行；2. manual：仅在文本中添加软连字符（­）的位置使用连字符换行；3. auto：浏览器自动判断换行位置，在合适的单词音节处添加连字符并换行（依赖语言环境）；二、扩展取值：1. inherit：继承父元素的hyphens属性值；2. initial：恢复默认值none；三、生效前提：需配合lang属性指定语言（如lang="en"），且文本容器有明确的宽度限制，仅对多行文本生效 | 1. 英文自动连字符换行：.english-hyphens { width: 200px; lang: en; hyphens: auto; /* 英文单词自动音节换行 */ }2. 手动指定连字符位置：.manual-hyphens { hyphens: manual; }<p class="manual-hyphens">超­文本­标记­语言</p> <!-- 仅在­处换行 --> 3. 禁止连字符换行：.no-hyphens { hyphens: none; width: 150px; }4. 多语言连字符：.german-hyphens { lang: de; hyphens: auto; width: 250px; } | CSS文本排版辅助属性，属于连字符控制类属性，用于控制文本在换行时是否使用连字符连接单词，尤其适用于英文等拼音文字，通过合理的连字符换行，优化窄容器内文本的排版效果和阅读体验 | 1. 优化窄容器排版：在窄容器中（如侧边栏、卡片），通过连字符换行避免单词被截断或出现过长的空白，提升排版规整度；2. 提升阅读流畅性：英文单词按音节换行，保留单词完整性，方便用户阅读；3. 精准控制换行位置：通过manual取值，手动指定连字符换行位置，适配特殊文本场景；4. 适配多语言排版：支持不同语言的连字符规则，提升多语言网站的排版一致性 | 1. 兼容性：IE10+支持部分取值，现代浏览器全兼容，部分旧浏览器需添加-webkit-前缀；2. 语言依赖：auto取值必须配合lang属性指定语言，否则无法生效（不同语言的音节拆分规则不同）；3. 中文支持有限：中文本身无音节拆分，hyphens对中文文本基本无效；中文换行建议使用word-break或word-wrap；4. 软连字符作用：­是软连字符，仅在需要换行时显示为连字符，不换行时不显示；5. 继承性：具有继承性；6. 注意事项：避免在中文文本中使用hyphens；英文文本使用时，建议配合text-wrap: balance，提升整体排版效果；部分浏览器对部分语言的连字符支持不完善，需测试验证 |
| justify-content | 一、基础取值（弹性容器子元素主轴对齐方式）：1. flex-start：默认值，子元素沿主轴起始端对齐；2. flex-end：子元素沿主轴结束端对齐；3. center：子元素沿主轴居中对齐；4. space-between：子元素沿主轴均匀分布，两端无间距，相邻子元素间距相等；5. space-around：子元素沿主轴均匀分布，两端间距为相邻子元素间距的一半；6. space-evenly：子元素沿主轴均匀分布，所有间距（包括两端）相等；二、扩展取值：1. inherit：继承父元素的justify-content属性值；2. initial：恢复默认值flex-start；三、生效前提：仅作用于flex容器（display: flex/inline-flex） | 1. 水平居中布局：.logo-container { display: flex; justify-content: center; height: 80px; align-items: center; }2. 两端对齐布局：.header-content { display: flex; justify-content: space-between; align-items: center; padding: 0 20px; }3. 均匀分布布局：.feature-list { display: flex; justify-content: space-around; gap: 10px; }4. 垂直主轴居中：.form-container { display: flex; flex-direction: column; justify-content: center; height: 400px; } | CSS弹性布局核心属性，属于弹性容器对齐控制类属性，用于定义flex容器内子元素在主轴方向上的对齐方式，精准控制子元素的水平或垂直间距分布，是弹性布局中对齐的关键属性 | 1. 实现精准对齐：快速实现子元素的居中、两端对齐、均匀分布等对齐效果，替代传统的margin定位方式；2. 控制间距分布：通过不同取值精准控制子元素之间及与容器两端的间距，提升布局规整性；3. 适配多布局场景：无论主轴是水平还是垂直方向，均可通过该属性实现对应的对齐需求；4. 简化布局代码：无需编写复杂的间距计算和定位代码，通过单一属性实现多样化对齐效果 | 1. 兼容性：IE10+支持，需添加-ms-前缀（如-ms-flex-pack）；现代浏览器全兼容；space-evenly在IE中不支持；2. 主轴依赖：对齐方向由flex-direction决定的主轴方向决定（水平主轴对齐水平方向，垂直主轴对齐垂直方向）；3. 子元素换行影响：当子元素换行（flex-wrap: wrap）时，该属性仅控制每一行子元素在主轴上的对齐，不影响行与行之间的间距（行间距由align-content控制）；4. 与gap配合：gap属性可设置子元素之间的固定间距，与justify-content配合使用时，间距会叠加（如space-between+gap，相邻子元素间距为gap值）；5. 继承性：具有继承性；6. 性能影响：无明显性能影响，是高效的对齐解决方案 |
| line-height | 一、基础取值：1. 无单位数值：基于当前font-size的倍数（如line-height: 1.5; 表示行高为字号的1.5倍）；2. 长度值：px、em、rem等单位（如line-height: 24px; line-height: 1.5em;）；3. 百分比值：基于当前font-size的百分比（如line-height: 150%; 等同于1.5倍字号）；二、扩展取值：1. normal：默认值，浏览器自动计算（多数浏览器为1.2左右，随字体变化）；2. inherit：继承父元素的line-height属性值；3. initial：恢复默认值normal | 1. 基础行高设置：body { font-size: 16px; line-height: 1.8; } /* 行高28.8px */.title { font-size: 24px; line-height: 1.2; } /* 行高28.8px */2. 固定行高设置：.nav-text { font-size: 14px; line-height: 40px; } /* 导航栏文字垂直居中 */3. 百分比行高设置：.hint-text { font-size: 12px; line-height: 150%; } /* 行高18px */4. 容器行高适配：.text-box { line-height: 2; padding: 10px; border: 1px solid #ddd; } | CSS文本样式核心属性，属于行高控制类属性，用于定义文本行与行之间的垂直距离，是影响文本阅读舒适度的关键属性 | 1. 提升阅读舒适度：合适的行高可避免文本过于拥挤，减少阅读疲劳（正文行高建议1.5-1.8倍）；2. 实现垂直居中：当行高等于元素高度时，单行文本可实现垂直居中；3. 控制文本密度：通过调整行高，控制页面中文本的紧凑度或宽松度，适配不同内容场景；4. 统一排版风格：为页面不同层级文本（标题、正文、辅助文本）设置统一的行高比例，保障排版一致性 | 1. 兼容性：全浏览器兼容，无版本限制；2. 最佳实践：推荐使用无单位数值（如1.5）设置行高，其会继承并基于子元素的font-size计算，比em、%更灵活，避免多层级嵌套后的行高偏差；3. 行高与元素高度关系：单行文本垂直居中的核心是line-height = 元素height；若文本多行，该方法无效，需使用flex等布局方式；4. 继承性：无单位数值的line-height会继承倍数关系，em、%、px则继承计算后的具体数值；5. 默认值差异：不同浏览器的normal行高存在细微差异，建议手动设置统一的行高值，避免跨浏览器排版不一致；6. 性能影响：行高设置对性能无明显影响，但过大的行高会增加页面垂直空间占用 |
| list-style | 一、复合属性拆解（可单独设置子属性）：1. list-style-type：列表项标记类型，取值：disc（默认，实心圆点）、circle（空心圆点）、square（实心方块）、decimal（阿拉伯数字）、decimal-leading-zero（前导零数字）、lower-alpha（小写字母）、upper-alpha（大写字母）、none（无标记）；2. list-style-image：用图片作为列表项标记，取值为url("图片路径")；3. list-style-position：标记位置，取值：outside（默认，标记在列表项内容外部）、inside（标记在列表项内容内部）；二、扩展取值：1. inherit：继承父元素的list-style属性值；2. initial：恢复默认值disc outside none | 1. 基础列表样式设置：ul { list-style: disc outside none; }ol { list-style: decimal outside none; }2. 清除列表标记：.nav-list { list-style: none; padding-left: 0; }.nav-list li { display: inline-block; margin: 0 10px; }3. 自定义列表标记：.custom-list { list-style: url(icon-list.png) inside none; }4. 数字列表样式：.ordered-list { list-style: decimal-leading-zero inside; padding-left: 20px; } | CSS列表样式核心属性，属于列表外观控制复合属性，用于统一控制列表元素（ul、ol、li）的标记类型、标记图片和标记位置，是美化列表布局的关键属性 | 1. 美化列表外观：通过不同标记类型、图片，提升列表的视觉美观度和辨识度；2. 适配内容场景：根据列表内容类型（普通列表、有序步骤、导航列表）设置合适的标记样式；3. 控制标记位置：调整标记在列表项内/外的位置，优化列表的排版紧凑度；4. 实现自定义列表：通过list-style-image使用自定义图片作为标记，强化品牌风格或内容主题 | 1. 兼容性：全浏览器兼容，无版本限制；2. 生效范围：仅对ul、ol、li等列表元素生效，或设置了display: list-item的元素；3. 清除默认样式：浏览器默认ul/ol有padding-left，li有默认标记，实际开发中常设置list-style: none并清除padding-left，自定义列表样式；4. list-style-image注意：自定义标记图片尺寸受字体大小影响，过大可能显示异常；建议使用小尺寸图片（如16x16px），或通过背景图片替代（更灵活控制尺寸和位置）；5. 继承性：具有继承性，ul/ol的样式会继承给li；6. 性能影响：默认标记样式对性能无影响；使用list-style-image时，需确保图片体积小，避免加载延迟 |
| margin | 一、基础取值：1. 长度值：px、em、rem、%等单位（如margin: 10px; margin: 2em; margin: 5%;）；2. 关键字：auto（自动分配剩余空间，常用于块级元素水平居中）；3. 复合取值规则（顺时针顺序：上→右→下→左）：- 单值：margin: 15px; （四方向外边距均为15px）；- 双值：margin: 10px 20px; （上下10px，左右20px）；- 三值：margin: 8px 12px 16px; （上8px，左右12px，下16px）；- 四值：margin: 5px 10px 15px 20px; （上5px、右10px、下15px、左20px）；二、扩展取值：inherit（继承父元素的margin属性值）；三、单方向拆分取值：margin-top、margin-right、margin-bottom、margin-left | 1. 块级元素水平居中：.content-box { width: 800px; margin: 0 auto; }2. 复合外边距设置：.card { margin: 20px 15px; border: 1px solid #ddd; }3. 单方向外边距控制：.section-title { margin-bottom: 25px; font-size: 20px; }.list-item { margin-left: 30px; }4. 响应式外边距：.container { margin: 0 5%; }@media (min-width: 1200px) { .container { margin: 0 10%; } } | CSS盒模型核心属性，属于元素外部间距控制类属性，用于定义元素边框外侧与其他元素之间的空白距离，影响元素与周边元素的布局间距 | 1. 控制元素间距：调整元素与相邻元素的外部空白，优化页面排版的呼吸感；2. 实现水平居中：块级元素设置左右margin为auto，可快速实现水平居中布局；3. 微调元素位置：通过单方向margin的正负值，实现元素的偏移或重叠效果；4. 响应式间距适配：使用%单位或配合媒体查询，实现不同屏幕尺寸下的间距自适应；5. 分隔页面区域：通过上下margin为不同页面区块（如头部、主体、底部）划分清晰边界 | 1. 兼容性：全浏览器兼容，无版本限制；2. 外边距折叠现象：垂直方向上相邻的两个块级元素，其外边距会合并为一个（取两个值中的较大者），水平方向外边距不会折叠；解决方法：为元素添加border、padding或触发BFC（如overflow: hidden）；3. auto取值限制：仅对块级元素有效，行内元素和行内块元素设置auto无效；4. 负值外边距：允许设置负值margin，可实现元素重叠、超出容器、调整布局等特殊效果；5. 百分比取值参考：margin的百分比取值始终基于父元素的宽度计算，与方向无关；6. 行内元素特性：行内元素的垂直margin（top、bottom）不影响行高，仅视觉上溢出显示 |
| margin-collapse | 一、基础取值：1. collapse：默认值，合并相邻块级元素的外边距（垂直方向），取两个外边距中的较大值；2. separate：不合并相邻块级元素的外边距，相邻外边距叠加；二、扩展取值：1. inherit：继承父元素的margin-collapse属性值；2. initial：恢复默认值collapse；三、适用范围：仅适用于表格元素（table、tr、td等）和块级元素的垂直外边距 | 1. 默认外边距合并：.box1 { margin-bottom: 20px; }.box2 { margin-top: 10px; } /* 相邻外边距合并，实际间距为20px（较大值） */2. 禁用外边距合并：.container { display: flow-root; margin-collapse: separate; }.container .box1 { margin-bottom: 20px; }.container .box2 { margin-top: 10px; } /* 外边距叠加，实际间距为30px */3. 表格单元格外边距：table { border-collapse: collapse; margin-collapse: collapse; }td { margin: 5px; } /* 表格单元格外边距合并 */4. 父元素内边距避免合并：.parent { padding-top: 1px; }.parent .child { margin-top: 20px; } /* 父元素内边距阻断外边距合并 */ | CSS盒模型辅助属性，属于外边距合并控制类属性，用于定义相邻块级元素垂直外边距的处理方式（合并或叠加），主要影响块级元素的垂直间距布局 | 1. 控制垂直间距：通过合并或叠加外边距，精准控制相邻块级元素的垂直间距，避免间距过大或过小；2. 优化表格布局：控制表格单元格的外边距合并，确保表格布局的紧凑性和规整性；3. 解决布局问题：通过禁用外边距合并，解决因默认合并导致的间距异常问题；4. 统一布局风格：规范页面中块级元素的外边距处理方式，保持垂直间距的一致性 | 1. 兼容性：全浏览器兼容，无版本限制；2. 外边距合并场景：仅发生在相邻块级元素的垂直外边距（top与bottom），水平外边距（left与right）不会合并；嵌套元素的margin-top也可能与父元素的margin-top合并；3. 禁用合并的其他方法：除了设置margin-collapse: separate，还可通过为父元素添加border、padding、overflow: hidden或display: flow-root等方式阻断外边距合并；4. 表格元素特殊：表格元素的margin-collapse与border-collapse相关，border-collapse: collapse时，单元格外边距通常会合并；5. 继承性：具有继承性，子元素会继承父元素的外边距合并规则；6. 性能影响：无明显性能影响，主要影响布局逻辑；7. 最佳实践：实际开发中，建议统一使用margin-bottom或margin-top控制垂直间距，减少外边距合并带来的布局困惑；若需精准控制间距，可通过父元素内边距或容器包裹的方式阻断合并 |
| object-fit | 一、基础取值（针对替换元素内容适配）：1. fill：默认值，拉伸替换元素内容（图片、视频等），使其完全填充元素容器，可能导致内容变形；2. contain：保持内容的宽高比，缩放内容使其完全显示在容器内，容器可能出现留白；3. cover：保持内容的宽高比，缩放内容使其覆盖整个容器，内容可能被裁剪；4. none：不缩放内容，内容按原始尺寸显示，超出容器部分被裁剪；5. scale-down：自动在contain和none中选择较小的显示方式（内容尺寸不超过原始尺寸和容器尺寸）；二、扩展取值：1. inherit：继承父元素的object-fit属性值；2. initial：恢复默认值fill；三、适用范围：仅适用于替换元素（img、video、iframe等） | 1. 图片封面显示：.avatar { width: 100px; height: 100px; border-radius: 50%; overflow: hidden; }.avatar img { width: 100%; height: 100%; object-fit: cover; }2. 图片完整显示：.product-img { width: 200px; height: 200px; border: 1px solid #ddd; }.product-img img { width: 100%; height: 100%; object-fit: contain; }3. 视频适配容器：.video-container { width: 100%; height: 400px; }.video-container video { width: 100%; height: 100%; object-fit: cover; }4. 保持原始尺寸：.original-img { width: 300px; height: 200px; overflow: hidden; }.original-img img { object-fit: none; } | CSS替换元素核心属性，属于内容适配控制类属性，用于定义替换元素（图片、视频等）的内容如何适配其容器的宽高，控制内容的缩放、裁剪和变形规则 | 1. 图片适配布局：解决图片尺寸与容器尺寸不匹配的问题，避免图片变形，确保图片显示美观；2. 视频容器适配：让视频内容完美适配容器，实现封面式或完整式显示；3. 统一媒体显示风格：为页面中的图片、视频等媒体元素统一设置适配规则，保持布局一致性；4. 灵活控制显示效果：根据需求选择填充、完整显示、覆盖或保持原始尺寸，适配不同的设计场景 | 1. 兼容性：IE不支持object-fit属性；Chrome 32+、Firefox 36+、Safari 10+支持；IE可通过object-position配合背景图片模拟类似效果；2. 适用元素限制：仅对替换元素生效（img、video、iframe、embed等），对非替换元素（div、p等）设置无效；3. 与background-size区别：object-fit控制替换元素自身内容的适配；background-size控制元素背景图片的适配；两者作用对象不同；4. 配合overflow使用：当object-fit为cover、none、scale-down时，内容可能超出容器，需配合overflow: hidden裁剪超出部分；5. 继承性：具有继承性，子替换元素会继承父元素的object-fit规则；6. 性能影响：无明显性能影响，是控制替换元素适配的高效方案；7. 降级处理：为不支持的浏览器（如IE）提供降级方案，可通过将图片转为背景图片（background-size）或使用JS动态调整尺寸 |
| object-position | 一、基础取值（控制替换元素内容的定位点）：1. 关键字：top、right、bottom、left、center（可组合使用，如top left、center right）；2. 长度值：px、em等单位（如object-position: 10px 20px; 水平偏移10px，垂直偏移20px）；3. 百分比值：基于替换元素容器的宽高计算（如object-position: 50% 50%; 居中显示，默认值）；二、扩展取值：1. inherit：继承父元素的object-position属性值；2. initial：恢复默认值50% 50%；三、适用范围：仅适用于替换元素（img、video等），需配合object-fit使用（单独使用效果不明显） | 1. 图片定位显示：.img-container { width: 200px; height: 200px; overflow: hidden; }.img-container img { width: 100%; height: 100%; object-fit: cover; object-position: top; } /* 显示图片顶部区域 */2. 自定义偏移定位：.custom-img { width: 300px; height: 200px; overflow: hidden; }.custom-img img { object-fit: cover; object-position: 20px 0; } /* 水平右移20px */3. 百分比定位：.percent-img { width: 250px; height: 150px; overflow: hidden; }.percent-img img { object-fit: cover; object-position: 80% 50%; } /* 水平80%位置，垂直居中 */4. 视频内容定位：.video-box { width: 100%; height: 300px; }.video-box video { width: 100%; height: 100%; object-fit: cover; object-position: center; } | CSS替换元素辅助属性，属于内容定位控制类属性，用于定义替换元素（图片、视频等）的内容在其容器内的定位位置，配合object-fit使用可精准控制内容的显示区域 | 1. 精准控制显示区域：当替换元素内容被裁剪时（如object-fit: cover），通过定位选择要显示的核心区域（如人物面部、物体主体）；2. 调整内容偏移：微调替换元素内容在容器内的位置，避免关键内容被裁剪；3. 统一媒体定位风格：为页面中同类媒体元素统一设置定位规则，保持显示效果一致性；4. 适配特殊设计需求：根据设计要求，将内容定位在容器的特定位置（如顶部、右侧），实现个性化显示效果 | 1. 兼容性：与object-fit一致，IE不支持；Chrome 32+、Firefox 36+、Safari 10+支持；2. 生效条件：仅对替换元素生效，且通常需要配合object-fit使用（当object-fit为fill时，内容被拉伸填充，object-position效果不明显）；3. 定位基准：定位基准是替换元素的容器，偏移方向与top/right/bottom/left一致（水平方向：left为0，right为容器宽度；垂直方向：top为0，bottom为容器高度）；4. 与background-position区别：object-position控制替换元素自身内容的定位；background-position控制元素背景图片的定位；5. 继承性：具有继承性，子替换元素会继承父元素的object-position规则；6. 性能影响：无明显性能影响；7. 最佳实践：当使用object-fit: cover裁剪图片时，优先将object-position设置为图片的核心区域（如人物面部居中），提升用户体验 |
| opacity | 一、基础取值：1. 数值：0-1之间的小数（包括0和1），0表示完全透明，1表示完全不透明，数值越小透明度越高；二、扩展取值：1. inherit：继承父元素的opacity属性值；2. initial：恢复默认值1 | 1. 元素透明效果：.transparent-box { width: 200px; height: 200px; background: #007bff; opacity: 0.5; }2. hover透明交互：.card { opacity: 1; transition: opacity 0.3s; }.card:hover { opacity: 0.8; }3. 遮罩层透明：.mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.6; z-index: 998; }4. 透明文本容器：.text-container { opacity: 0.7; padding: 15px; background: #fff; } | CSS视觉效果核心属性，属于透明度控制类属性，用于定义元素（包括其所有子元素）的整体透明度，实现元素的透明、半透明视觉效果 | 1. 实现透明视觉效果：为元素添加半透明效果，营造层次感（如遮罩层、悬浮卡片）；2. 交互反馈效果：通过hover事件动态修改opacity，实现元素的淡入淡出交互（配合transition可实现平滑过渡）；3. 叠加视觉效果：半透明元素叠加在其他元素上方，产生色彩混合的视觉效果；4. 隐藏/显示过渡：通过opacity: 0实现元素透明隐藏，配合visibility可实现无抖动的显示隐藏过渡 | 1. 兼容性：IE9+支持，IE8及以下需使用filter: alpha(opacity=50)（数值0-100，对应opacity 0-1）；2. 继承特性：opacity会作用于元素及其所有子元素，无法单独为父元素设置透明度而不影响子元素；若需仅父元素透明，可使用rgba颜色的background或border；3. 与visibility/hidden区别：opacity: 0仅视觉透明，元素仍占据页面空间，可响应交互事件；visibility: hidden视觉隐藏且不响应交互，但仍占空间；display: none不占空间且不响应交互；4. 性能优化：opacity的变化可触发浏览器的合成层优化，配合transition实现平滑过渡时，性能优于width/height等属性的变化；5. 叠加顺序：透明度不影响z-index层级，但半透明元素会与下方元素产生视觉叠加，可能影响可读性；6. 打印影响：部分浏览器打印时，低opacity的元素可能无法正常显示，需注意打印样式适配 |
| overflow | 一、基础取值：1. visible：默认值，内容溢出元素边界时，直接显示在元素外部，不裁剪；2. hidden：内容溢出时隐藏溢出部分，不显示滚动条；3. scroll：无论内容是否溢出，均显示水平和垂直滚动条（部分浏览器仅显示溢出方向滚动条）；4. auto：仅当内容溢出时，自动显示对应方向的滚动条，未溢出时不显示；二、扩展取值：1. clip：裁剪溢出内容，不提供滚动机制（与hidden类似，但更严格，不响应滚动事件）；2. inherit：继承父元素的overflow属性值；3. initial：恢复默认值visible；三、单方向取值：overflow-x（水平方向）、overflow-y（垂直方向） | 1. 隐藏溢出内容：.avatar { width: 100px; height: 100px; border-radius: 50%; overflow: hidden; }.avatar img { width: 100%; height: 100%; object-fit: cover; }2. 显示滚动条：.text-container { width: 300px; height: 200px; overflow: auto; border: 1px solid #ddd; padding: 10px; }3. 单方向溢出控制：.horizontal-scroll { width: 100%; overflow-x: auto; white-space: nowrap; }.vertical-scroll { height: 300px; overflow-y: scroll; padding-right: 5px; }4. 裁剪溢出内容：.clip-box { width: 200px; height: 150px; overflow: clip; border: 1px solid #dc3545; } | CSS盒模型核心属性，属于溢出内容控制类属性，用于定义元素内内容溢出其边界时的处理方式，是保障页面布局整洁的重要属性 | 1. 保障布局整洁：隐藏或裁剪溢出内容，避免内容混乱扩散，破坏页面整体布局；2. 实现滚动容器：为固定尺寸的容器添加滚动功能，适配长内容展示场景（如文本区域、列表）；3. 配合圆角裁剪：与border-radius配合，实现圆形、圆角容器内内容的裁剪（如圆形头像）；4. 精准控制溢出方向：通过overflow-x、overflow-y分别控制水平和垂直方向的溢出处理，适配多样需求 | 1. 兼容性：visible、hidden、scroll、auto全浏览器兼容；clip IE不支持，Chrome 90+、Firefox 89+支持；2. 触发BFC：overflow设置为hidden、scroll、auto、clip时，会触发元素的BFC（块级格式化上下文），可解决浮动塌陷等布局问题；3. 滚动条样式：不同浏览器的滚动条样式存在差异，可通过::-webkit-scrollbar等伪元素自定义（仅WebKit内核浏览器支持）；4. 性能影响：overflow: scroll会始终显示滚动条占位，可能影响布局；overflow: auto仅在溢出时显示，更友好；频繁切换溢出状态可能触发重排，影响性能；5. clip与hidden区别：clip不允许内容滚动，即使通过JS也无法滚动；hidden只是视觉隐藏，仍可通过JS滚动；6. 行内元素限制：overflow仅对块级元素或具有块级特性的元素生效，行内元素设置无效 |
| overflow-wrap | 一、基础取值（单词边界换行规则）：1. normal：默认值，仅在单词边界（空格、标点）处换行，不拆分单词；2. break-word：优先在单词边界换行，若单词过长无法完整显示，才在单词内部拆分换行，保留部分单词完整性；3. anywhere：与break-word类似，但更优先保证文本排版的紧凑性，允许在任何空白字符处换行，兼容性略差；二、扩展取值：1. inherit：继承父元素的overflow-wrap属性值；2. initial：恢复默认值normal；三、生效前提：作用于块级元素或行内块元素，用于解决长单词溢出问题，比word-break更友好 | 1. 长单词友好换行：.wrap-word { width: 200px; overflow-wrap: break-word; /* 优先边界换行，必要时拆分 */ }2. 紧凑排版换行：.wrap-anywhere { width: 200px; overflow-wrap: anywhere; /* 更紧凑的换行排版 */ }3. 中英文混合换行：.mix-wrap { width: 250px; overflow-wrap: break-word; }4. 禁止单词拆分：.no-wrap-word { overflow-wrap: normal; } | CSS文本排版核心属性，属于单词边界控制类属性，用于定义文本在单词边界无法换行时的换行规则，优先保证单词完整性，仅在必要时拆分单词，是解决长单词溢出问题的更友好方案 | 1. 友好解决长单词溢出：相比word-break: break-all，更保留单词完整性，提升阅读体验；2. 优化中英文混合排版：在中英文混合文本中，合理控制换行位置，避免排版混乱；3. 紧凑文本排版：anywhere取值可实现更紧凑的换行效果，适配空间有限的排版场景；4. 替代废弃属性：替代已废弃的word-break: break-word，语法更规范 | 1. 兼容性：IE11+、所有现代浏览器均支持，break-word兼容性极佳；anywhere取值Chrome 87+、Firefox 89+、Safari 14.1+支持；2. 与word-break的选择：- 需保留单词完整性：使用overflow-wrap: break-word；- 长URL、长数字等无需保留完整性：使用word-break: break-all；3. 生效条件：仅当单词长度超过容器宽度时，才会触发单词内部拆分；4. 与white-space配合：若设置white-space: nowrap，overflow-wrap无效；5. 继承性：具有继承性；6. 注意事项：overflow-wrap: break-word是解决长单词溢出的首选方案，兼容性好且阅读体验佳；anywhere取值虽排版更紧凑，但兼容性略差，需根据目标浏览器选择；建议与text-overflow: ellipsis配合使用，溢出时显示省略号，提升体验 |
| overscroll-behavior | 一、基础取值（滚动溢出行为）：1. auto：默认值，滚动到容器边缘时，继续滚动会传递给父容器（滚动串联）；2. contain：滚动到容器边缘时，不会传递滚动行为给父容器，仅在当前容器内滚动；3. none：不仅禁止滚动传递，还禁止滚动溢出时的默认反馈（如移动端的弹性滚动、桌面端的滚动提示）；二、扩展取值：1. 双值：第一个值控制x方向，第二个值控制y方向（如overscroll-behavior: contain auto;）；2. inherit：继承父元素的overscroll-behavior属性值；3. initial：恢复默认值auto；三、生效前提：作用于可滚动容器（设置了overflow: auto/scroll） | 1. 禁止滚动串联：.inner-scroll { height: 300px; overflow-y: auto; overscroll-behavior: contain; /* 滚动到边缘不影响父容器 */ }2. 禁止弹性滚动：.no-bounce { height: 500px; overflow-y: auto; overscroll-behavior: none; /* 禁止移动端弹性滚动 */ }3. 方向差异化设置：.diff-overscroll { overflow: auto; overscroll-behavior: auto contain; /* x方向默认，y方向禁止串联 */ }4. 模态框滚动隔离：.modal-content { max-height: 80vh; overflow-y: auto; overscroll-behavior: contain; /* 模态框滚动不影响背景 */ } | CSS滚动控制核心属性，属于滚动行为控制类属性，用于控制可滚动容器滚动到边缘时的溢出行为，避免滚动串联（父容器跟随滚动）和不必要的滚动反馈（如弹性滚动），提升滚动交互体验 | 1. 隔离滚动容器：让嵌套滚动容器的滚动行为相互独立，避免内部容器滚动到边缘时带动父容器滚动；2. 优化移动端体验：禁止不必要的弹性滚动（bounce），让滚动体验更稳定；3. 提升模态框交互：模态框内滚动时，避免背景页面跟随滚动，增强模态框的隔离感；4. 精准控制滚动反馈：按方向差异化设置滚动溢出行为，适配不同的滚动场景 | 1. 兼容性：IE不支持，Chrome 63+、Firefox 59+、Safari 16+支持，部分旧浏览器需添加-webkit-前缀；2. 移动端适配：主要用于解决移动端的滚动串联和弹性滚动问题，桌面端效果相对不明显；3. 与overflow配合：必须为容器设置overflow: auto/scroll，否则该属性无效；4. 滚动传递规则：overscroll-behavior: contain仅禁止“滚动到边缘后继续滚动”的传递，不禁止通过滚动条、键盘方向键等主动触发的父容器滚动；5. 继承性：具有继承性；6. 注意事项：避免全局设置overscroll-behavior: none，可能影响用户的正常滚动体验；建议仅在需要隔离滚动的容器（如嵌套滚动、模态框）上使用；部分安卓机型的滚动行为可能存在兼容性差异，需测试适配 |
| padding | 一、基础取值：1. 长度值：px、em、rem、%等单位（如padding: 12px; padding: 1.5em; padding: 3%;）；2. 复合取值规则：与margin完全一致（单值/双值/三值/四值，顺时针顺序）；二、扩展取值：inherit（继承父元素的padding属性值）；三、单方向拆分取值：padding-top、padding-right、padding-bottom、padding-left | 1. 元素内边距基础设置：.btn { padding: 10px 20px; background: #007bff; color: #fff; border: none; }.card-content { padding: 15px; }2. 复合内边距控制：.form-input { padding: 8px 12px 8px 15px; border: 1px solid #ccc; border-radius: 4px; }3. 单方向内边距优化：.icon-text { padding-left: 25px; background: url(icon.png) left center no-repeat; }4. 响应式内边距：.article { padding: 2% 3%; }@media (max-width: 768px) { .article { padding: 1% 2%; } } | CSS盒模型核心属性，属于元素内部间距控制类属性，用于定义元素边框内侧与元素内容之间的空白距离，影响元素内容的排版布局 | 1. 优化内容排版：增加元素内部空白，避免内容紧贴边框，提升文本可读性；2. 扩大可交互区域：为按钮、链接等可点击元素增加padding，提升点击体验（扩大点击范围）；3. 实现背景填充效果：padding区域会继承元素的背景色/背景图，可配合背景实现特殊视觉效果；4. 微调内容位置：通过单方向padding调整元素内部内容的偏移（如文字左移、图标与文字对齐）；5. 响应式适配：结合%单位或媒体查询，实现不同屏幕下内部间距的自适应调整 | 1. 兼容性：全浏览器兼容，无版本限制；2. 盒模型影响：默认box-sizing: content-box模式下，padding会叠加到元素的width和height上，使元素总尺寸增大；设置box-sizing: border-box后，padding会包含在元素的width和height内部，不改变总尺寸；3. 取值限制：padding不允许设置负值，仅支持非负的长度值和百分比；4. 百分比取值参考：与margin一致，padding的百分比取值基于父元素的宽度计算；5. 行内元素特性：行内元素的垂直padding（top、bottom）会视觉溢出，但不影响相邻行的布局和行高；6. 性能建议：避免为大量元素设置过大的padding，可能增加页面渲染计算量 |
| perspective | 一、基础取值（3D透视效果）：1. none：默认值，无透视效果，元素的3D变换呈现平面化；2. 长度值：px、em等（如perspective: 1000px;），值越小，透视效果越强（近大远小越明显），值越大，透视效果越弱，通常取值范围为800px-1200px；二、扩展取值：1. inherit：继承父元素的perspective属性值；2. initial：恢复默认值none；三、生效规则：需设置在3D变换元素的父容器上，作用于所有子元素的3D变换，为子元素提供统一的3D透视空间 | 1. 父容器3D透视：.3d-container { perspective: 1000px; /* 为子元素提供3D透视空间 */ }.3d-card { width: 200px; height: 300px; transform-style: preserve-3d; transition: transform 0.6s; }.3d-card:hover { transform: rotateY(60deg); }2. 不同透视强度对比：.strong-perspective { perspective: 500px; } /* 强透视 */.weak-perspective { perspective: 2000px; } /* 弱透视 */.3d-box { transform: rotateX(30deg); transform-style: preserve-3d; }3. 透视配合立方体：.cube-container { perspective: 1200px; }.cube { transform-style: preserve-3d; width: 100px; height: 100px; animation: rotate 10s linear infinite; } | CSS 3D变换核心属性，属于3D透视控制类属性，用于为3D变换元素的父容器设置透视效果，模拟人眼观察物体的近大远小特性，让子元素的3D变换呈现出真实的立体透视感 | 1. 营造真实3D空间：通过设置透视值，为子元素的3D变换提供统一的透视基准，让3D效果更符合人眼视觉习惯；2. 控制透视强度：通过调整透视值大小，精准控制3D效果的强弱，适配不同的设计需求；3. 统一3D视觉风格：在父容器上设置perspective，确保所有子元素的3D变换共享同一透视空间，视觉效果更统一 | 1. 兼容性：IE10+支持，IE9及以下不支持；现代浏览器全兼容，部分旧浏览器需添加-webkit-前缀；2. 作用位置：必须设置在3D变换元素的父容器上，直接设置在子元素上无效；若需为单个元素设置独立透视，可使用transform: perspective()；3. 透视值规则：值为正数，单位为长度单位（不可为百分比）；值越小，近大远小效果越明显，3D感越强；值越大，效果越平缓；4. 与transform-style配合：需同时为子元素设置transform-style: preserve-3d，否则无法呈现3D效果；5. 继承性：具有继承性；6. 注意事项：避免设置过小的透视值（如<500px），可能导致3D元素变形过度，影响视觉体验；建议根据元素尺寸和设计需求合理取值（800px-1200px为常用范围） |
| perspective-origin | 一、基础取值（透视原点位置）：1. 关键字对齐：- 水平：left（左）、center（中，默认）、right（右）；- 垂直：top（上）、center（中，默认）、bottom（下）；- 组合：如center center（默认，透视原点在容器中心）、top left（左上角）；2. 长度值：px、em等（如perspective-origin: 50px 100px; 左偏移50px，上偏移100px）；3. 百分比值：基于父容器的宽高（如perspective-origin: 20% 80%; 水平20%，垂直80%）；二、扩展取值：1. inherit：继承父元素的perspective-origin属性值；2. initial：恢复默认值center center；三、生效前提：需配合perspective使用，仅在3D变换场景下生效 | 1. 左上角透视原点：.origin-top-left { perspective: 1000px; perspective-origin: top left; }.3d-item { transform: rotateY(45deg); transform-style: preserve-3d; }2. 自定义偏移透视原点：.origin-custom { perspective: 1200px; perspective-origin: 30% 60%; }3. 底部中心透视原点：.origin-bottom-center { perspective: 900px; perspective-origin: bottom center; }.cube { transform: rotateX(30deg); transform-style: preserve-3d; }4. 长度值透视原点：.origin-length { perspective: 1000px; perspective-origin: 100px center; } | CSS 3D变换辅助属性，属于3D透视控制类属性，用于定义perspective的透视原点位置，即观察者观察3D空间的视角位置，通过调整透视原点，改变3D元素的视觉呈现角度 | 1. 调整3D观察视角：通过改变透视原点，模拟从不同角度观察3D元素（如从左上角、底部等视角），丰富3D视觉效果；2. 精准控制3D呈现：配合perspective，精准调整3D元素的视觉角度，适配不同的设计需求；3. 强化3D空间感：通过非中心的透视原点，营造更具动感的3D空间感，提升页面的视觉吸引力 | 1. 兼容性：与perspective一致，IE10+支持，现代浏览器全兼容，部分旧浏览器需添加-webkit-前缀；2. 生效依赖：必须配合perspective使用，无perspective时该属性无效；3. 作用位置：设置在3D变换元素的父容器上，与perspective同位置；4. 偏移规则：第一个参数控制水平方向，第二个参数控制垂直方向；负值表示反向偏移（如perspective-origin: -20px center; 向左偏移20px）；5. 继承性：具有继承性；6. 注意事项：透视原点的位置会显著影响3D元素的视觉呈现，建议根据3D效果的设计目标调整；默认的center center适用于大多数常规3D场景，特殊视角需求时再自定义调整 |
| pointer-events | 一、基础取值（元素指针事件响应）：1. auto：默认值，元素正常响应鼠标/触摸事件（点击、hover等）；2. none：元素不响应指针事件，事件会穿透元素传递给下方元素；3. visiblePainted：仅响应元素可见且绘制区域的指针事件（较少使用）；4. visibleFill：仅响应元素可见填充区域的指针事件（较少使用）；二、扩展取值：1. inherit：继承父元素的pointer-events属性值；2. initial：恢复默认值auto；三、适用元素：所有HTML元素，常用于控制交互穿透和事件屏蔽 | 1. 事件穿透遮罩：.overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }.overlay-content { pointer-events: auto; /* 遮罩内内容正常响应事件 */ }2. 禁用元素交互：.disabled-btn { opacity: 0.6; pointer-events: none; /* 禁止点击 */ }3. 悬浮穿透效果：.tooltip-trigger { position: relative; }.tooltip { position: absolute; top: -20px; left: 50%; pointer-events: none; /* 悬浮时不遮挡触发元素 */ }.tooltip-trigger:hover .tooltip { display: block; }4. 画布元素事件控制：<canvas id="myCanvas"></canvas>#myCanvas { pointer-events: auto; /* 允许画布响应鼠标绘制事件 */ } | CSS交互控制核心属性，属于指针事件管理类属性，用于控制元素是否响应鼠标、触摸等指针事件，以及事件是否穿透元素传递给下方元素，是实现复杂交互场景的关键属性 | 1. 实现事件穿透：让上层元素不拦截事件，允许事件传递给下层元素（如遮罩穿透）；2. 禁用元素交互：快速禁止元素的所有指针事件，无需修改JS事件绑定（如禁用按钮）；3. 优化悬浮交互：避免悬浮元素遮挡触发元素，确保交互流畅（如tooltip提示框）；4. 精准控制事件范围：通过特殊取值（如visiblePainted）限制事件响应的元素区域 | 1. 兼容性：IE11+支持，IE10及以下不支持；现代浏览器全兼容，部分旧浏览器需添加-webkit-前缀；2. 事件穿透限制：pointer-events: none仅阻止元素自身响应事件，不影响元素的子元素（子元素可通过pointer-events: auto恢复响应）；3. JS事件影响：无法阻止通过JS dispatchEvent触发的合成事件，仅对真实用户操作的指针事件有效；4. 表单元素注意：对disabled状态的表单元素，即使设置pointer-events: auto，仍可能无法响应事件；5. 继承性：具有继承性；6. 性能影响：无明显性能影响；7. 注意事项：使用pointer-events: none时，需确保元素的语义化（如禁用按钮应同时添加disabled属性，提升可访问性） |
| position | 一、基础取值：1. static：默认静态定位，元素遵循正常文档流排列，top、right、bottom、left、z-index属性均无效；2. relative：相对定位，元素保留正常文档流位置，相对于自身原始位置进行偏移；3. absolute：绝对定位，元素脱离正常文档流，相对于最近的已定位（非static）祖先元素进行偏移；4. fixed：固定定位，元素脱离正常文档流，相对于浏览器视口（窗口）进行定位，滚动页面时位置保持不变；5. sticky：粘性定位，结合relative和fixed特性，滚动页面至阈值前遵循文档流，达到阈值后固定定位；二、扩展取值：inherit（继承父元素的position属性值）、initial（恢复默认值static） | 1. 相对定位微调：.badge { position: relative; top: -5px; left: 3px; font-size: 12px; }2. 绝对定位弹窗：.modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 400px; }.modal-container { position: relative; width: 100%; height: 500px; }3. 固定导航栏：.header-nav { position: fixed; top: 0; left: 0; width: 100%; z-index: 999; }4. 粘性侧边栏：.sidebar { position: sticky; top: 20px; align-self: start; } | CSS定位体系核心属性，属于元素位置控制类属性，用于定义元素在页面中的定位方式，决定元素脱离或遵循正常文档流的规则 | 1. 精准控制元素位置：通过top、right、bottom、left属性实现元素的精确偏移定位；2. 实现脱离文档流布局：借助absolute、fixed实现悬浮元素、弹窗、固定导航等特殊布局；3. 构建层级布局关系：配合z-index属性控制元素的堆叠顺序，解决元素覆盖问题；4. 实现粘性交互效果：通过sticky实现滚动时的元素固定（如侧边栏、表格表头）；5. 辅助布局微调：利用relative的定位特性，为absolute子元素提供定位参考容器 | 1. 兼容性：static、relative、absolute、fixed全浏览器兼容；sticky取值IE不支持，Chrome、Firefox等现代浏览器支持；2. absolute定位参考：若没有已定位的祖先元素，absolute元素将相对于根元素（html）定位；3. sticky生效条件：必须同时设置top、right、bottom、left中的至少一个阈值属性，否则等同于relative；4. 文档流影响：absolute、fixed脱离文档流后，父元素若未设置高度，可能出现高度塌陷问题，需通过清除浮动或设置固定高度解决；5. z-index生效条件：仅对已定位元素（relative、absolute、fixed、sticky）有效，默认堆叠顺序由元素在DOM中的位置决定（后渲染的元素在上） |
| quotes | 一、基础取值（引用符号）：1. none：默认值，不显示任何引用符号；2. 自定义符号对：指定一组或多组引用符号（如quotes: "“" "”" "‘" "’"; 第一组为外层引用符号，第二组为内层引用符号）；- 可使用字符串（如"\""、"'"）、Unicode编码（如"\201C" 表示“，"\201D" 表示”）；3. 多个引用层级：最多可指定多组符号，适配多层嵌套引用；二、扩展取值：1. inherit：继承父元素的quotes属性值；2. initial：恢复默认值none；三、生效前提：作用于引用元素（q、blockquote），配合content: open-quote、close-quote使用，或浏览器自动为q元素添加引用符号 | 1. 中文引用符号：.chinese-quotes { quotes: "“" "”" "‘" "’"; }.chinese-quotes q { font-style: italic; color: #666; }2. 自定义引用符号：.custom-quotes { quotes: "【" "】" "「" "」"; }.custom-quotes q { display: inline-block; padding: 0 5px; }3. 多层嵌套引用：.nested-quotes { quotes: "“" "”" "‘" "’" "《" "》"; }.nested-quotes q q q { color: #dc3545; }4. 手动添加引用符号：.manual-quotes blockquote::before { content: open-quote; font-size: 24px; color: #007bff; }.manual-quotes blockquote::after { content: close-quote; font-size: 24px; color: #007bff; }.manual-quotes { quotes: "“" "”"; } | CSS文本排版辅助属性，属于引用符号控制类属性，用于自定义引用元素（q、blockquote）的引用符号，支持多层嵌套引用的符号区分，替代浏览器默认的引用符号，实现符合不同语言或设计风格的引用排版 | 1. 适配多语言引用：为不同语言设置对应的引用符号（如中文“”、英文""、日文「」），提升多语言文档的排版规范性；2. 实现自定义引用风格：使用个性化的引用符号（如【】、《》），让引用内容更具辨识度，适配页面设计风格；3. 支持多层嵌套引用：通过多组符号设置，让多层嵌套的引用内容使用不同的引用符号，提升排版的清晰度；4. 灵活控制引用显示：配合伪元素手动添加引用符号，可自定义符号的样式（大小、颜色），丰富引用的视觉效果 | 1. 兼容性：IE8+、所有现代浏览器均支持，兼容性极佳；2. 自动生效元素：q元素会自动使用quotes设置的符号，blockquote需要配合伪元素+content: open-quote/close-quote手动添加；3. 符号对规则：quotes的取值为成对出现的符号，第一个为起始符号（open-quote），第二个为结束符号（close-quote）；多组符号按顺序对应外层到内层引用；4. Unicode编码使用：若直接输入特殊符号显示异常，可使用对应的Unicode编码（如左双引号\201C，右双引号\201D）；5. 继承性：具有继承性；6. 注意事项：设置quotes: none;后，q元素的默认引用符号会消失；多层嵌套引用时，符号组的数量应不少于嵌套层级；自定义符号时，建议选择与文本风格协调的符号，避免影响阅读体验 |
| row-gap | 一、基础取值（行间距控制）：1. normal：默认值，行间距为0（部分布局下有默认微小间距）；2. 长度值：px、em、rem等（如row-gap: 15px; 行间距为15px）；3. 百分比值：基于父容器高度的百分比（如row-gap: 8%; 行间距为父容器高度的8%）；二、扩展取值：1. inherit：继承父元素的row-gap属性值；2. initial：恢复默认值normal；三、生效前提：作用于grid布局、flex布局容器，或多列布局容器，仅控制行方向间距 | 1. Grid布局行间距：.grid-row-gap { display: grid; grid-template-rows: repeat(3, 100px); grid-template-columns: 1fr 1fr; row-gap: 20px; column-gap: 15px; }2. Flex布局换行间距：.flex-row-gap { display: flex; flex-wrap: wrap; row-gap: 12px; column-gap: 8px; }3. 多列布局行间距：.column-row-gap { column-count: 2; row-gap: 10px; column-gap: 20px; }4. 响应式行间距：.responsive-row-gap { display: grid; row-gap: 15px; }@media (max-width: 768px) { .responsive-row-gap { row-gap: 10px; } } | CSS布局辅助属性，属于间距控制类属性，是gap的单行方向拆分属性，专门用于控制grid、flex布局容器内子元素的行间距，或多列布局的行间距，实现行列间距的精准拆分控制 | 1. 精准控制行间距：单独调整行方向间距，不影响列间距，适配行列间距不同的布局需求；2. 配合column-gap使用：与column-gap组合，实现行列间距的独立控制，比gap双值更直观；3. 简化响应式调整：响应式布局中，可单独修改行间距，保持列间距不变，提升布局灵活性 | 1. 兼容性：与gap一致，IE不支持，现代浏览器支持，部分旧浏览器需添加-webkit-前缀；2. 与gap的关系：row-gap + column-gap 等价于 gap的双值写法（gap: row-gap column-gap）；3. 生效场景限制：在flex布局中，仅当flex-wrap: wrap时，行间距才会生效；4. 单位选择：百分比值基于父容器高度，可能因父容器高度不确定导致间距不稳定，建议优先使用固定长度单位（px、rem）；5. 继承性：具有继承性；6. 注意事项：避免在行间距过小时使用百分比值，可能导致间距过小甚至消失；grid布局中，row-gap会增加容器的总高度，需注意容器尺寸适配 |
| scroll-behavior | 一、基础取值（滚动行为）：1. auto：默认值，滚动时瞬间定位，无平滑过渡效果；2. smooth：滚动时平滑过渡，实现平滑滚动效果；二、扩展取值：1. inherit：继承父元素的scroll-behavior属性值；2. initial：恢复默认值auto；三、生效前提：作用于可滚动容器（如设置了overflow: auto/scroll的元素、根元素html），仅对通过锚点链接、scrollTo()等方式触发的滚动生效 | 1. 页面平滑滚动：html { scroll-behavior: smooth; }<a href="#section1">跳转到section1</a><section id="section1">内容</section>2. 容器内平滑滚动：.scroll-container { width: 300px; height: 400px; overflow: auto; scroll-behavior: smooth; }.scroll-container div { height: 200px; }<a onclick="document.querySelector('.scroll-container').scrollTo({top: 400})">滚动到第3个div</a>3. 动态切换滚动行为：.container { scroll-behavior: auto; }.container.smooth { scroll-behavior: smooth; }4. 锚点平滑滚动：.nav-link { href: "#about"; }html { scroll-behavior: smooth; }#about { scroll-margin-top: 80px; /* 避免被固定导航遮挡 */ } | CSS滚动控制核心属性，属于滚动行为控制类属性，用于定义可滚动容器在触发滚动时的行为（瞬间滚动或平滑滚动），无需JS即可实现平滑滚动效果，提升用户滚动体验 | 1. 实现平滑滚动：无需编写JS代码，直接通过CSS实现页面或容器内的平滑滚动，简化开发；2. 提升滚动体验：平滑滚动效果比瞬间滚动更柔和，减少用户视觉疲劳，提升页面交互质感；3. 精准滚动定位：配合scroll-margin或scroll-padding，避免滚动目标被固定导航等元素遮挡；4. 灵活控制滚动行为：可根据需求动态切换平滑/瞬间滚动，适配不同交互场景 | 1. 兼容性：IE不支持scroll-behavior；Chrome 61+、Firefox 36+、Safari 15.4+支持，部分旧浏览器需添加-webkit-前缀；2. 生效场景限制：仅对“触发式滚动”生效（如锚点链接、scrollTo()、scrollIntoView()）；用户手动拖动滚动条或使用方向键滚动时，不生效；3. 滚动容器范围：可作用于根元素（html）（控制页面滚动）或任意设置了overflow: auto/scroll的容器（控制容器内滚动）；4. 与scroll-margin配合：当滚动目标被固定元素（如导航栏）遮挡时，可给目标元素设置scroll-margin-top（或其他方向），预留滚动间距；5. 继承性：具有继承性；6. 性能影响：无明显性能影响，平滑滚动由浏览器原生优化，性能优于JS实现的平滑滚动；7. 注意事项：若页面有复杂的动画或大量元素，平滑滚动可能出现轻微卡顿，建议优化页面性能；部分浏览器可通过系统设置关闭平滑滚动，此时scroll-behavior: smooth不生效 |
| scroll-margin | 一、基础取值（滚动目标边距）：1. 单值：为滚动目标的四个方向设置相同的边距（如scroll-margin: 20px; 四个方向均预留20px）；2. 双值：第一个值为上下方向，第二个值为左右方向（如scroll-margin: 10px 30px; 上下10px，左右30px）；3. 四值：按上、右、下、左的顺序设置边距（如scroll-margin: 15px 25px 15px 25px;）；4. 长度值：px、em、rem等固定单位；二、扩展取值：1. inherit：继承父元素的scroll-margin属性值；2. initial：恢复默认值0；三、生效前提：作用于滚动目标元素，需配合scroll-behavior: smooth使用，用于调整滚动定位时的目标位置 | 1. 避免导航遮挡：html { scroll-behavior: smooth; }.navbar { position: fixed; top: 0; width: 100%; height: 80px; }section { scroll-margin-top: 90px; /* 预留90px，避免被80px高的导航遮挡 */ }<a href="#section1">跳转到section1</a><section id="section1">内容</section>2. 容器内滚动边距：.scroll-container { width: 400px; height: 500px; overflow: auto; scroll-behavior: smooth; }.scroll-item { scroll-margin: 30px; height: 200px; }<a onclick="document.querySelector('.scroll-item:nth-child(3)').scrollIntoView()">滚动到第3个item</a>3. 多方向边距：.target { scroll-margin: 20px 40px; /* 上下20px，左右40px */ }4. 响应式边距调整：section { scroll-margin-top: 80px; }@media (max-width: 768px) { section { scroll-margin-top: 60px; } /* 小屏导航高度变小，调整边距 */ } | CSS滚动控制辅助属性，属于滚动目标定位调整类属性，用于为滚动目标元素设置滚动定位时的边距，调整滚动后目标元素在视口或滚动容器中的位置，避免被固定元素遮挡，配合平滑滚动使用 | 1. 解决遮挡问题：为滚动目标预留边距，避免被固定导航栏、侧边栏等元素遮挡，确保目标内容完整显示；2. 优化滚动定位体验：精准调整滚动后目标元素的位置，让目标内容处于视觉舒适区（如距离顶部一定距离）；3. 适配响应式布局：配合媒体查询，根据不同屏幕尺寸调整滚动边距，适配不同高度的固定元素；4. 灵活控制多方向边距：可单独或同时设置四个方向的边距，适配不同的滚动场景 | 1. 兼容性：与scroll-behavior一致，IE不支持，现代浏览器支持，部分旧浏览器需添加-webkit-前缀；2. 边距方向：scroll-margin的方向对应滚动容器的滚动方向（垂直滚动时，scroll-margin-top/bottom生效；水平滚动时，scroll-margin-left/right生效）；3. 作用机制：scroll-margin不是元素的外边距（不影响元素在文档流中的位置），仅在滚动定位时生效，调整目标元素相对于滚动容器的定位偏移；4. 配合scroll-behavior：虽然可单独使用，但配合scroll-behavior: smooth时效果更佳，提升平滑滚动的定位精准度；5. 与scroll-padding区别：scroll-margin作用于滚动目标元素，调整目标元素的定位偏移；scroll-padding作用于滚动容器，调整容器的滚动视口内边距；6. 继承性：具有继承性；7. 性能影响：无明显性能影响；8. 注意事项：边距值需根据固定元素的高度/宽度合理设置，过大或过小都会影响滚动体验；建议预留比固定元素略大的边距（如导航高80px，设置scroll-margin-top: 90px），避免细微偏差 |
| scroll-padding | 一、基础取值（滚动容器内边距）：1. 单值：为滚动容器的四个方向设置相同的内边距（如scroll-padding: 20px; 四个方向均预留20px）；2. 双值：第一个值为上下方向，第二个值为左右方向（如scroll-padding: 10px 30px; 上下10px，左右30px）；3. 四值：按上、右、下、左的顺序设置边距（如scroll-padding: 15px 25px 15px 25px;）；4. 长度值：px、em、rem等固定单位；二、扩展取值：1. inherit：继承父元素的scroll-padding属性值；2. initial：恢复默认值0；三、生效前提：作用于可滚动容器（设置了overflow: auto/scroll），配合scroll-behavior: smooth使用，调整滚动视口的内边距 | 1. 滚动容器顶部预留导航空间：.scroll-container { height: 500px; overflow: auto; scroll-behavior: smooth; scroll-padding-top: 80px; /* 预留80px给固定导航 */ }2. 左右滚动容器内边距：.horizontal-scroll { width: 100%; overflow-x: auto; scroll-padding: 0 20px; /* 左右各预留20px */ white-space: nowrap; }3. 多方向滚动内边距：.both-scroll { width: 400px; height: 300px; overflow: auto; scroll-padding: 15px 20px 15px 20px; }4. 响应式滚动内边距：.scroll-container { scroll-padding-top: 80px; }@media (max-width: 768px) { .scroll-container { scroll-padding-top: 60px; } /* 小屏调整预留空间 */ } | CSS滚动控制辅助属性，属于滚动视口调整类属性，用于为可滚动容器的滚动视口设置内边距，调整滚动定位时目标元素在容器内的位置，避免目标元素紧贴容器边缘，提升滚动体验 | 1. 优化滚动定位体验：为滚动视口预留内边距，让滚动目标元素与容器边缘保持一定距离，视觉上更舒适；2. 解决边缘遮挡问题：避免滚动目标元素紧贴容器边缘导致的内容遮挡或阅读不便；3. 适配固定元素：配合页面中的固定导航、侧边栏等元素，在滚动容器内预留对应空间，确保目标内容完整显示；4. 灵活适配多滚动方向：支持水平、垂直等多方向的滚动内边距设置，适配不同的滚动场景 | 1. 兼容性：IE不支持，Chrome 69+、Firefox 68+、Safari 15.4+支持，部分旧浏览器需添加-webkit-前缀；2. 与scroll-margin区别：scroll-padding作用于滚动容器，调整滚动视口的内边距；scroll-margin作用于滚动目标元素，调整目标元素的定位偏移；两者可配合使用，精准控制滚动定位；3. 作用机制：scroll-padding不影响容器的实际内边距（padding），仅在滚动定位时生效，调整目标元素在视口内的显示位置；4. 配合scroll-behavior：虽然可单独使用，但配合scroll-behavior: smooth时，滚动定位的视觉效果更流畅；5. 继承性：具有继承性；6. 注意事项：内边距值需根据容器尺寸和设计需求合理设置，过大可能导致滚动视口可用空间过小，过小则无法达到优化效果；建议结合滚动目标元素的尺寸调整取值 |
| scroll-snap-align | 一、基础取值（滚动吸附对齐位置）：1. none：默认值，该元素不是滚动吸附点，不参与吸附；2. start：吸附到元素的起始位置（垂直方向为顶部，水平方向为左侧）；3. center：吸附到元素的中心位置；4. end：吸附到元素的结束位置（垂直方向为底部，水平方向为右侧）；5. 双值：第一个值为垂直方向，第二个值为水平方向（如start center、center end）；二、扩展取值：1. inherit：继承父元素的scroll-snap-align属性值；2. initial：恢复默认值none；三、生效前提：作用于可滚动容器的子元素，需配合父容器的scroll-snap-type使用 | 1. 顶部吸附：.snap-container { scroll-snap-type: y mandatory; }.snap-item { scroll-snap-align: start; /* 吸附到元素顶部 */ height: 100%; }2. 中心吸附：.horizontal-snap { scroll-snap-type: x proximity; }.horizontal-snap > div { scroll-snap-align: center; width: 80%; height: 300px; }3. 底部吸附：.snap-container { scroll-snap-type: y mandatory; }.snap-item { scroll-snap-align: end; /* 吸附到元素底部 */ height: 80%; }4. 多方向吸附对齐：.grid-snap { scroll-snap-type: both mandatory; }.grid-snap > div { scroll-snap-align: start end; /* 垂直顶部、水平右侧吸附 */ } | CSS滚动吸附辅助属性，属于滚动吸附点控制类属性，用于定义可滚动容器子元素的滚动吸附点位置，配合父容器的scroll-snap-type，决定滚动停止时元素与容器的对齐方式 | 1. 精准定义吸附位置：为每个子元素设置具体的吸附对齐方式（起始、中心、结束），实现多样化的滚动吸附效果；2. 适配不同设计需求：根据内容展示需求，选择合适的吸附位置（如轮播图适合中心吸附，分步表单适合顶部吸附）；3. 支持多方向对齐：可同时定义垂直和水平方向的吸附位置，适配网格滚动等复杂场景 | 1. 兼容性：与scroll-snap-type一致，IE不支持，现代浏览器支持，部分旧浏览器需添加-webkit-前缀；2. 生效依赖：必须配合父容器的scroll-snap-type使用，否则该属性无效；3. 对齐方向规则：吸附方向由父容器的scroll-snap-type决定（x/y/both），子元素仅在对应方向生效；4. 多子元素规则：多个子元素可同时设置scroll-snap-align，滚动时会吸附到最近的符合条件的元素；5. 继承性：具有继承性；6. 注意事项：建议为滚动容器内的所有子元素设置统一的吸附对齐方式，避免吸附效果混乱；子元素的尺寸建议与滚动容器的可视区域适配（如高度100%），提升吸附体验；若子元素尺寸过小，可能导致吸附定位不明显 |
| scroll-snap-type | 一、基础取值（滚动吸附类型）：1. none：默认值，无滚动吸附效果，滚动停止位置由用户操作决定；2. x：仅在水平方向开启滚动吸附；3. y：仅在垂直方向开启滚动吸附；4. both：在水平和垂直方向均开启滚动吸附；5. mandatory：强制吸附，滚动停止时，必须吸附到最近的吸附点，即使滚动距离很短；6. proximity： proximity吸附，仅当滚动停止位置接近吸附点时，才吸附到该点（滚动距离远则不吸附）；二、扩展取值：1. 组合取值：方向+吸附强度（如y mandatory、x proximity）；2. inherit：继承父元素的scroll-snap-type属性值；3. initial：恢复默认值none；三、生效前提：作用于可滚动容器，需配合子元素的scroll-snap-align使用 | 1. 垂直滚动吸附（强制吸附）：.snap-container { height: 400px; overflow-y: auto; scroll-snap-type: y mandatory; }.snap-item { height: 100%; scroll-snap-align: start; /* 吸附到元素顶部 */ }2. 水平滚动吸附（proximity吸附）：.horizontal-snap { overflow-x: auto; scroll-snap-type: x proximity; white-space: nowrap; }.horizontal-snap > div { display: inline-block; width: 80%; height: 300px; scroll-snap-align: center; }3. 网格滚动吸附：.grid-snap { width: 500px; height: 400px; overflow: auto; scroll-snap-type: both mandatory; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); }.grid-snap > div { scroll-snap-align: center; }4. 滚动吸附禁用：.snap-container.disabled { scroll-snap-type: none; } | CSS滚动控制核心属性，属于滚动吸附类属性，用于为可滚动容器开启滚动吸附功能，定义吸附的方向和强度，配合子元素的scroll-snap-align，实现滚动停止时自动吸附到指定位置的效果 | 1. 实现精准滚动定位：让用户滚动时，容器自动吸附到预设的吸附点，提升滚动定位的精准度；2. 优化滚动体验：适用于轮播图、图片画廊、分步表单等场景，让滚动操作更流畅、更有节奏感；3. 控制吸附强度：通过mandatory和proximity两种吸附强度，适配不同的交互需求（强制定位/宽松定位）；4. 支持多方向吸附：可单独或同时开启水平、垂直方向的吸附，适配网格滚动等复杂场景 | 1. 兼容性：IE不支持，Chrome 69+、Firefox 68+、Safari 11+支持，部分旧浏览器需添加-webkit-前缀；2. 必配属性：必须配合子元素的scroll-snap-align（定义吸附点位置）使用，否则无法实现吸附效果；3. 吸附强度选择：- mandatory：适合需要严格定位的场景（如分步表单），但可能导致滚动体验生硬；- proximity：适合宽松的浏览场景（如图片画廊），体验更自然；4. 滚动容器设置：需确保滚动容器有明确的滚动方向（overflow-x/overflow-y），否则吸附效果可能异常；5. 继承性：具有继承性；6. 注意事项：避免在同一容器上同时开启both方向的mandatory吸附，可能导致滚动冲突；滚动吸附不会影响用户的滚动操作，仅在滚动停止时生效；部分移动设备的原生滚动可能与吸附效果冲突，需测试适配 |
| tab-size | 一、基础取值（制表符宽度）：1. number：指定制表符（\t）对应的空格数（如tab-size: 4; 一个制表符等价于4个空格，默认8）；2. length：指定制表符的宽度（如tab-size: 16px; 一个制表符宽度为16px）；二、扩展取值：1. inherit：继承父元素的tab-size属性值；2. initial：恢复默认值8；三、生效前提：作用于包含制表符的元素，需确保元素的white-space属性不设置为nowrap（否则制表符会被压缩），且文本显示为等宽字体时效果更明显 | 1. 代码块制表符宽度：.code-block { tab-size: 2; white-space: pre; font-family: monospace; padding: 15px; background: #f8f9fa; border-radius: 4px; }2. 固定宽度制表符：.fixed-tab { tab-size: 12px; white-space: pre-wrap; font-family: "Courier New", monospace; }3. 响应式制表符宽度：.responsive-tab { tab-size: 4; }@media (max-width: 768px) { .responsive-tab { tab-size: 2; } }4. 表格形式制表符布局：.tab-table { tab-size: 8; white-space: pre; font-family: monospace; }.tab-table p { margin: 5px 0; } | CSS文本排版辅助属性，属于制表符控制类属性，用于控制元素内制表符（\t）的显示宽度，替代浏览器默认的8个空格宽度，适配代码展示、表格布局等需要精准对齐的文本场景 | 1. 优化代码展示：为代码块设置合适的制表符宽度（如2、4个空格），让代码缩进更规整，提升代码可读性；2. 实现简单文本表格：通过制表符控制文本对齐，快速实现简单的文本表格布局，无需复杂的HTML表格结构；3. 灵活适配显示需求：根据页面宽度或文本风格，调整制表符宽度，提升文本排版的适配性；4. 统一制表符显示：让页面中所有包含制表符的元素保持一致的宽度，提升排版的规整度 | 1. 兼容性：IE不支持，Chrome 21+、Firefox 4+、Safari 6.1+支持，部分旧浏览器需添加-webkit-前缀；2. 生效依赖：必须确保元素的white-space属性值为pre、pre-wrap、pre-line等保留空白的取值；若设置为nowrap或normal，制表符会被压缩为单个空格，tab-size无效；3. 字体适配：等宽字体（如monospace、Courier New）下，制表符宽度的显示效果更精准；非等宽字体下，对齐效果可能受影响；4. 长度单位限制：部分浏览器不支持length取值（如px），建议优先使用number取值（空格数）；5. 继承性：具有继承性；6. 注意事项：制表符宽度不宜过大（如>8），避免文本排版过宽；代码展示场景建议使用2或4个空格的制表符宽度，符合通用的代码缩进规范；旧浏览器可通过将制表符替换为空格实现类似效果 |
| text-align | 一、基础取值：1. left：左对齐（默认，适用于LTR语言，如中文、英文）；2. right：右对齐；3. center：水平居中对齐；4. justify：两端对齐，使文本左右边缘均贴合容器（仅对多行文本有效）；二、扩展取值：1. justify-all：两端对齐，包括最后一行文本（较少浏览器支持）；2. start：对齐容器起始端（LTR左对齐，RTL右对齐）；3. end：对齐容器末端（LTR右对齐，RTL左对齐）；4. inherit：继承父元素的text-align属性值 | 1. 基础文本对齐：.article-title { text-align: center; font-size: 22px; }.article-content { text-align: left; line-height: 1.8; }2. 特殊场景对齐：.form-label { text-align: right; padding-right: 10px; }.price-text { text-align: right; font-weight: bold; }3. 两端对齐设置：.intro-text { text-align: justify; width: 600px; margin: 0 auto; }4. 响应式对齐：.responsive-text { text-align: left; }@media (max-width: 768px) { .responsive-text { text-align: center; } } | CSS文本样式核心属性，属于文本对齐控制类属性，用于定义元素内文本的水平对齐方式，直接影响文本的排版布局和阅读体验 | 1. 优化文本排版：根据内容类型（标题、正文、表单文本）设置合适的对齐方式，提升页面规整性；2. 突出标题重点：标题设置居中对齐，增强视觉焦点；3. 适配表单布局：表单标签右对齐、输入框左对齐，提升表单的易用性；4. 提升阅读舒适度：正文左对齐（或两端对齐），符合常规阅读习惯；5. 响应式适配：不同屏幕尺寸下切换对齐方式，适配多样布局需求 | 1. 兼容性：left、right、center、justify全浏览器兼容；start、end IE不支持，现代浏览器支持；justify-all仅Chrome、Firefox部分版本支持；2. 生效范围：仅对块级元素或具有块级特性的元素（如inline-block、table）内的文本生效；3. justify限制：仅对多行文本有效，单行文本设置justify无效果；部分语言（如中文）的两端对齐可能出现字间距过大的情况，需谨慎使用；4. 继承性：具有继承性，子元素文本默认继承父元素的对齐方式；5. 与margin居中区别：text-align控制元素内文本的对齐，margin: 0 auto控制元素本身的水平居中，两者作用对象不同 |
| text-decoration | 一、基础取值：1. none：无文本装饰（默认，常用于清除链接下划线）；2. underline：下划线装饰；3. overline：上划线装饰；4. line-through：删除线装饰；二、扩展取值（复合属性关联）：1. text-decoration-line：指定装饰线类型（对应基础取值）；2. text-decoration-color：装饰线颜色（如text-decoration-color: red;）；3. text-decoration-style：装饰线样式（solid实线、dashed虚线、dotted点线、wavy波浪线）；4. inherit：继承父元素的text-decoration属性值 | 1. 清除链接下划线：a { text-decoration: none; color: #007bff; }a:hover { text-decoration: underline; }2. 特殊文本装饰：.deleted-text { text-decoration: line-through; color: #666; }.special-text { text-decoration: overline underline; text-decoration-color: #dc3545; }3. 自定义装饰线样式：.wavy-text { text-decoration: underline wavy #28a745; }4. 表单提示文本：.form-hint { text-decoration: dotted underline; color: #6c757d; } | CSS文本样式核心属性，属于文本装饰控制类属性，用于定义文本的装饰线效果（如下划线、上划线、删除线），可通过子属性精准控制装饰线的类型、颜色和样式 | 1. 优化链接样式：清除默认链接下划线，hover时显示，提升链接视觉体验；2. 传递文本语义：通过删除线表示已删除内容，上划线/下划线突出特殊文本；3. 丰富视觉层次：自定义装饰线颜色和样式，为文本添加个性化视觉效果；4. 提示交互信息：通过虚线、点线等装饰线提示文本的辅助属性（如提示说明） | 1. 兼容性：基础取值（none、underline等）全浏览器兼容；text-decoration-color、text-decoration-style IE不支持，Chrome 57+、Firefox 36+支持；2. 继承性：text-decoration不具有继承性，但子元素会受父元素装饰线影响（如父元素underline，子元素默认也会有下划线，需单独设置none清除）；3. 与border-bottom区别：text-decoration的下划线与文本关联，会随文本换行；border-bottom是元素底部边框，不随文本换行；4. 性能影响：简单装饰线对性能无影响，复杂波浪线（wavy）在大量文本场景下可能轻微影响渲染效率；5. 可访问性：装饰线颜色与文本颜色需保证足够对比度，避免难以区分；删除线文本需确保内容仍可清晰识别 |
| text-decoration-thickness | 一、基础取值（文本装饰线厚度）：1. auto：默认值，装饰线厚度由浏览器和字体决定；2. from-font：使用字体文件中定义的装饰线厚度；3. 长度值：px、em等（如text-decoration-thickness: 2px; 装饰线厚度为2px）；4. 百分比值：基于字体大小的百分比（如text-decoration-thickness: 15%; 厚度为字体大小的15%）；二、扩展取值：1. inherit：继承父元素的text-decoration-thickness属性值；2. initial：恢复默认值auto；三、生效前提：配合text-decoration使用（underline、overline、line-through均生效） | 1. 粗下划线样式：.thick-underline { text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: #000; }2. 字体自带装饰线：.font-decoration { text-decoration: underline; text-decoration-thickness: from-font; font-family: "Times New Roman"; }3. 百分比厚度适配字号：.percent-thickness { text-decoration: line-through; text-decoration-thickness: 20%; font-size: 20px; }4. 波浪线厚度调整：.wavy-decoration { text-decoration: underline wavy #007bff; text-decoration-thickness: 2px; text-underline-offset: 4px; } | CSS文本装饰核心属性，属于文本装饰线控制类属性，用于控制text-decoration生成的装饰线（下划线、上划线、删除线）的厚度，通过精准控制厚度，优化文本装饰的视觉效果，适配不同的设计风格 | 1. 优化视觉效果：根据文本风格和设计需求，调整装饰线厚度，避免过粗影响阅读或过细不明显；2. 适配字体特性：使用from-font取值，继承字体自带的装饰线厚度，让装饰线与字体风格更匹配；3. 打造个性化装饰：配合text-decoration-style（波浪线、虚线等）和颜色，实现多样化的文本装饰效果；4. 适配响应式字号：使用百分比值或em单位，让装饰线厚度随字体大小自动调整，保持视觉比例一致 | 1. 兼容性：IE不支持，Chrome 89+、Firefox 70+、Safari 14+支持，部分旧浏览器需添加-webkit-前缀；2. 生效范围：对underline（下划线）、overline（上划线）、line-through（删除线）均生效；3. 厚度单位：长度单位（px、em）适用于固定厚度需求；百分比单位和from-font适用于需适配字体大小的场景；4. 与text-decoration简写配合：可在text-decoration简写中指定厚度（如text-decoration: underline 2px;），但简写方式兼容性略差，建议单独设置；5. 继承性：具有继承性；6. 注意事项：装饰线厚度不宜过大（如>4px），尤其是下划线，可能遮挡文本底部；建议根据字体大小和设计风格合理取值（1px-3px为常用范围）；from-font取值依赖字体文件支持，部分字体可能无定义，需测试兼容性 |
| text-orientation | 一、基础取值（垂直书写时文字朝向）：1. mixed：默认值，垂直书写时，水平文字（如英文、数字）旋转90度，垂直文字（如中文）保持 upright；2. upright：垂直书写时，所有文字（包括英文、数字）均保持正立，不旋转；3. sideways：垂直书写时，所有文字旋转90度（与mixed中水平文字旋转方向一致）；二、扩展取值：1. inherit：继承父元素的text-orientation属性值；2. initial：恢复默认值mixed；三、生效前提：仅在writing-mode为垂直方向（vertical-rl、vertical-lr、sideways-rl、sideways-lr）时生效 | 1. 垂直书写正立文字：.vertical-upright { writing-mode: vertical-rl; text-orientation: upright; font-size: 18px; }2. 垂直书写统一旋转：.vertical-sideways { writing-mode: vertical-lr; text-orientation: sideways; }3. 竖排英文正立：.vertical-english { writing-mode: vertical-rl; text-orientation: upright; }.vertical-english span { font-family: Arial; }4. 混合朝向排版：.vertical-mixed { writing-mode: vertical-rl; text-orientation: mixed; }.vertical-mixed .upright-part { text-orientation: upright; } | CSS文本排版辅助属性，属于垂直书写文字朝向控制类属性，用于定义垂直书写模式下文字的朝向（正立或旋转），配合writing-mode实现精准的垂直排版效果，适配多语言垂直排版需求 | 1. 精准控制垂直排版：根据排版需求，控制英文、数字等水平文字在垂直书写时的朝向，提升排版美观度；2. 适配不同阅读习惯：对中文竖排场景，设置upright让文字正立，符合传统阅读习惯；对特殊设计，设置sideways实现统一旋转效果；3. 优化多语言混合排版：在垂直书写的中文文本中，让英文、数字保持正立，避免旋转导致的阅读困难；4. 丰富排版形式：通过不同朝向组合，打造多样化的垂直排版效果，提升页面设计感 | 1. 兼容性：IE不支持，Chrome 48+、Firefox 41+、Safari 10.1+支持，部分旧浏览器需添加-webkit-前缀；2. 生效依赖：必须配合writing-mode的垂直取值使用，水平书写模式下该属性无效；3. 文字类型影响：对中文、日文等垂直文字，text-orientation: upright和mixed效果差异不大；对英文、数字等水平文字，差异明显；4. 与font-size配合：垂直书写时，文字朝向可能影响视觉大小，需适当调整font-size确保阅读舒适；5. 继承性：具有继承性；6. 注意事项：使用时需结合具体的排版需求选择取值，避免过度使用sideways导致阅读困难；建议在垂直排版场景下优先测试不同取值的显示效果 |
| text-overflow | 一、基础取值：1. clip：默认值，裁剪溢出的文本，不显示省略号，溢出部分直接截断；2. ellipsis：当文本溢出时，显示省略号（…）表示被截断的内容；二、扩展取值：1. string：用指定字符串替代溢出文本（仅部分浏览器支持，如Firefox）；2. inherit：继承父元素的text-overflow属性值；三、生效前提：需配合white-space: nowrap（文本不换行）和overflow: hidden（隐藏溢出）使用 | 1. 单行文本省略：.single-line-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 200px; }2. 表格单元格文本省略：table td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }3. 响应式文本省略：.responsive-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; max-width: 300px; }@media (max-width: 768px) { .responsive-ellipsis { max-width: 180px; } }4. 裁剪溢出文本：.text-clip { white-space: nowrap; overflow: hidden; text-overflow: clip; width: 150px; } | CSS文本样式核心属性，属于溢出文本处理类属性，用于定义单行文本溢出容器时的显示方式，需配合其他属性才能生效，是控制文本排版整洁性的重要属性 | 1. 保证排版整洁：避免单行文本溢出容器破坏页面布局，提升页面规整性；2. 提示溢出内容：通过省略号告知用户存在未显示的文本，引导用户进一步操作（如hover显示完整内容）；3. 适配多样布局：在表格、列表、卡片等场景中，统一文本溢出处理方式，保持布局一致性；4. 响应式适配：配合媒体查询，在不同屏幕尺寸下调整文本容器宽度，确保省略效果合理 | 1. 兼容性：clip、ellipsis全浏览器兼容；string取值仅Firefox支持，兼容性较差；2. 生效条件：必须同时设置white-space: nowrap（强制文本不换行）和overflow: hidden（隐藏溢出内容），否则text-overflow无效；仅对单行文本有效，多行文本省略需通过JS或复杂CSS实现；3. 与overflow区别：overflow控制溢出内容的显示/隐藏，text-overflow控制溢出文本的具体显示形式（截断/省略号）；4. 交互补充：设置ellipsis后，建议为元素添加title属性显示完整文本，提升用户体验（如<div class="ellipsis" title="完整文本内容">溢出文本</div>）；5. 容器要求：元素需有明确的宽度（固定宽度或百分比宽度），否则文本会自适应容器宽度，不会产生溢出；6. 性能影响：无明显性能影响，是控制文本排版的高效方案 |
| text-shadow | 一、基础取值（文本阴影参数顺序）：text-shadow: h-offset v-offset blur color;1. h-offset：水平偏移量（必选，正值向右，负值向左）；2. v-offset：垂直偏移量（必选，正值向下，负值向上）；3. blur：模糊半径（可选，值越大阴影越模糊，默认0）；4. color：阴影颜色（可选，默认与文本颜色一致，常用rgba设置透明阴影）；二、扩展取值：1. 多重阴影：多个阴影用逗号分隔（如text-shadow: 0 2px 4px #000, 0 4px 8px #666;）；2. inherit：继承父元素的text-shadow属性值；3. none：默认值，无阴影效果 | 1. 基础文本阴影：h1 { text-shadow: 2px 2px 4px rgba(0,0,0,0.3); }2. 发光文本效果：.glow-text { font-size: 24px; color: #fff; text-shadow: 0 0 10px #007bff, 0 0 20px #007bff; }3. 多重阴影效果：.multi-shadow { text-shadow: 1px 1px 2px #000, -1px -1px 2px #fff; }4. 立体文本效果：.3d-text { font-size: 32px; font-weight: bold; text-shadow: 1px 1px 0 #000, 2px 2px 0 #000, 3px 3px 0 #000; } | CSS文本样式核心属性，属于文本视觉效果类属性，用于为文本添加阴影效果，可通过控制阴影的偏移、模糊、颜色和数量，实现发光、立体、渐变等多样化的文本视觉效果 | 1. 增强文本辨识度：为浅色文本添加深色阴影，或为深色文本添加浅色阴影，提升文本在复杂背景上的可读性；2. 实现特殊文本效果：通过多重阴影或模糊阴影，实现发光、立体、渐变等个性化文本效果，增强页面视觉吸引力；3. 突出重点文本：为标题、标语等重点文本添加阴影，使其在页面中更醒目；4. 强化页面风格：配合页面整体风格，通过文本阴影营造特定氛围（如科技感、复古感） | 1. 兼容性：IE10+支持text-shadow属性；现代浏览器全兼容；2. 性能影响：阴影的模糊半径（blur）越大、阴影数量越多，对浏览器渲染性能的影响越大；大量文本添加复杂阴影可能导致页面卡顿，建议合理控制；3. 颜色搭配：阴影颜色与文本颜色需合理搭配，确保既增强效果又不影响可读性；推荐使用rgba设置半透明阴影，效果更自然；4. 继承性：具有继承性，子元素会继承父元素的文本阴影设置；5. 与box-shadow区别：text-shadow作用于文本内容，box-shadow作用于元素的边框盒子；6. 打印影响：部分浏览器打印时不支持text-shadow效果，需注意打印样式适配；7. 最佳实践：避免为过小的文本（如12px以下）添加复杂阴影，可能导致文本模糊不清；重点文本的阴影效果不宜过于夸张，以免喧宾夺主 |
| text-underline-offset | 一、基础取值（文本下划线偏移量）：1. auto：默认值，下划线的偏移量由浏览器默认决定；2. 长度值：px、em、rem等（如text-underline-offset: 4px; 下划线向下偏移4px）；3. 百分比值：基于字体大小的百分比（如text-underline-offset: 20%; 偏移量为字体大小的20%）；二、扩展取值：1. inherit：继承父元素的text-underline-offset属性值；2. initial：恢复默认值auto；三、生效前提：需配合text-decoration: underline使用，仅对下划线生效（对overline、line-through无效） | 1. 自定义下划线偏移：.custom-underline { text-decoration: underline; text-underline-offset: 6px; text-decoration-color: #007bff; }2. 百分比偏移适配字体：.percent-underline { text-decoration: underline; text-underline-offset: 15%; font-size: 18px; }3. hover调整偏移：.hover-underline { text-decoration: underline; text-underline-offset: 3px; transition: text-underline-offset 0.3s; }.hover-underline:hover { text-underline-offset: 6px; }4. 配合文字装饰样式：.fancy-underline { text-decoration: underline wavy #dc3545 2px; text-underline-offset: 5px; } | CSS文本装饰辅助属性，属于文本下划线控制类属性，用于控制text-decoration: underline生成的下划线与文本之间的偏移距离，通过调整偏移量，优化下划线的视觉效果和文本可读性 | 1. 优化文本可读性：调整下划线与文本的距离，避免下划线与文本底部重叠（尤其是小写字母如g、j），提升阅读体验；2. 打造个性化下划线：通过自定义偏移量，配合text-decoration-color、text-decoration-style，实现独特的下划线样式；3. 实现动态下划线效果：配合transition/animation，实现下划线偏移量的动态变化（如hover时偏移量增大） | 1. 兼容性：IE不支持，Chrome 87+、Firefox 70+、Safari 12.1+支持，部分旧浏览器需添加-webkit-前缀；2. 生效依赖：仅对text-decoration: underline生效，对overline（上划线）、line-through（删除线）无效；若需调整上划线/删除线位置，需使用border模拟；3. 偏移方向：默认向下偏移（正值），部分浏览器支持负值（向上偏移），但兼容性较差，不建议使用；4. 与字体大小适配：使用百分比值或em单位，可让偏移量随字体大小自动调整，适配不同字号的文本；5. 继承性：具有继承性；6. 注意事项：偏移量不宜过大（如>10px），可能导致下划线与文本脱节，影响视觉连贯性；建议根据字体大小合理取值（3px-6px为常用范围） |
| text-wrap | 一、基础取值（文本换行规则）：1. normal：默认值，浏览器默认换行规则（优先在单词边界、标点符号后换行）；2. nowrap：禁止文本换行，文本会在同一行显示，超出容器部分溢出（等价于white-space: nowrap）；3. balance：平衡换行，浏览器自动调整换行位置，使每行文本长度尽可能均匀，提升阅读体验；4. pretty：美观换行，在balance基础上，优先在标点符号后换行，进一步优化排版美观度；二、扩展取值：1. inherit：继承父元素的text-wrap属性值；2. initial：恢复默认值normal；三、生效前提：作用于块级元素或行内块元素，对inline元素无效 | 1. 平衡文本换行：.balance-text { width: 300px; text-wrap: balance; /* 多行文本长度均匀 */ }2. 美观标点换行：.pretty-text { width: 250px; text-wrap: pretty; /* 优先在标点后换行 */ }3. 禁止换行：.no-wrap-text { text-wrap: nowrap; overflow: hidden; text-overflow: ellipsis; /* 超出显示省略号 */ }4. 响应式平衡换行：.responsive-balance { text-wrap: balance; }@media (max-width: 768px) { .responsive-balance { width: 100%; } } | CSS文本排版核心属性，属于文本换行控制类属性，用于定义文本在容器内的换行规则，通过balance、pretty等取值实现平衡、美观的换行效果，替代传统的text-align: justify，提升文本阅读体验 | 1. 优化多行文本排版：平衡每行文本长度，避免出现单行过短或过长的情况，提升阅读舒适度；2. 提升排版美观度：优先在标点符号后换行，使文本排版更规整、美观；3. 简化换行控制：替代复杂的text-align: justify + 自定义间距的方案，用单一属性实现优质换行效果；4. 适配响应式文本：在不同宽度的容器中，自动调整换行位置，保持良好的排版效果 | 1. 兼容性：IE不支持，Chrome 114+、Firefox 115+、Safari 16.4+支持，部分旧浏览器需添加-webkit-前缀；2. 与white-space的关系：text-wrap: nowrap等价于white-space: nowrap；若同时设置，两者效果一致；3. balance/pretty生效限制：仅对多行文本生效，单行文本无效果；文本行数越多，平衡效果越明显；4. 性能影响：balance和pretty取值需要浏览器计算最优换行位置，可能轻微增加渲染消耗，但现代浏览器优化较好；5. 继承性：具有继承性；6. 注意事项：balance和pretty取值在极短文本或极窄容器中效果不明显；建议用于正文文本、卡片描述等多行文本场景；旧浏览器需做好降级处理（默认normal换行） |
| top/right/bottom/left | 一、基础取值：1. 长度值：px、em、rem等固定单位（如top: 20px; right: 10px;）；2. 百分比值：基于最近已定位祖先元素的宽度（left/right）或高度（top/bottom）计算；3. auto：默认值，自动计算偏移位置，通常为元素原始位置；二、扩展取值：1. inherit：继承父元素对应的偏移属性值；2. initial：恢复默认值auto；三、生效前提：仅对已定位元素（position: relative/absolute/fixed/sticky）生效 | 1. 相对定位偏移：.btn-hover { position: relative; transition: top 0.3s; }.btn-hover:hover { top: -2px; }2. 绝对定位居中：.modal { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 300px; height: 200px; background: #fff; }3. 固定定位偏移：.back-to-top { position: fixed; bottom: 30px; right: 30px; width: 40px; height: 40px; background: #007bff; color: #fff; border-radius: 50%; }4. 粘性定位偏移：.sticky-header { position: sticky; top: 10px; background: #fff; padding: 10px; } | CSS定位体系辅助属性，属于元素定位偏移类属性，用于精准控制已定位元素在垂直（top/bottom）和水平（left/right）方向的偏移位置，是实现元素精准定位的核心辅助属性 | 1. 精准控制元素位置：配合定位模式，将已定位元素精准偏移到目标位置，实现徽章、弹窗、悬浮按钮等组件的布局；2. 实现元素居中：通过top/right/bottom/left: 0 + margin: auto实现绝对定位元素的水平垂直居中；3. 动态调整位置：配合transition实现元素hover时的轻微偏移，增强交互反馈；4. 适配响应式布局：通过百分比取值或媒体查询调整偏移量，适配不同屏幕尺寸下的定位需求 | 1. 兼容性：全浏览器兼容，无版本限制；2. 生效条件：仅对position为relative、absolute、fixed、sticky的元素生效，静态定位（static）元素设置无效；3. 定位基准差异：- relative：偏移基准是元素自身的原始位置；- absolute：偏移基准是最近的已定位祖先元素（非static），无则为视口；- fixed：偏移基准是视口（浏览器窗口）；- sticky：偏移基准是父容器，滚动到指定位置后基准变为视口；4. 百分比取值参考：left/right的百分比基于祖先元素的宽度，top/bottom的百分比基于祖先元素的高度；若祖先元素无明确高度，top/bottom百分比可能失效；5. 冲突处理：top与bottom同时设置时，top优先级更高（垂直方向）；left与right同时设置时，left优先级更高（水平方向）；6. 与transform区别：top/right/bottom/left通过改变元素位置实现偏移，会触发重排；transform: translate通过变换实现偏移，不会触发重排，性能更优；7. 性能影响：频繁修改偏移属性会触发多次重排，动态偏移优先考虑transform: translate |
| touch-action | 一、基础取值（触摸行为控制）：1. auto：默认值，浏览器默认处理触摸行为（如滚动、缩放、双击放大）；2. none：禁止浏览器默认的触摸行为，所有触摸事件由JS处理；3. manipulation：仅允许滚动和持续缩放（pinch-to-zoom），禁止双击放大、双击滚动等行为；4. pan-x：允许水平方向滚动，禁止其他默认触摸行为；5. pan-y：允许垂直方向滚动，禁止其他默认触摸行为；6. pan-up/pan-down/pan-left/pan-right：仅允许指定方向的滚动；7. pinch-zoom：允许缩放，禁止其他默认触摸行为；二、扩展取值：1. 组合取值：多个取值用空格分隔（如touch-action: pan-y pinch-zoom; 允许垂直滚动和缩放）；2. inherit：继承父元素的touch-action属性值；3. initial：恢复默认值auto；三、生效前提：作用于可触摸交互的元素，适配移动端触摸场景 | 1. 禁止双击放大：.no-dblclick-zoom { touch-action: manipulation; /* 仅允许滚动和缩放，禁止双击放大 */ }2. 仅允许垂直滚动：.only-vertical-scroll { touch-action: pan-y; overflow-y: auto; }3. 禁止所有默认触摸行为：.custom-touch { touch-action: none; /* 触摸事件完全由JS处理 */ }.custom-touch:hover { cursor: pointer; }4. 允许滚动和缩放：.scroll-zoom { touch-action: pan-y pinch-zoom; overflow-y: auto; } | CSS触摸交互核心属性，属于触摸行为控制类属性，用于控制浏览器对元素触摸事件的默认处理方式，禁止或允许特定的触摸行为（如滚动、缩放、双击放大），适配移动端自定义触摸交互场景 | 1. 优化触摸交互体验：禁止不必要的默认触摸行为（如双击放大），避免干扰自定义交互（如双击编辑、双击点赞）；2. 精准控制滚动方向：仅允许指定方向的滚动，避免误触导致的横向/纵向滚动混乱；3. 提升自定义触摸性能：禁止默认触摸行为后，JS触摸事件响应更迅速，减少延迟；4. 适配复杂触摸场景：支持组合取值，同时允许多种必要的触摸行为（如滚动+缩放） | 1. 兼容性：IE11+支持部分取值，现代浏览器全兼容，部分旧浏览器需添加-webkit-前缀；2. 适用场景：主要用于移动端或支持触摸的设备，桌面端鼠标交互不受影响；3. 与JS事件配合：设置touch-action: none后，浏览器不会拦截触摸事件，JS可正常监听touchstart、touchmove等事件；4. 滚动方向限制：设置pan-x/pan-y后，仅允许对应方向的滚动，其他方向的触摸滑动不会触发滚动；5. 继承性：具有继承性；6. 注意事项：避免过度禁止默认触摸行为，如全局设置touch-action: none可能导致用户无法正常滚动页面；建议仅在需要自定义触摸交互的元素上精准设置；部分浏览器对组合取值的支持可能存在差异，需测试验证 |
| transform | 一、基础取值（变换函数）：1. translate(x, y)：平移，x为水平平移距离，y为垂直平移距离（可省略y，即translate(x)）；2. scale(x, y)：缩放，x为水平缩放比例，y为垂直缩放比例（可省略y，即scale(x)，1为原尺寸，大于1放大，小于1缩小）；3. rotate(angle)：旋转，angle为旋转角度（单位deg/rad，如rotate(30deg)，正角度顺时针旋转）；4. skew(x-angle, y-angle)：倾斜，x-angle为水平倾斜角度，y-angle为垂直倾斜角度（可省略y-angle）；二、扩展取值：1. matrix()：矩阵变换，整合平移、缩放、旋转、倾斜于一体；2. none：默认值，无变换效果；3. inherit：继承父元素的transform属性值；三、三维变换（扩展）：translate3d、scale3d、rotate3d等（实现3D效果） | 1. 元素平移：.center-box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* 实现元素水平垂直居中 */ }.move-right { transform: translate(20px, 0); }2. 元素缩放：.card:hover { transform: scale(1.05); transition: transform 0.3s; }.small-icon { transform: scale(0.8); }3. 元素旋转：.rotate-icon { transform: rotate(45deg); }.loading-spinner { transform: rotate(360deg); animation: spin 1s linear infinite; }4. 组合变换：.complex-transform { transform: translate(10px, 10px) rotate(15deg) scale(1.1); transition: transform 0.3s; } | CSS动画与变形体系核心属性，属于元素变换类属性，用于对元素进行平移、缩放、旋转、倾斜等几何变换，不影响元素在文档流中的位置，实现丰富的视觉效果 | 1. 实现元素定位：通过translate快速实现元素的水平垂直居中，简化定位布局；2. 添加交互视觉效果：配合hover、transition实现元素的缩放、旋转等交互效果，提升页面生动性；3. 制作动画效果：与animation配合，实现旋转加载、平移滚动等复杂动画；4. 调整元素形态：通过skew实现元素倾斜，配合其他变换制作特殊视觉样式；5. 优化布局：变换不影响元素在文档流中的位置，可避免因位置调整导致的布局错乱 | 1. 兼容性：基础2D变换（translate、scale、rotate、skew）IE9+支持，现代浏览器全兼容；3D变换IE10+支持；部分旧浏览器需添加前缀（-webkit-、-moz-等）；2. 文档流影响：transform变换后的元素仍占据原始文档流位置，不会影响其他元素的布局；3. 触发合成层：transform（尤其是3D变换）会触发浏览器为元素创建独立合成层，优化动画性能，但过多合成层会增加内存占用；4. 变换原点：默认变换原点为元素中心（50% 50%），可通过transform-origin属性修改（如transform-origin: top left; 以左上角为原点变换）；5. 组合变换顺序：多个变换函数的顺序会影响最终效果（如先平移后旋转 ≠ 先旋转后平移），需按需求调整顺序；6. 性能优化：transform动画性能优于width、height、margin等属性的动画，优先使用transform实现元素的位移、缩放等动画效果；7. 限制：transform无法作用于display: none的元素；变换后的元素可能会遮挡其他元素，需配合z-index调整层级 |
| transform-style | 一、基础取值（3D变换样式）：1. flat：默认值，子元素在2D平面上呈现，不开启3D空间，子元素的3D变换不会产生立体感；2. preserve-3d：开启3D空间，子元素会在3D空间中呈现，其3D变换效果会被保留，可实现父子元素的3D叠加效果；二、扩展取值：1. inherit：继承父元素的transform-style属性值；2. initial：恢复默认值flat；三、生效前提：需配合3D transform属性使用，且通常与父容器的perspective配合，实现完整3D效果 | 1. 3D卡片容器：.card-container { perspective: 1000px; }.card { transform-style: preserve-3d; /* 开启3D空间，让正面和背面在3D空间叠加 */ width: 200px; height: 300px; transition: transform 0.6s; }.card-front, .card-back { position: absolute; backface-visibility: hidden; }.card-back { transform: rotateY(180deg); }2. 3D立方体：.cube { transform-style: preserve-3d; /* 开启3D空间，让立方体的6个面在3D空间中排列 */ width: 100px; height: 100px; animation: rotate 10s linear infinite; }.cube-face { position: absolute; width: 100px; height: 100px; backface-visibility: hidden; }3. 嵌套3D元素：.parent-3d { transform-style: preserve-3d; transform: rotateY(30deg); }.child-3d { transform-style: preserve-3d; transform: rotateX(20deg); } /* 子元素继承3D空间 */ | CSS 3D变换核心属性，属于3D空间控制类属性，用于控制元素是否为其子元素创建3D空间，决定子元素的3D变换是否能呈现出立体叠加效果，是实现复杂3D效果（如立方体、嵌套3D元素）的关键 | 1. 开启3D空间：为元素开启3D空间，让子元素的3D变换能够在三维空间中叠加，实现真实的3D立体效果；2. 支持嵌套3D：允许3D元素嵌套，子元素可继承父元素的3D空间，实现复杂的多层3D效果；3. 区分2D/3D模式：通过切换flat和preserve-3d，快速切换元素的2D/3D呈现模式，适配不同设计需求 | 1. 兼容性：IE10+支持，IE9及以下不支持；现代浏览器全兼容，部分旧浏览器需添加-webkit-前缀；2. 作用位置：设置在需要为子元素提供3D空间的元素上（通常是3D变换元素本身）；3. 必配属性：需配合父容器的perspective和子元素的3D transform使用，否则无法呈现完整3D效果；4. 继承性：具有继承性；5. 性能影响：开启preserve-3d会增加浏览器的3D渲染计算，复杂嵌套3D元素可能轻微影响性能；6. 注意事项：若元素无3D子元素，无需开启preserve-3d，避免不必要的性能消耗；嵌套3D元素时，建议仅在必要层级开启，减少渲染压力 |
| transition | 一、复合属性拆解（可单独设置子属性）：1. transition-property：过渡属性，取值为具体CSS属性名（如width、background-color）、all（所有可过渡属性）、none（无过渡属性）；2. transition-duration：过渡持续时间，取值为时间单位（s/ms，如0.3s、300ms），必须设置，否则过渡无效；3. transition-timing-function：过渡 timing 函数，控制过渡速度变化，取值：ease（默认，慢-快-慢）、linear（匀速）、ease-in（慢开始）、ease-out（慢结束）、ease-in-out（慢开始慢结束）、cubic-bezier(n,n,n,n)（自定义贝塞尔曲线）；4. transition-delay：过渡延迟时间，取值为时间单位（s/ms，如0.2s，默认0s）；二、扩展取值：inherit（继承父元素的transition属性值）、initial（恢复默认值none） | 1. 基础过渡效果：.btn { background: #007bff; transition: background-color 0.3s ease; }.btn:hover { background: #0056b3; }2. 多属性过渡：.card { width: 200px; height: 300px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: width 0.3s, box-shadow 0.3s; }.card:hover { width: 220px; box-shadow: 0 4px 8px rgba(0,0,0,0.2); }3. 自定义过渡速度：.box { transform: scale(1); transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); }.box:hover { transform: scale(1.1); }4. 延迟过渡：.menu-item { opacity: 0; transition: opacity 0.3s ease 0.2s; }.menu:hover .menu-item { opacity: 1; } | CSS动画体系核心属性，属于过渡动画复合属性，用于定义元素CSS属性变化时的平滑过渡效果，实现无JS的简单动画交互 | 1. 实现平滑交互效果：为元素的hover、focus等状态变化添加过渡，避免样式突变，提升交互体验；2. 简化动画开发：无需编写JS，通过CSS即可实现简单的动画效果（如颜色变化、尺寸缩放、透明度变化）；3. 控制动画细节：精准控制过渡的属性、持续时间、速度曲线和延迟时间，实现多样化的过渡效果；4. 提升页面质感：平滑的过渡动画可增强页面的视觉层次感和交互质感，让页面更生动 | 1. 兼容性：transition属性IE10+支持，现代浏览器全兼容；部分旧浏览器需添加前缀（-webkit-、-moz-等）；2. 过渡生效条件：仅对具有中间值的CSS属性有效（如width、color、opacity等），对display: none/block等无中间值的属性无效；需触发属性变化（如hover、focus、JS修改样式）；3. 性能优化：优先对transform、opacity属性设置过渡，这两个属性可触发浏览器合成层优化，性能优于width、height、margin等属性（后者会触发重排）；4. 复合属性书写规则：推荐顺序为transition: property duration timing-function delay; 可简写为transition: all 0.3s;（默认ease，无延迟）；5. 多属性过渡：多个过渡属性用逗号分隔，可分别设置不同的duration、timing-function、delay；6. 过渡终止：过渡过程中若再次触发属性变化，会终止当前过渡并开始新的过渡；可通过transition: none临时禁用过渡 |
| transition-duration | 一、基础取值（过渡动画持续时间）：1. 时间值：单位为s（秒）或ms（毫秒），必选值（如transition-duration: 0.3s; 持续0.3秒）；2. 多个时间值：为多个过渡属性分别指定时长（与transition-property顺序对应，如transition-duration: 0.2s, 0.5s;）；二、扩展取值：1. inherit：继承父元素的transition-duration属性值；2. initial：恢复默认值0s（默认无过渡效果）；三、生效前提：需配合transition-property（指定过渡属性）使用，单独设置无效 | 1. 基础过渡时长：.btn { background-color: #007bff; transition-property: background-color; transition-duration: 0.3s; }.btn:hover { background-color: #0056b3; }2. 多属性差异化时长：.card { width: 200px; height: 300px; transition-property: width, height; transition-duration: 0.4s, 0.6s; }.card:hover { width: 220px; height: 320px; }3. 毫秒级过渡：.badge { transform: scale(1); transition-property: transform; transition-duration: 150ms; }.badge:hover { transform: scale(1.1); }4. 组合过渡简写：.box { transition: all 0.3s; /* 隐含transition-duration: 0.3s */ } | CSS过渡动画核心子属性，属于过渡时长控制类属性，用于定义指定CSS属性发生变化时，平滑过渡动画的持续时间，是实现流畅过渡效果的关键参数，为transition复合属性的组成部分 | 1. 控制过渡节奏：通过设置不同时长，精准控制动画的快慢，适配不同交互场景（如快速反馈用短时长，平滑切换用长时长）；2. 实现差异化过渡：为多个同时变化的属性设置不同时长，打造层次丰富的过渡效果；3. 保障交互流畅性：合理的时长设置可避免过渡过于突兀，提升用户交互体验；4. 配合过渡其他属性：与transition-timing-function、transition-delay配合，实现更精细的过渡动画控制 | 1. 兼容性：IE10+支持，现代浏览器全兼容，部分旧浏览器需添加-ms-、-webkit-等前缀；2. 默认值陷阱：默认值为0s，此时即使设置了transition-property，也不会有过渡效果，必须显式设置时长；3. 时长单位：支持s和ms，1s=1000ms，推荐使用s（如0.3s比300ms更直观）；4. 多属性对应规则：当transition-property指定多个属性时，transition-duration的多个值需按顺序一一对应；值的数量少于属性数量时，剩余属性复用最后一个时长值；5. 继承性：具有继承性，但子元素通常单独设置过渡时长；6. 性能影响：时长过长（如超过2s）可能导致交互延迟感，过短（如少于0.1s）可能让过渡不明显，推荐合理范围为0.2s-0.5s；7. 与动画区别：transition-duration是过渡动画时长，仅在属性变化时触发；animation-duration是关键帧动画时长，可循环触发 |
| transition-property | 一、基础取值（指定过渡的CSS属性）：1. none：无过渡属性，不执行任何过渡；2. all：默认值，所有可过渡的CSS属性都执行过渡；3. 具体CSS属性名：指定单个或多个可过渡的属性（多个属性用逗号分隔，如transition-property: width, background-color;）；二、扩展取值：1. inherit：继承父元素的transition-property属性值；2. initial：恢复默认值all；三、可过渡属性说明：仅支持具有中间值的属性（如width、color、opacity、transform等），display、visibility（无中间值）等属性不可过渡 | 1. 单个属性过渡：.box { width: 100px; transition-property: width; transition-duration: 0.3s; }.box:hover { width: 200px; }2. 多个属性过渡：.card { background-color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition-property: background-color, box-shadow; transition-duration: 0.3s; }.card:hover { background-color: #f8f9fa; box-shadow: 0 4px 8px rgba(0,0,0,0.2); }3. 禁用过渡：.no-transition { transition-property: none; }4. 精准过渡属性：.btn { transform: scale(1); opacity: 1; transition-property: transform, opacity; transition-duration: 0.2s; }.btn:hover { transform: scale(1.05); opacity: 0.9; } | CSS过渡动画核心子属性，属于过渡属性指定类属性，用于明确指定哪些CSS属性发生变化时执行平滑过渡效果，是transition复合属性的重要组成部分，可精准控制过渡的作用范围 | 1. 精准控制过渡范围：避免默认all带来的不必要过渡（如某些属性变化无需过渡），提升过渡性能；2. 实现差异化过渡：为不同属性设置不同的过渡时长、速度曲线，实现多样化的过渡效果；3. 禁用过渡效果：通过none取值临时或永久禁用过渡，适配特殊交互场景；4. 提升代码可读性：明确指定过渡属性，让代码逻辑更清晰，便于后续维护 | 1. 兼容性：与transition复合属性一致，IE10+支持，现代浏览器全兼容；部分旧浏览器需添加前缀；2. 必配属性：transition-property必须配合transition-duration（过渡时长）使用，否则过渡无效（时长默认0s）；3. 可过渡属性限制：仅对具有中间值的属性生效，如尺寸类（width、height）、颜色类（color、background-color）、变换类（transform）、透明度类（opacity）等；不可过渡属性如display、position、z-index等；4. 多个属性书写：多个过渡属性用逗号分隔，可分别为每个属性设置transition-duration、transition-timing-function等（用逗号对应）；5. 继承性：具有继承性；6. 性能优化：优先指定具体的过渡属性，避免使用all（all可能导致浏览器监听不必要的属性变化，增加性能消耗）；优先过渡transform和opacity属性（硬件加速优化好）；7. 注意事项：属性名需准确（如background-color不可简写为background），否则过渡可能不生效 |
| transition-timing-function | 一、基础取值（过渡动画速度曲线）：1. ease：默认值，先慢后快再慢（ cubic-bezier(0.25, 0.1, 0.25, 1) ）；2. linear：匀速运动（ cubic-bezier(0, 0, 1, 1) ）；3. ease-in：先慢后快（ cubic-bezier(0.42, 0, 1, 1) ）；4. ease-out：先快后慢（ cubic-bezier(0, 0, 0.58, 1) ）；5. ease-in-out：先慢后快再慢（比ease更平缓， cubic-bezier(0.42, 0, 0.58, 1) ）；6. cubic-bezier(n,n,n,n)：自定义贝塞尔曲线（四个参数范围0-1，分别为x1,y1,x2,y2）；7. step(n, start/end)：分步过渡（n为步数，start表示第一步开始时触发，end表示第一步结束时触发）；二、扩展取值：inherit（继承父元素值）、initial（恢复默认值ease） | 1. 匀速过渡：.progress-bar { width: 0%; transition: width 1s linear; }.progress-bar.active { width: 100%; }2. 先快后慢过渡：.dropdown { transform: translateY(-20px); opacity: 0; transition: transform 0.3s ease-out, opacity 0.3s ease-out; }.dropdown.show { transform: translateY(0); opacity: 1; }3. 自定义贝塞尔曲线：.bounce { transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); }.bounce:hover { transform: scale(1.1); }4. 分步过渡：.step-animation { width: 100px; transition: width 0.5s step(5, end); }.step-animation:hover { width: 200px; } | CSS过渡动画核心子属性，属于过渡速度控制类属性，用于定义过渡动画的速度变化曲线，决定动画在不同阶段的快慢节奏，是塑造过渡动画质感的关键属性，为transition复合属性的组成部分 | 1. 塑造动画质感：通过不同速度曲线，让过渡动画更贴合真实物理运动（如匀速的进度条、先快后慢的下拉菜单）；2. 实现个性化过渡：通过自定义贝塞尔曲线或分步过渡，打造独特的动画效果（如弹性缩放、阶梯式变化）；3. 匹配交互场景：不同交互场景适配不同速度曲线（如强调反馈的动画用ease-in，强调平滑的动画用ease-out）；4. 增强用户感知：合理的速度曲线可让用户更清晰地感知属性变化过程，提升交互体验 | 1. 兼容性：IE10+支持基础取值，自定义贝塞尔曲线和step()函数在IE10+也支持，现代浏览器全兼容；2. 贝塞尔曲线参数：cubic-bezier(x1,y1,x2,y2)中，x1和x2表示时间进度（0-1），y1和y2表示动画进度（可大于1或小于0，实现弹性效果）；3. step()函数使用：步数n越大，过渡越平滑；start和end的区别在于触发时机，start更接近“即时响应”，end更接近“阶段完成”；4. 多属性对应：与transition-duration类似，多个速度曲线值需与transition-property的属性顺序一一对应；5. 继承性：具有继承性；6. 性能影响：基础速度曲线无性能影响；复杂自定义贝塞尔曲线或过多步数的step()可能轻微增加渲染压力；7. 最佳实践：日常开发优先使用基础取值（ease、linear、ease-out），特殊效果再使用自定义贝塞尔曲线；避免过度使用复杂曲线，保持动画简洁流畅 |
| user-select | 一、基础取值（文本选择控制）：1. auto：默认值，浏览器默认文本选择行为（可选择）；2. none：禁止用户选择文本；3. text：允许用户选择文本（覆盖默认禁止选择的元素，如按钮）；4. all：用户点击一次即可选择元素内所有文本；二、扩展取值：1. inherit：继承父元素的user-select属性值；2. initial：恢复默认值auto；三、生效元素：所有HTML元素，常用于控制页面文本的可选择性 | 1. 禁止文本选择：.no-select { user-select: none; -webkit-user-select: none; /* 适配webkit内核浏览器 */ }2. 允许按钮文本选择：.btn { user-select: text; }3. 一键全选文本：.code-block { user-select: all; padding: 10px; background: #f8f9fa; }4. 局部禁止选择：.article { user-select: auto; }.article .copyright { user-select: none; /* 版权信息禁止选择 */ } | CSS文本交互核心属性，属于文本选择控制类属性，用于定义用户是否可以选择元素内的文本，以及选择的行为模式（部分选择/一键全选），可提升页面交互体验和内容保护 | 1. 保护页面内容：禁止选择敏感文本（如版权信息、验证码），防止内容被随意复制；2. 优化交互体验：对交互元素（如按钮、图标）禁止文本选择，避免点击时误选文本；3. 便捷文本复制：对代码块、引用文本等设置一键全选，提升用户复制效率；4. 统一选择行为：覆盖浏览器默认的文本选择规则，实现页面一致的文本选择体验 | 1. 兼容性：IE10+支持，IE9及以下不支持；Chrome、Firefox、Safari需添加私有前缀（-webkit-、-moz-、-ms-）；2. 兼容性写法：实际开发中需添加前缀兼容多浏览器，如：user-select: none;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;3. 作用范围：仅阻止用户通过鼠标/触摸手动选择文本，无法阻止通过JS复制文本；4. 特殊元素：button、input等元素默认可能禁止文本选择，可通过user-select: text开启；5. 继承性：具有继承性；6. 注意事项：禁止文本选择需合理使用，避免影响用户正常的复制需求（如正文文本不应禁止选择），兼顾内容保护和用户体验 |
| visibility | 一、基础取值：1. visible：默认值，元素可见；2. hidden：元素不可见，但仍占据页面空间，不响应交互事件；3. collapse：仅适用于表格元素，隐藏表格行或列，且不占据空间（类似display: none对表格的效果）；二、扩展取值：1. inherit：继承父元素的visibility属性值；2. initial：恢复默认值visible | 1. 元素隐藏（保留空间）：.hidden-element { visibility: hidden; }2. 表格行/列隐藏：table tr.hidden-row { visibility: collapse; }table td.hidden-col { visibility: collapse; }3. 动画过渡隐藏：.fade-element { visibility: visible; opacity: 1; transition: visibility 0.3s, opacity 0.3s; }.fade-element.hidden { visibility: hidden; opacity: 0; }4. 父子元素隐藏：.parent-hidden { visibility: hidden; }.parent-hidden .child { visibility: visible; } /* 父元素隐藏，子元素可单独显示 */ | CSS显示控制核心属性，属于元素可见性控制类属性，用于定义元素的可见状态，可控制元素是否显示但保留空间，或隐藏表格行/列，与display、opacity共同构成元素显示隐藏的核心方案 | 1. 隐藏元素保留布局：元素不可见但占据空间，避免因元素隐藏导致页面布局抖动；2. 表格元素精准隐藏：专门针对表格行/列的隐藏，确保表格布局的完整性；3. 平滑过渡显示隐藏：配合opacity和transition实现无抖动的淡入淡出效果（避免display: none无法过渡的问题）；4. 父子元素独立控制：父元素隐藏时，可单独设置子元素可见，实现特殊视觉效果 | 1. 兼容性：全浏览器兼容，无版本限制；2. 与display: none区别：visibility: hidden元素保留空间、不响应交互；display: none元素不保留空间、不响应交互；display: none会触发重排，visibility: hidden仅触发重绘，性能更优；3. 与opacity: 0区别：visibility: hidden元素不可见、不响应交互；opacity: 0元素不可见、但响应交互；两者均可配合transition实现平滑过渡；4. collapse取值限制：仅对table、tr、td、th等表格元素有效，对其他元素设置collapse等同于hidden；5. 继承性：具有继承性，但子元素可覆盖父元素的visibility值（如父元素hidden，子元素可设置visible显示）；6. 性能影响：visibility: hidden仅触发重绘，对性能影响较小；频繁切换visibility可能轻微影响性能，但优于切换display: none；7. 可访问性：visibility: hidden的元素会被屏幕阅读器忽略，提升可访问性；display: none的元素同样会被忽略 |
| white-space | 一、基础取值：1. normal：默认值，合并多个空格和换行符为一个空格，文本自动换行；2. nowrap：不合并空格，文本不自动换行，强制在一行显示；3. pre：保留原始空格和换行符，文本不自动换行（类似pre标签效果）；4. pre-wrap：保留原始空格和换行符，文本超出容器宽度时自动换行；5. pre-line：合并多个空格为一个空格，保留原始换行符，文本自动换行；二、扩展取值：1. inherit：继承父元素的white-space属性值；2. initial：恢复默认值normal | 1. 单行文本不换行：.nowrap-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 250px; }2. 保留代码格式：.code-block { white-space: pre; background: #f8f9fa; padding: 15px; border-radius: 4px; font-family: monospace; }3. 保留文本换行：.article-content { white-space: pre-line; line-height: 1.8; }4. 保留空格并自动换行：.poem-text { white-space: pre-wrap; font-size: 16px; text-align: center; padding: 20px; } | CSS文本样式核心属性，属于文本空白处理类属性，用于控制元素内文本的空格、换行符的处理方式以及是否自动换行，直接影响文本的排版格式 | 1. 控制文本换行：实现单行/多行文本排版，配合text-overflow实现溢出省略；2. 保留原始格式：在代码展示、诗歌、协议文本等场景中，保留文本的原始空格和换行，保证格式准确性；3. 优化阅读体验：根据文本类型（普通正文、代码、诗歌）设置合适的空白处理方式，提升可读性；4. 统一排版风格：规范页面中文本的空白和换行处理，保持整体排版一致性 | 1. 兼容性：全浏览器兼容，无版本限制；2. 常见组合：white-space: nowrap + overflow: hidden + text-overflow: ellipsis 是单行文本溢出省略的标准组合，广泛应用于列表、卡片等场景；3. 与pre标签区别：pre标签是语义化标签，默认white-space: pre；white-space属性仅控制样式，无语义含义；4. 继承性：具有继承性，子元素默认继承父元素的空白处理方式；5. 性能影响：无明显性能影响，不同取值对渲染效率的差异可忽略；6. 特殊字符影响： （非换行空格）不受white-space影响，始终保留一个空格；<br/>标签始终强制换行，不受white-space控制 |
| width | 一、基础取值：1. 长度值：px、em、rem等固定单位（如width: 300px; width: 20em;）；2. 百分比值：基于父元素内容宽度的百分比（如width: 50%; width: 80%;）；3. 关键字取值：- auto：默认值，元素宽度自动适配内容或父元素（块级元素默认占满父元素宽度，行内元素适配内容宽度）；- max-content：宽度适配内容的最大宽度（包裹内容，不换行时的宽度）；- min-content：宽度适配内容的最小宽度（仅容纳内容最小必要宽度，如英文单词不拆分）；- fit-content：宽度介于min-content和max-content之间，适配内容且不超出可用空间；二、扩展取值：inherit（继承父元素的width属性值）、initial（恢复默认值auto） | 1. 固定宽度设置：.sidebar { width: 250px; background: #f5f5f5; }.logo { width: 120px; height: 60px; }2. 自适应宽度设置：.main-content { width: 100%; max-width: 1200px; margin: 0 auto; }3. 内容适配宽度：.tag { width: fit-content; padding: 3px 10px; margin: 0 5px 5px 0; background: #eee; border-radius: 15px; }4. 响应式宽度：.container { width: 90%; }@media (min-width: 768px) { .container { width: 80%; } }@media (min-width: 1200px) { .container { width: 70%; max-width: 1400px; } } | CSS尺寸控制核心属性，属于元素宽度定义类属性，用于指定元素在水平方向上的宽度尺寸，是控制页面布局结构的基础属性之一 | 1. 定义元素水平尺寸：固定或自适应元素的宽度，构建页面的基本布局框架（如侧边栏、主体内容区宽度）；2. 实现响应式布局：通过百分比、max-width配合媒体查询，适配不同屏幕尺寸的宽度需求；3. 内容适配排版：利用max-content、min-content、fit-content等关键字，让元素宽度自适应内容，提升排版灵活性；4. 控制元素对齐：固定宽度配合margin: 0 auto可实现水平居中，提升页面布局的规整性；5. 限制内容宽度：为长文本容器设置最大宽度，避免大屏下文本行过长影响阅读体验 | 1. 兼容性：基础取值（px、%、auto）全浏览器兼容；max-content、min-content、fit-content取值IE不支持，Chrome 46+、Firefox 46+等现代浏览器支持；2. 行内元素限制：inline行内元素设置width无效，需先转为block或inline-block模式；3. 百分比取值参考：百分比宽度基于父元素的**内容宽度**（不包含父元素的padding和border）计算；4. 盒模型影响：box-sizing属性会影响width的计算方式（content-box叠加padding/border，border-box包含padding/border）；5. 最佳实践：为自适应元素设置width: 100%时，建议同时设置max-width限制最大宽度，避免在超大屏幕下元素过宽；6. 特殊元素：img、video等替换元素的width默认基于原始尺寸，设置width后会按比例缩放（若未设置height） |
| will-change | 一、基础取值：1. auto：默认值，浏览器自动判断需要优化的属性，不做提前优化；2. 具体CSS属性名：指定即将发生变化的CSS属性（如will-change: transform; will-change: opacity;），多个属性用逗号分隔；3. contents：提示浏览器元素内容即将发生变化；4. scroll-position：提示浏览器元素的滚动位置即将发生变化；二、扩展取值：1. inherit：继承父元素的will-change属性值；2. initial：恢复默认值auto | 1. 动画属性优化：.animated-box { will-change: transform, opacity; transition: transform 0.3s, opacity 0.3s; }.animated-box:hover { transform: scale(1.1); opacity: 0.8; }2. 滚动位置优化：.scroll-container { will-change: scroll-position; height: 500px; overflow: auto; }3. 内容变化优化：.dynamic-content { will-change: contents; }.dynamic-content:hover { content: "变化后的内容"; }4. 多个属性优化：.complex-animation { will-change: transform, box-shadow, background-color; animation: complex 2s infinite; } | CSS性能优化核心属性，属于浏览器优化提示类属性，用于提前告知浏览器哪些CSS属性即将发生变化，让浏览器提前做好优化准备（如创建独立合成层），提升属性变化时的动画流畅度 | 1. 提升动画流畅度：提前告知浏览器即将变化的属性，让浏览器提前分配资源优化渲染，减少动画卡顿；2. 优化滚动性能：提示浏览器元素滚动位置即将变化，优化滚动时的渲染效率；3. 优化动态内容渲染：针对内容频繁变化的元素，提前提示浏览器做好优化，提升内容更新时的流畅度；4. 精准优化资源分配：仅针对即将变化的属性进行优化，避免浏览器无差别优化导致的资源浪费 | 1. 兼容性：IE不支持will-change；Chrome 36+、Firefox 36+、Safari 9.1+支持；2. 使用原则：仅对即将发生变化的属性使用，不要提前过早设置（如页面加载时就为所有元素设置），避免占用过多浏览器资源；属性变化结束后，建议移除will-change；3. 避免过度使用：不要同时为过多元素或过多属性设置will-change，否则会增加浏览器负担，反而降低性能；4. 推荐优化属性：优先对transform、opacity、box-shadow等会触发合成层的属性设置will-change，这些属性的优化效果最明显；5. 不支持的属性：不要对display、width、height等会触发重排的属性设置will-change，优化效果有限，且可能增加重排成本；6. 继承性：不具有继承性，子元素不会默认继承父元素的will-change规则；7. 替代方案：对于不支持will-change的浏览器，可通过transform: translateZ(0)等方式强制创建合成层，实现类似的优化效果（但需谨慎使用，避免过度创建合成层） |
| word-break | 一、基础取值（单词拆分换行规则）：1. normal：默认值，浏览器默认单词拆分规则（英文单词不拆分，中文汉字可拆分）；2. break-all：允许在任何字符之间拆分单词换行，无论是否为单词边界（主要用于英文）；3. keep-all：禁止拆分单词换行，英文单词不拆分，中文、日文、韩文等也不拆分（仅在空格或标点后换行）；4. break-word：已废弃，等价于overflow-wrap: break-word；二、扩展取值：1. inherit：继承父元素的word-break属性值；2. initial：恢复默认值normal；三、生效前提：作用于块级元素或行内块元素，用于解决长单词、长数字、长URL等无法换行的问题 | 1. 长URL强制换行：.break-url { width: 200px; word-break: break-all; /* 长URL任意字符间换行 */ }2. 禁止中文拆分：.keep-chinese { word-break: keep-all; /* 中文不拆分，仅在空格/标点后换行 */ }3. 长数字换行：.break-number { width: 150px; word-break: break-all; }4. 默认换行规则：.normal-break { width: 250px; word-break: normal; } | CSS文本排版核心属性，属于单词拆分控制类属性，用于定义文本在容器内无法完整显示时的单词拆分换行规则，主要解决长单词、长URL、长数字等导致的文本溢出问题，适配多语言排版 | 1. 解决文本溢出问题：强制长单词、长URL、长数字等拆分换行，避免文本超出容器边界；2. 控制中文拆分：根据需求允许或禁止中文汉字的拆分换行，优化中文文本排版；3. 适配窄容器场景：在侧边栏、卡片等窄容器中，确保文本正常显示，提升排版规整度；4. 统一多语言换行：为中英文混合文本设置统一的拆分规则，避免排版混乱 | 1. 兼容性：IE5.5+、所有现代浏览器均支持，兼容性极佳；2. 与overflow-wrap的区别：- word-break: break-all：优先在单词内部任意字符拆分，可能导致单词碎片化；- overflow-wrap: break-word：优先在单词边界换行，无法换行时才在单词内部拆分，更保留单词完整性；3. 中文场景建议：中文文本建议使用默认值normal，或根据需求使用keep-all；避免使用break-all，可能导致中文拆分过细影响阅读；4. 废弃取值：break-word已废弃，建议使用overflow-wrap: break-word替代；5. 继承性：具有继承性；6. 注意事项：break-all慎用，仅适用于长URL、长数字等特殊场景；中英文混合文本建议结合overflow-wrap: break-word使用，兼顾排版效果和溢出问题 |
| writing-mode | 一、基础取值（文本书写方向）：1. horizontal-tb：默认值，水平书写，文字从左到右，行从上到下；2. vertical-rl：垂直书写，文字从右到左，行从上到下（适用于中文竖排）；3. vertical-lr：垂直书写，文字从左到右，行从上到下；4. sideways-rl：垂直书写，文字横向排列（从右到左旋转90度）；5. sideways-lr：垂直书写，文字横向排列（从左到右旋转90度）；二、扩展取值：1. inherit：继承父元素的writing-mode属性值；2. initial：恢复默认值horizontal-tb；三、适用场景：多语言排版（如中文竖排、日文竖排）、特殊布局设计 | 1. 中文竖排文本：.vertical-text { writing-mode: vertical-rl; font-size: 20px; line-height: 1.8; padding: 10px; }2. 竖排导航栏：.vertical-nav { writing-mode: vertical-lr; background: #f8f9fa; padding: 15px 5px; }.vertical-nav a { display: block; margin: 10px 0; }3. 混合排版：.article { writing-mode: horizontal-tb; }.article .vertical-quote { writing-mode: vertical-rl; float: right; margin: 0 0 10px 10px; }4. 横向旋转竖排：.sideways-text { writing-mode: sideways-rl; font-size: 16px; } | CSS文本排版核心属性，属于书写方向控制类属性，用于定义文本的书写方向和行排列方向，支持水平书写和垂直书写，适配多语言排版需求（如中文竖排、日文竖排）和特殊视觉设计 | 1. 适配多语言排版：支持中文、日文等语言的竖排需求，符合传统排版习惯；2. 实现特殊布局：打造竖排导航、竖排引用等独特布局，提升页面设计感；3. 灵活控制文本流向：根据页面设计需求，自由切换水平/垂直书写方向，丰富排版形式；4. 保证排版一致性：统一页面中不同区域的书写方向，提升排版规范性 | 1. 兼容性：IE9+支持部分取值（horizontal-tb、vertical-rl、vertical-lr），IE11+支持完整取值；现代浏览器全兼容，部分旧浏览器需添加-ms-、-webkit-前缀；2. 影响范围：writing-mode会影响文本方向、行排列方向，同时会影响width/height的作用（垂直书写时，width实际控制行高，height控制文本长度）；3. 与text-orientation配合：垂直书写时，可通过text-orientation控制文字的朝向（如upright：文字不旋转，mixed：默认旋转）；4. 继承性：具有继承性；5. 布局注意：垂直书写时，元素的margin、padding方向会跟随书写方向变化，需注意布局调整；6. 适用场景：传统文书排版、文化类网站、特殊设计需求的页面；普通网页建议使用默认的horizontal-tb |
| z-index | 一、基础取值：1. 整数：正整数、负整数、0（默认值），数值越大，元素堆叠层级越高，越优先显示；2. 关键字：- auto：默认值，元素的堆叠层级与父元素相同；- inherit：继承父元素的z-index属性值；- initial：恢复默认值auto；二、特殊说明：z-index仅对已定位元素（position: relative/absolute/fixed/sticky）生效 | 1. 基础层级控制：.modal { position: absolute; z-index: 999; width: 400px; height: 300px; background: #fff; }.mask { position: absolute; z-index: 998; width: 100%; height: 100%; background: rgba(0,0,0,0.5); }2. 导航栏层级：.header-nav { position: fixed; top: 0; left: 0; width: 100%; z-index: 9999; }3. 负层级设置：.watermark { position: absolute; z-index: -1; color: rgba(0,0,0,0.1); font-size: 50px; }4. 子元素层级：.parent { position: relative; z-index: 10; }.child1 { position: absolute; z-index: 2; }.child2 { position: absolute; z-index: 3; } /* child2在child1上方 */ | CSS定位体系核心属性，属于元素堆叠层级控制类属性，用于定义已定位元素在垂直于页面方向（z轴）的堆叠顺序，解决元素重叠时的显示优先级问题 | 1. 控制元素重叠显示：当元素发生重叠时，通过z-index设置显示优先级，确保关键元素（如弹窗、导航）优先显示；2. 构建层级布局：配合定位属性，构建弹窗+遮罩、导航栏+内容区等多层级布局；3. 实现水印效果：通过负z-index将水印元素置于内容下方，不影响正常内容交互；4. 精准控制子元素层级：在父元素层级范围内，调整子元素的z-index，实现子元素间的层级排序 | 1. 兼容性：全浏览器兼容，无版本限制；2. 生效条件：仅对position属性为relative、absolute、fixed、sticky的元素生效，静态定位（static）元素设置z-index无效；3. 堆叠上下文：z-index的层级比较仅在同一堆叠上下文中有效；父元素的堆叠上下文会限制子元素的层级范围，子元素z-index再大也无法超出父元素的堆叠层级；4. 默认层级：未设置z-index的已定位元素，堆叠层级由其在DOM中的位置决定，后渲染的元素层级高于先渲染的元素；5. 数值范围：z-index无严格的数值上限，但不建议使用过大数值（如999999），避免后续层级调整困难；建议按功能模块划分数值区间（如导航9999、弹窗999、遮罩998）；6. 性能影响：过多复杂的堆叠层级可能增加浏览器的合成层计算压力，影响页面性能 |
...全文
请发表友善的回复…
发表回复
