1. 盒子模型
CSS盒子模型定义了如何计算元素的大小和位置。 内容区域：元素的实际内容。 内边距（padding）：围绕内容区域的空白。 边框（border）：围绕内边距和内容区域的线条。 外边距（margin）：围绕边框的空白。
2. 选择器
CSS选择器用于选择页面上的元素。
标签选择器：
选择所有具有特定标签的元素。h1 { font-size: 24px; }
类选择器：
选择具有特定类的元素。.classname { color: red; }
ID选择器：
选择具有特定ID的元素。#idname { font-weight: bold; }
属性选择器：
选择具有特定属性的元素。[attribute="value"] { background-color: yellow; }
后代选择器：
选择一个元素的后代元素。div p { color: blue; }
子元素选择器：
选择一个元素的直接子元素。div > p { color: green; }
相邻兄弟选择器：
选择紧邻一个元素的兄弟元素。div + p { color: purple; }
通用兄弟选择器：
选择一个元素的所有兄弟元素。div ~ p { color: orange; }
3. 布局
浮动（Float）： 将元素从常规文档流中移出，并使其向左或向右移动，直到其外边缘遇到包含框或另一个浮动元素。 定位（Positioning）： 使用position属性来控制元素的位置。
static：默认值，元素在常规文档流中定位。 relative：相对于其正常位置定位。 absolute：相对于最近的非static定位祖先元素定位。 fixed：相对于浏览器窗口定位。 sticky：当元素滚动到特定位置时，它会被“粘”到视口中。 flexbox：一个现代的布局模式，可以轻松地创建响应式布局。 grid：另一个现代布局模式，提供了一种强大的方法来布局和格式化元素。
4. 视觉效果
CSS可以用于创建各种视觉效果：
变换（Transforms）：旋转、缩放、倾斜、移动元素。
过渡（Transitions）：为元素属性值的变化添加效果。
动画（Animations）：创建平滑的动画效果。
渐变（Gradients）：创建从一种颜色平滑过渡到另一种颜色的效果。
阴影（Shadows）：为元素添加阴影效果。
5. 文字样式
CSS可以控制文字的大小、颜色、字体、对齐方式等：
字体系列（Font Family）：定义文本的字体。
字体大小（Font Size）：定义文本的大小。
字体样式（Font Style）：定义文本的斜体、倾斜或正常样式。
字体粗细（Font Weight）：定义文本的粗细。
行高（Line Height）：定义文本行之间的垂直间距。
文字对齐（Text Align）：定义文本的水平对齐方式。
6. 背景和边框
CSS可以控制元素的背景和边框样式： 背景颜色（Background Color）：定义元素的背景颜色。 背景图片（Background Image）：定义元素的背景图片。 边框样式（Border Style）：定义元素的边框样式。 边框宽度（Border Width）：定义元素的边
