**CSS（层叠样式表）Cheatsheet**
CSS（Cascading Style Sheets）是一种样式表语言，用于描述HTML或XML（包括SVG、MathML等各种XML方言）文档的呈现。它是Web设计的重要工具，允许我们将样式与结构分离，使得网页内容更易维护和布局。
以下是一些常用CSS属性的速记：
1. **选择器**: CSS中的选择器用于定位文档中的元素，如`#id`（ID选择器），`.class`（类选择器），`tag`（标签选择器），以及`*`（通配符选择器）。
2. **盒模型**: CSS盒模型包括`margin`（外边距）、`border`（边框）、`padding`（内边距）和`content`（内容）区域。`box-sizing`属性可以设置为`border-box`或`content-box`，以控制元素的总宽度和高度是否包含边框和内边距。
3. **布局属性**: `display`控制元素的布局方式，如`block`（块级元素），`inline`（行内元素），`flex`（弹性布局），和`grid`（网格布局）。`position`属性定义元素的位置，可选值有`static`（默认），`relative`，`absolute`，`fixed`。
4. **颜色和背景**: 使用`color`属性改变文本颜色，`background-color`设定背景色，`background-image`设置背景图像，`background-repeat`，`background-position`和`background-size`分别控制背景图像的重复、位置和大小。
5. **文本属性**: `font-family`指定字体，`font-size`设定字体大小，`line-height`控制行高，`text-align`对齐文本，`text-decoration`（下划线、删除线等），`text-transform`（转换文本大小写）。
6. **尺寸属性**: `width`和`height`设置元素的宽和高，`max-width`和`max-height`限制最大尺寸，`min-width`和`min-height`设定最小尺寸。
7. **边框和边距**: `border-radius`用于创建圆角，`border-style`定义边框样式（实线、虚线等），`border-width`设置边框宽度，`border-color`定义边框颜色。
8. **过渡和动画**: `transition`允许元素在不同状态之间平滑过渡，`animation`定义复杂的动画效果，`@keyframes`规则定义动画过程。
9. **响应式设计**: `media queries`用于创建响应式布局，根据设备特性应用不同的CSS。
10. **Flexbox**: 弹性盒布局模型提供了一种更灵活的方式来布局元素，主要属性包括`flex-direction`（主轴方向），`justify-content`（主轴对齐），`align-items`（交叉轴对齐），以及`flex-wrap`（是否换行）。
11. **Grid布局**: CSS Grid提供了二维布局系统，主要属性有`grid-template-columns`和`grid-template-rows`定义网格轨道，`grid-gap`设置网格间距，`grid-auto-flow`控制自动放置的顺序。
这些是CSS Cheatsheet中的一些核心概念，掌握它们能帮助Web设计师高效地实现页面样式。通过熟练运用这些属性，你可以创造出美观且功能强大的网页设计。
