1. 布局相关
display：定义元素的显示类型。
block：元素呈块级显示，占据整行。inline：元素呈行内显示，占据内容空间，不会换行。inline-block：结合 inline 和 block 特性，允许元素在同一行中显示，但又能设置宽高。flex：启用弹性布局，使子元素能够在容器内灵活分配空间。grid：启用网格布局，按行列排列子元素。none：元素不显示，占用空间为 0。 position：定义元素的定位类型。
static：默认定位方式，元素按文档流排布。relative：相对定位，相对于其正常位置偏移。absolute：绝对定位，相对于最近的已定位父元素（非 static）定位。fixed：固定定位，相对于视口定位，滚动页面时元素位置不变。sticky：粘性定位，元素在滚动时会保持在屏幕上，直到达到某个阈值。 top, right, bottom, left：设置元素的位置偏移，通常与 position 属性配合使用。
例如：top: 10px; 将元素向下偏移 10px。 flex：设置弹性项目的伸缩能力。
flex-grow：定义项目如何伸展，占据剩余空间。flex-shrink：定义项目如何收缩。flex-basis：定义项目的初始主轴尺寸。justify-content：主轴对齐方式，控制项目在主轴（横向）上的对齐。
常见值：flex-start、flex-end、center、space-between、space-around。align-items：交叉轴对齐方式，控制项目在交叉轴（纵向）上的对齐。
常见值：flex-start、flex-end、center、stretch。flex-direction：定义弹性布局的主轴方向。
常见值：row、column、row-reverse、column-reverse。flex-wrap：定义弹性项目是否换行。
常见值：nowrap（不换行）、wrap（换行）。 grid：设置网格布局。
grid-template-columns：定义列的宽度。grid-template-rows：定义行的高度。grid-gap：设置行与列之间的间隙。grid-template-areas：通过命名区域定义网格布局。justify-items：控制网格项目在行轴上的对齐。align-items：控制网格项目在列轴上的对齐。
2. 盒模型相关
width, height：设置元素的宽度和高度，单位可以是 px, %, vw, vh, em 等。
padding：设置元素的内边距。
padding-top、padding-right、padding-bottom、padding-left：分别设置元素的上、右、下、左内边距。 border：设置元素的边框。
border-width：设置边框宽度。border-style：设置边框样式（如：solid实线、dashed虚线、dotted点）。border-color：设置边框颜色。 margin：设置元素的外边距。
margin-top、margin-right、margin-bottom、margin-left：分别设置元素的上、右、下、左外边距。 box-sizing：设置宽高是否包括内边距和边框。
content-box：宽高只包括内容区域，不包括内边距和边框。border-box：宽高包括内边距和边框。
3. 文本和字体相关
font-family：设置字体类型。
示例：font-family: "Arial", sans-serif; font-size：设置字体大小。
示例：font-size: 16px; font-weight：设置字体粗细。
常见值：normal（正常）、bold（粗体）、lighter（更细）。 font-style：设置字体样式。
常见值：normal（普通）、italic（斜体）、oblique（倾斜）。 line-height：设置行高，影响文本的行间距。
示例：line-height: 1.5; text-align：设置文本的水平对齐方式。
常见值：left、right、center、justify。 text-decoration：设置文本装饰（如下划线）。
常见值：underline（下划线）、line-through（在文字中间加横线）、none。 text-transform：设置文本大小写转换。
常见值：uppercase（大写）、lowercase（小写）、capitalize（首字母大写）。 letter-spacing：设置字符间距。
示例：letter-spacing: 2px; word-spacing：设置单词间距。
示例：word-spacing: 4px; white-space：控制文本是否换行。
常见值：normal、nowrap、pre、pre-wrap。
4. 背景相关
background-color：设置元素的背景颜色。
示例：background-color: #f0f0f0; background-image：设置元素的背景图片。
示例：background-image: url('image.jpg'); background-position：设置背景图片的位置。
示例：background-position: center center; background-size：设置背景图片的大小。
常见值：cover、contain、auto。 background-repeat：设置背景图片的重复方式。
常见值：repeat、no-repeat、repeat-x、repeat-y。 background-attachment：设置背景图片的滚动行为。
常见值：scroll、fixed、local。
5. 颜色和透明度相关
color：设置文本颜色。
示例：color: red; opacity：设置元素的透明度，值在 0 到 1 之间。
示例：opacity: 0.5;
6. 边框相关
border-radius：设置元素的圆角。
示例：border-radius: 10px; border-width：设置边框宽度。
示例：border-width: 2px; border-style：设置边框样式。
常见值：solid、dashed、dotted。 border-color：设置边框颜色。
示例：border-color: #333; border-left, border-right, border-top, border-bottom：分别设置四个边的宽度、样式和颜色。
7. 过渡与动画相关
transition：设置过渡效果，控制元素的过渡行为。
示例：transition: all 0.3s ease;（解释：变化不会立刻完成，而是会在 0.3 秒内完成一个平滑的过渡） animation：设置动画效果，允许元素在多个关键帧之间切换状态。
示例：animation: fadeIn 2s ease-in-out;（解释：让元素在 2秒内 以 淡入（从透明到完全不透明） 的方式出现，并且动画的速度是 缓入缓出（ease-in-out） 的）
8. 可视化和浮动相关
visibility：控制元素是否可见。
常见值：visible（可见）、hidden（不可见）、collapse（隐藏并不占空间）。 z-index：设置元素的层叠顺序，控制元素在堆叠上下文中的位置。
示例：z-index: 10;（数字越大，层级越高） overflow：设置元素的溢出行为。
常见值：visible（默认可见）、hidden（隐藏）、scroll（有滚动条）、auto。 float：设置元素的浮动方式。（用的少）
常见值：left、right、none。 clear：控制元素是否绕过浮动元素。
常见值：left、right、both、none。
9. 定位和层叠相关
top, right, bottom, left：用于绝对定位、固定定位或相对定位时，设置元素的偏移。z-index：控制重叠元素的显示顺序，值越大越在上面。
10. 响应式布局相关
@media：用于定义响应式设计，依据屏幕宽度或其他条件应用不同的样式。
例如：@media (max-width: 768px) { ... }。