01 css基础

CSS（层叠样式表，Cascading Style Sheets）是用于描述标记语言（如HTML）编写的文档的样式，布局和外观的语言。以下是CSS的一些基础知识点：

1. **选择器（Selectors）**：用于选择HTML元素以应用样式。例如：
   - 元素选择器：`p` 选择所有的`<p>`元素。
   - 类选择器：`.my-class` 选择所有具有`class="my-class"`属性的元素。
   - ID选择器：`#my-id` 选择具有`id="my-id"`属性的元素。

2. **属性（Properties）**：定义了选择器的样式特征，如颜色、大小、间距等。例如：
   - `color`：设置文本颜色。
   - `background-color`：设置背景颜色。
   - `font-size`：设置字体大小。
   - `margin`：设置外边距。
   - `padding`：设置内边距。

3. **值（Values）**：属性可以取的值，可以是颜色、长度、百分比等。

4. **继承（Inheritance）**：某些CSS属性会从父元素继承到子元素，如`color`和`font-size`。

5. **层叠（Cascading）**：当多个规则应用于同一个元素时，它们会根据特定的层叠规则来决定最终的样式。

6. **优先级（Specificity）**：当多个样式规则冲突时，具有更高优先级的规则将被应用。ID选择器具有最高优先级，其次是类选择器，最后是元素选择器。

7. **媒体查询（Media Queries）**：允许你根据不同的媒体类型和特性（如屏幕大小）应用不同的样式。

8. **盒模型（Box Model）**：每个元素可以看作一个盒子，包括内容（content）、内边距（padding）、边框（border）和外边距（margin）。

9. **布局（Layout）**：CSS提供了多种布局方式，如浮动（floats）、定位（positioning）、弹性盒子（flexbox）和网格（grid）。

10. **伪类（Pseudo-classes）**：用于根据特定状态选择元素，如`:hover`、`:active`、`:focus`等。

11. **伪元素（Pseudo-elements）**：用于添加特殊效果到元素的特定部分，如`::before`和`::after`。

12. **CSS3**：CSS的最新版本，引入了圆角（`border-radius`）、阴影（`box-shadow`）、渐变（`linear-gradient`）、转换（`transform`）和动画（`animation`）等新特性。