diff --git "a/\345\217\266\345\255\220\350\241\241/20241014-CSS\351\200\211\346\213\251\345\231\250\357\274\232\344\274\252\347\261\273.md" "b/\345\217\266\345\255\220\350\241\241/20241014-CSS\351\200\211\346\213\251\345\231\250\357\274\232\344\274\252\347\261\273.md"
new file mode 100644
index 0000000000000000000000000000000000000000..ff2a51e514be9476ab043aa467b183d4548c9bae
--- /dev/null
+++ "b/\345\217\266\345\255\220\350\241\241/20241014-CSS\351\200\211\346\213\251\345\231\250\357\274\232\344\274\252\347\261\273.md"
@@ -0,0 +1,194 @@
+# CSS 选择器：伪类
+
+## 伪类选择器概述
+
+伪类选择器是用于选择处于特定状态的元素的CSS选择器。它们使我们能够为元素在不同状态下（例如被点击、鼠标悬停等）应用不同的样式。伪类通过冒号（:）表示。
+
+## 伪类类型
+
+伪类选择器分为两种：
+
+1. **静态伪类**：主要用于超链接（<a>标签）。
+   - `:link`：表示链接未被访问的状态。
+   - `:visited`：表示链接已被访问的状态。
+2. **动态伪类**：适用于所有HTML元素。
+   - `:hover`：鼠标悬停在元素上时应用的样式。
+   - `:active`：鼠标点击元素但未松开时的样式。
+   - `:focus`：元素获得焦点时的样式，通常用于输入框等可交互元素。
+
+## 超链接的状态
+
+<a>标签有四种伪类状态，具体如下：
+
+- `:link`：表示链接未被访问。
+- `:visited`：表示链接已被访问。
+- `:hover`：鼠标悬停在链接上时的样式。
+- `:active`：鼠标点击链接但未松开时的样式。
+
+## 示例代码
+
+以下是一个简单的CSS示例，展示如何使用伪类为超链接定义不同的样式：
+
+```css
+/* 超链接样式定义 */
+a:link {
+    color: red; /* 未访问链接为红色 */
+}
+a:visited {
+    color: orange; /* 已访问链接为橙色 */
+}
+a:hover {
+    color: green; /* 鼠标悬停时链接为绿色 */
+}
+a:active {
+    color: black; /* 鼠标点击时链接为黑色 */
+}
+```
+
+## 伪类的顺序
+
+在CSS中，这四种状态的伪类必须按照固定的顺序书写，具体为：
+
+`a:link, a:visited, a:hover, a:active`
+
+如果不按照上述顺序书写，某些样式可能会失效。这种规则被称为“爱恨准则”。
+
+## 超链接美化示例
+
+下面的代码展示了如何通过CSS为导航栏中的超链接添加样式，使其在不同状态下表现出不同的样式：
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>超链接样式示例</title>
+    <style type="text/css">
+        * {
+            margin: 0;
+            padding: 0;
+        }
+        .nav {
+            width: 960px;
+            height: 50px;
+            border: 1px solid red;
+            margin: 100px auto;
+        }
+        .nav ul {
+            list-style: none; /* 去掉默认的小圆点 */
+        }
+        .nav ul li {
+            float: left; /* 让列表项水平排列 */
+            width: 120px;
+            height: 50px;
+            text-align: center; /* 内容水平居中 */
+            line-height: 50px; /* 行高等于nav的高度，确保内容垂直居中 */
+        }
+        .nav ul li a {
+            display: block; /* 让链接占据整个列表项 */
+            width: 120px;
+            height: 50px;
+        }
+        /* 超链接的默认样式和访问样式 */
+        .nav ul li a:link, .nav ul li a:visited {
+            text-decoration: none; /* 去掉下划线 */
+            background-color: purple; /* 背景色为紫色 */
+            color: white; /* 文字颜色为白色 */
+        }
+        .nav ul li a:hover {
+            background-color: orange; /* 鼠标悬停时背景色为橙色 */
+        }
+    </style>
+</head>
+<body>
+    <div class="nav">
+        <ul>
+            <li><a href="#">栏目1</a></li>
+            <li><a href="#">栏目2</a></li>
+            <li><a href="#">栏目3</a></li>
+            <li><a href="#">栏目4</a></li>
+        </ul>
+    </div>
+</body>
+</html>
+```
+
+## 动态伪类示例
+
+动态伪类适用于各种HTML元素，不仅限于链接。以下是三个常见的动态伪类及其应用示例：
+
+- `:hover`：当鼠标悬停在元素上时应用的样式。
+- `:active`：当元素被点击但未松开时的样式。
+- `:focus`：当元素获得焦点时的样式，通常用于表单元素。
+
+## 输入框和标签的示例
+
+下面的代码展示了如何为输入框和标签应用动态伪类：
+
+```css
+/* 输入框获得焦点时的样式 */
+input:focus {
+    border: 3px solid #FF6F3D; /* 边框颜色 */
+    color: white; /* 文字颜色 */
+    background-color: #6a6a6a; /* 背景色 */
+}
+
+/* 标签悬停时的颜色 */
+label:hover {
+    color: blue; /* 悬停时标签文字颜色 */
+}
+
+/* 标签被激活时的颜色 */
+label:active {
+    color: red; /* 激活时标签文字颜色 */
+}
+```
+
+## 表格的鼠标悬停效果示例
+
+我们可以使用:hover伪类为表格的行添加悬停效果，以提升用户的交互体验：
+
+```html
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>表格样式示例</title>
+    <style type="text/css">
+        /* 整个表格的样式 */
+        table {
+            width: 300px;
+            height: 200px;
+            border: 1px solid blue; /* 表格边框 */
+            border-collapse: collapse; /* 折叠边框 */
+        }
+
+        /* 鼠标悬停时，当前行的背景色 */
+        table tr:hover {
+            background: #868686; /* 悬停时背景颜色 */
+        }
+
+        /* 每个单元格的样式 */
+        table td {
+            border: 1px solid red; /* 单元格边框 */
+        }
+    </style>
+</head>
+<body>
+    <table>
+        <tr>
+            <td>单元格1</td>
+            <td>单元格2</td>
+            <td>单元格3</td>
+            <td>单元格4</td>
+        </tr>
+        <tr>
+            <td>单元格5</td>
+            <td>单元格6</td>
+            <td>单元格7</td>
+            <td>单元格8</td>
+        </tr>
+    </table>
+</body>
+</html>
+```
\ No newline at end of file
diff --git "a/\345\217\266\345\255\220\350\241\241/20241016-CSS\346\240\267\345\274\217\350\241\250\347\232\204\347\273\247\346\211\277\346\200\247\345\222\214\345\261\202\345\217\240\346\200\247.md" "b/\345\217\266\345\255\220\350\241\241/20241016-CSS\346\240\267\345\274\217\350\241\250\347\232\204\347\273\247\346\211\277\346\200\247\345\222\214\345\261\202\345\217\240\346\200\247.md"
new file mode 100644
index 0000000000000000000000000000000000000000..9bc581ecd36cf74a17457deccdf1e9fc35507358
--- /dev/null
+++ "b/\345\217\266\345\255\220\350\241\241/20241016-CSS\346\240\267\345\274\217\350\241\250\347\232\204\347\273\247\346\211\277\346\200\247\345\222\214\345\261\202\345\217\240\346\200\247.md"
@@ -0,0 +1,205 @@
+# CSS 样式表的继承性和层叠性
+
+## 1. CSS 继承性
+
+### 1.1 什么是继承性？
+
+继承性是指在HTML的文档树中，子元素自动接收父元素的一部分样式属性。例如，如果一个`<div>`定义了字体颜色，那么它内部的所有元素都可以继承到这个颜色。
+
+继承主要适用于那些与文本内容相关的属性，但对于其他类型的属性（如布局、边框、背景等），继承通常不会自动发生。
+
+### 1.2 可继承的属性
+
+以下是常见的可继承属性，它们多与文字和视觉效果相关：
+
+- **`color`**：定义文本的颜色。子元素会自动继承父元素的文字颜色。
+- **`font-family`**：定义字体类型。如果父元素指定了字体，子元素会使用同样的字体。
+- **`font-size`**：定义文字大小，通常通过继承使得网页的字体保持一致。
+- **`line-height`**：设置行高，即行间距，影响段落文字的阅读性。
+- **`visibility`**：控制元素是否可见，通常继承此属性可以隐藏整个元素树。
+- **`text-align`**：设置文本对齐方式（如左对齐、右对齐或居中）。
+
+#### 示例
+
+以下代码展示了继承性的基本用法：
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>继承性示例</title>
+  <style>
+    body {
+      color: red; /* 所有子元素的文本颜色都将继承红色 */
+      font-family: Arial, sans-serif; /* 所有子元素将使用Arial字体 */
+    }
+    p {
+      font-size: 16px; /* 设置段落文字大小为16px */
+    }
+  </style>
+</head>
+<body>
+  <h1>这是标题</h1> <!-- 标题的文本颜色继承自body -->
+  <p>这是段落文本。</p> <!-- 段落继承了颜色和字体，但自定义了字体大小 -->
+</body>
+</html>
+```
+
+在这个例子中：
+- `h1` 和 `p` 都继承了 `body` 元素的文字颜色为红色和字体为Arial。
+- `p` 元素自定义了自己的 `font-size`，因此段落文字大小为16px，而`h1`没有设置大小，因此它的字体大小取决于浏览器的默认值或其他样式。
+
+### 1.3 不可继承的属性
+
+一些样式属性不会自动从父元素传递到子元素。这些属性大多与布局、边框、背景等页面结构相关，主要包括：
+
+- **`background-color`**：背景颜色。
+- **`border`**：边框样式。
+- **`margin`**：外边距。
+- **`padding`**：内边距。
+- **`width`** 和 **`height`**：尺寸属性。
+
+如果这些属性没有被明确设置，子元素将使用浏览器的默认值，而不是继承父元素的值。
+
+#### 示例
+
+```html
+<div style="background-color: blue; padding: 20px;">
+  <p>这个段落不会继承div的背景颜色。</p>
+</div>
+```
+
+在这个例子中，尽管`<div>`定义了背景颜色为蓝色，但段落`<p>`元素不会继承背景颜色。
+
+### 1.4 强制继承
+
+有时我们可能希望子元素继承某些不可继承的属性。为了实现这一点，可以使用CSS的`inherit`关键字，明确要求子元素继承父元素的某个属性。
+
+#### 示例
+
+```css
+div {
+  background-color: inherit; /* 强制继承父元素的背景颜色 */
+}
+```
+
+通过使用`inherit`，我们可以强制子元素继承某些属性，而不是使用默认值。
+
+---
+
+## 2. CSS 层叠性（Cascade）
+
+### 2.1 什么是层叠性？
+
+CSS中的"层叠性"（Cascade）指的是当一个元素同时匹配多个CSS规则时，浏览器需要决定优先应用哪一条规则。CSS的设计初衷是为开发者提供灵活性，因此同一个元素可能会有多个样式规则来自不同的地方。
+
+浏览器通过一套规则来确定最终生效的样式，这些规则包括：**样式的来源、重要性**（`!important`）、**优先级**（specificity）和**顺序**。
+
+### 2.2 样式来源
+
+在浏览器中，样式可以从三种来源获得：
+
+1. **浏览器默认样式**：浏览器会为所有未定义样式的元素提供默认的基础样式。
+2. **外部样式表**：开发者编写的CSS文件，链接到HTML文档中。
+3. **用户定义样式**：用户可以通过浏览器设置或插件自定义一些样式。
+
+浏览器会根据这些来源的优先级来决定应用哪一组样式。
+
+### 2.3 优先级（Specificity）
+
+优先级决定了当同一个元素有多个规则时，哪一条规则将被应用。不同的CSS选择器有不同的优先级，优先级越高的规则会覆盖优先级低的规则。
+
+- **行内样式**：最高优先级，直接在HTML元素中定义的样式。
+- **ID选择器**：优先级较高的选择器，通常用于标识页面中的唯一元素。
+- **类选择器、伪类选择器**：用于应用于多个元素的选择器。
+- **标签选择器**：用于匹配特定HTML标签，如`div`、`p`、`h1`等。
+
+### 2.4 优先级计算
+
+CSS优先级可以通过数值系统来理解，每个选择器类型都有固定的优先级值：
+
+- **标签选择器**：`0, 0, 0, 1`
+- **类选择器、伪类选择器**：`0, 0, 1, 0`
+- **ID选择器**：`0, 1, 0, 0`
+- **行内样式**：`1, 0, 0, 0`
+
+当元素匹配多个规则时，浏览器会根据优先级值的大小来决定应用哪一个规则。
+
+#### 示例
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>层叠性示例</title>
+  <style>
+    p {
+      color: blue; /* 标签选择器 */
+    }
+    .highlight {
+      color: green; /* 类选择器 */
+    }
+    #important {
+      color: red; /* ID选择器，优先级最高 */
+    }
+  </style>
+</head>
+<body>
+  <p id="important" class="highlight">这个文本会显示为红色。</p>
+</body>
+</html>
+```
+
+- 由于ID选择器`#important`的优先级最高，文本颜色将会被应用为红色，尽管`p`和`class="highlight"`也定义了颜色样式。
+
+### 2.5 使用 `!important`
+
+`!important` 是一种用来强制某个样式优先应用的声明。即使在层叠性和优先级计算中某个规则具有较低的优先权，只要加上`!important`，这条规则就会强制生效。
+
+```css
+p {
+  color: blue !important; /* 强制将段落颜色设为蓝色 */
+}
+```
+
+- 无论其他选择器或优先级如何，`p`元素的文字颜色都会是蓝色。
+
+---
+
+## 3. 继承性和层叠性的结合使用
+
+继承性和层叠性是CSS中两个紧密相关的概念。继承性允许样式在元素树中传递，而层叠性解决了当多个规则冲突时的优先级问题。在实际开发中，继承和层叠往往会一起工作，以决定网页的最终样式。
+
+#### 示例
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>继承与层叠结合示例</title>
+  <style>
+    body {
+      color: gray; /* 默认文字颜色为灰色 */
+    }
+    p {
+      color: blue; /* 覆盖body的颜色 */
+      font-size: 18
+
+px;
+    }
+    #highlight {
+      color: green; /* 优先于p元素的规则 */
+    }
+  </style>
+</head>
+<body>
+  <p id="highlight">这是绿色的文本。</p> <!-- ID选择器优先应用，显示为绿色 -->
+  <p>这是蓝色的文本。</p> <!-- 继承body属性，但自定义了蓝色 -->
+</body>
+</html>
+```
+
+在这个例子中，`#highlight`段落使用了绿色的文字颜色，因为ID选择器的优先级最高。而其他段落继承了蓝色，并且覆盖了`body`中的灰色。
diff --git "a/\345\217\266\345\255\220\350\241\241/20241016-CSS\347\233\222\346\250\241\345\236\213\350\257\246\350\247\243.md" "b/\345\217\266\345\255\220\350\241\241/20241016-CSS\347\233\222\346\250\241\345\236\213\350\257\246\350\247\243.md"
new file mode 100644
index 0000000000000000000000000000000000000000..3d6eec4ea6f881f606b458d31b461a6310f1673f
--- /dev/null
+++ "b/\345\217\266\345\255\220\350\241\241/20241016-CSS\347\233\222\346\250\241\345\236\213\350\257\246\350\247\243.md"
@@ -0,0 +1,149 @@
+# CSS 盒模型
+
+## 盒子模型的基本区域
+
+盒模型由四个主要区域组成：
+
+1. **内容区域**（Content）：元素的实际内容部分，如文本、图片等。
+2. **内边距**（Padding）：内容区域与边框之间的距离。内边距会扩展盒子的大小，但不会影响元素的外部边界。
+3. **边框**（Border）：围绕内容区域和内边距的边框。边框的厚度会影响盒子的总大小。
+4. **外边距**（Margin）：元素与周围其他元素的距离。外边距不会影响盒子的尺寸，但会影响布局中的元素之间的距离。
+
+## 代码演示
+
+盒子模型的代码示例：
+
+```css
+div {
+    width: 200px;
+    height: 200px;
+    padding: 50px;
+    border: 10px solid black;
+    margin: 30px;
+}
+```
+
+在这个示例中，虽然`width`和`height`设置为200px，但元素的总宽高将包括`padding`、`border`，因此盒子的实际宽高为320px（200 + 50*2 + 10*2）。
+
+## 标准盒模型与IE盒模型
+
+CSS中有两种盒模型：
+
+1. **标准盒模型**（W3C Box Model）：在标准盒模型中，`width`和`height`只指内容区域的宽高，不包括内边距和边框。
+2. **IE盒模型**：在IE盒模型中，`width`和`height`包含了内容区域、内边距和边框。
+
+## 设置盒模型模式
+
+通过CSS属性`box-sizing`可以指定使用哪种盒模型。通常使用`border-box`来使用IE盒模型，使用`content-box`来使用标准盒模型。示例：
+
+```css
+/* 标准盒模型 */
+element {
+    box-sizing: content-box;
+}
+
+/* IE盒模型 */
+element {
+    box-sizing: border-box;
+}
+```
+
+## `<body>` 标签的默认 `margin`
+
+默认情况下，`<body>`标签带有`8px`的外边距，这会导致页面内容并不完全贴合浏览器窗口的边缘。可以通过CSS来清除这个默认的外边距：
+
+```css
+body {
+    margin: 0;
+}
+```
+
+## 宽度与高度的计算
+
+在盒模型中，元素的总宽度和高度不仅仅是`width`和`height`的数值，还需要加上内边距和边框的厚度。实际总宽高的计算公式为：
+
+```text
+实际宽度 = width + 左内边距 + 右内边距 + 左边框 + 右边框
+实际高度 = height + 上内边距 + 下内边距 + 上边框 + 下边框
+```
+
+## Padding（内边距）
+
+内边距是内容区域与边框之间的空间，它会扩展元素的大小，但不会影响其他元素的布局。`padding`可以单独为四个方向指定，也可以通过综合属性同时设置。例子：
+
+```css
+/* 单独设置四个方向的padding */
+element {
+    padding-top: 20px;
+    padding-right: 15px;
+    padding-bottom: 10px;
+    padding-left: 5px;
+}
+
+/* 综合属性 */
+element {
+    padding: 20px 15px 10px 5px; /* 上右下左顺时针方向 */
+}
+```
+
+## Padding的计算顺序
+
+- 如果只设置一个值，四个方向都会应用该值。
+- 如果设置两个值，第一个值应用于上下，第二个值应用于左右。
+- 如果设置三个值，第一个值应用于上，第二个值应用于左右，第三个值应用于下。
+- 如果设置四个值，则分别应用于上、右、下、左。
+
+## Border（边框）
+
+边框是包裹内容区域和内边距的线框，可以指定宽度、样式和颜色。边框的基本语法如下：
+
+```css
+element {
+    border: 1px solid black;
+}
+```
+
+## 边框的拆分
+
+边框属性可以被拆分为三部分：
+
+- `border-width`：边框的宽度。
+- `border-style`：边框的样式，如`solid`（实线）、`dashed`（虚线）、`dotted`（点线）等。
+- `border-color`：边框的颜色。
+
+例子：
+
+```css
+element {
+    border-width: 2px;
+    border-style: dashed;
+    border-color: blue;
+}
+```
+
+也可以按方向分别设置：
+
+```css
+element {
+    border-top: 1px solid red;
+    border-right: 2px dashed green;
+    border-bottom: 3px dotted blue;
+    border-left: 4px double yellow;
+}
+```
+
+## Margin（外边距）
+
+外边距控制元素与周围其他元素之间的距离。与`padding`类似，`margin`也可以单独设置四个方向，或使用综合属性。例子：
+
+```css
+element {
+    margin: 10px 20px 30px 40px; /* 上右下左 */
+}
+```
+
+与`padding`相同，`margin`的设置规则也分为单值、双值、三值和四值模式。
+
+## 外边距的折叠
+
+当两个垂直相邻的块级元素都设置了外边距时，它们的外边距可能会折叠为一个较大的外边距。这个现象称为**外边距折叠**，通常只发生在块级元素的上下外边距之间。
diff --git "a/\345\217\266\345\255\220\350\241\241/20241017-\346\265\256\345\212\250.md" "b/\345\217\266\345\255\220\350\241\241/20241017-\346\265\256\345\212\250.md"
new file mode 100644
index 0000000000000000000000000000000000000000..6adcc197765a82dfa178f9a6f47e96559b10a1fd
--- /dev/null
+++ "b/\345\217\266\345\255\220\350\241\241/20241017-\346\265\256\345\212\250.md"
@@ -0,0 +1,101 @@
+# 浮动
+
+## 标准文档流
+
+### 标准文档流的特性
+
+**（1）空白折叠现象：**
+无论有多少空格、换行或tab符，最终都会折叠为一个空格。这意味着HTML中的空白符不会完全呈现出来。
+
+例如：
+```html
+<img src="images/0.jpg" /><img src="images/1.jpg" /><img src="images/2.jpg" />
+```
+上面的 `img` 标签之间没有空隙，因为它们在标准文档流中紧密相连。
+
+**（2）高矮不齐但底边对齐：**
+在标准文档流中，不同高度的元素其底边对齐，而不会根据高度不同影响其布局。
+
+**（3）自动换行：**
+当内容无法填满一行时，会自动换行继续排布。
+
+### 行内元素与块级元素
+
+在网页布局中，HTML元素根据其表现形式主要分为两类：
+
+- **行内元素（Inline Elements）：** 不会强制换行，与相邻的元素并排显示。常见的行内元素有 `span`、`a`、`b`、`i` 等。
+- **块级元素（Block Elements）：** 强制占据整行，不与其他元素并排。常见的块级元素有 `div`、`h1`、`p` 等。
+
+**区别：**
+
+- 行内元素：不能设置宽度和高度；其宽度由内容决定。
+- 块级元素：可以设置宽度和高度，默认占据父容器的100%宽度。
+
+### 行内元素和块级元素的相互转换
+
+使用CSS的 `display` 属性可以将行内元素与块级元素进行相互转换。
+
+#### 将块级元素转换为行内元素：
+```css
+display: inline;
+```
+
+#### 将行内元素转换为块级元素：
+```css
+display: block;
+```
+
+## 浮动的性质
+
+浮动（float）是让元素从标准文档流中脱离出来，向左或右浮动，并允许其他非浮动元素围绕它排布。
+
+### 浮动的影响
+
+浮动会影响后续的标准流元素。如果一个元素浮动，它的后续元素（在标准文档流中）会围绕它进行布局。
+
+#### 浮动元素的特点：
+- 浮动元素不占据标准文档流中的位置。
+- 浮动元素会紧贴容器边缘，或者紧挨前一个浮动元素。
+
+## 清除浮动
+
+清除浮动用于解决因为浮动元素导致父元素高度塌陷的问题。可以通过 `clear` 属性来清除浮动。
+
+#### 清除浮动的方式：
+- 使用 `clear: both;` 清除左右浮动，确保元素不会与前面的浮动元素并排。
+
+### 清除浮动的另一种方式
+
+除了使用 `clear: both;` 来直接清除浮动，现代CSS中还有一种常用的方法——通过伪元素来实现清除浮动。
+
+伪元素 `::after` 可以用于在父容器的最后插入一个不可见的块级元素，以此来清除浮动。
+
+#### 代码示例：
+
+```css
+.Main::after {
+    content: "";
+    clear: both;
+    display: block;
+}
+```
+
+#### 解释：
+- `content: "";`：伪元素的内容为空，实际上不会显示任何内容。
+- `clear: both;`：清除该元素前面所有的左右浮动，使父元素包裹住子元素。
+- `display: block;`：将伪元素设置为块级元素，确保它的清除浮动效果生效。
+
+这种方法常用于确保浮动元素不会影响父容器的高度。通过这种清除浮动的方式，父容器可以自动根据浮动子元素的高度进行调整，避免父元素高度塌陷问题。
+
+### 示例应用场景：
+
+当我们在布局中有多个浮动元素时，比如一个父容器包含多个浮动的子元素，使用这种方法能够有效解决浮动带来的布局问题，而无需手动在HTML中添加额外的清除浮动的标签。
+
+```html
+<div class="Main">
+    <div class="item" style="float: left;">左边浮动的内容</div>
+    <div class="item" style="float: right;">右边浮动的内容</div>
+</div>
+```
+
+此时，如果不清除浮动，父容器 `.Main` 的高度可能会因为子元素的浮动而塌陷。通过上面的 `::after` 方法， `.Main` 会自动包裹子元素的高度。
diff --git "a/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241012-\351\200\211\346\213\251\345\231\250\347\234\237\345\256\236\351\241\271\347\233\256/\351\200\211\346\213\251\345\231\250\347\234\237\345\256\236\351\241\271\347\233\256-1.html" "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241014-\351\200\211\346\213\251\345\231\250\347\234\237\345\256\236\351\241\271\347\233\256/\351\200\211\346\213\251\345\231\250\347\234\237\345\256\236\351\241\271\347\233\256-1.html"
similarity index 100%
rename from "\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241012-\351\200\211\346\213\251\345\231\250\347\234\237\345\256\236\351\241\271\347\233\256/\351\200\211\346\213\251\345\231\250\347\234\237\345\256\236\351\241\271\347\233\256-1.html"
rename to "\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241014-\351\200\211\346\213\251\345\231\250\347\234\237\345\256\236\351\241\271\347\233\256/\351\200\211\346\213\251\345\231\250\347\234\237\345\256\236\351\241\271\347\233\256-1.html"
diff --git "a/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241012-\351\200\211\346\213\251\345\231\250\347\234\237\345\256\236\351\241\271\347\233\256/\351\200\211\346\213\251\345\231\250\347\234\237\345\256\236\351\241\271\347\233\256-2.html" "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241014-\351\200\211\346\213\251\345\231\250\347\234\237\345\256\236\351\241\271\347\233\256/\351\200\211\346\213\251\345\231\250\347\234\237\345\256\236\351\241\271\347\233\256-2.html"
similarity index 89%
rename from "\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241012-\351\200\211\346\213\251\345\231\250\347\234\237\345\256\236\351\241\271\347\233\256/\351\200\211\346\213\251\345\231\250\347\234\237\345\256\236\351\241\271\347\233\256-2.html"
rename to "\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241014-\351\200\211\346\213\251\345\231\250\347\234\237\345\256\236\351\241\271\347\233\256/\351\200\211\346\213\251\345\231\250\347\234\237\345\256\236\351\241\271\347\233\256-2.html"
index ac6052b870bb81f66afa12217d39b87fd0767a91..62a0de78d2b7bf5984d875191c7b1b6ff645388f 100644
--- "a/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241012-\351\200\211\346\213\251\345\231\250\347\234\237\345\256\236\351\241\271\347\233\256/\351\200\211\346\213\251\345\231\250\347\234\237\345\256\236\351\241\271\347\233\256-2.html"
+++ "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241014-\351\200\211\346\213\251\345\231\250\347\234\237\345\256\236\351\241\271\347\233\256/\351\200\211\346\213\251\345\231\250\347\234\237\345\256\236\351\241\271\347\233\256-2.html"
@@ -7,7 +7,8 @@
     <title>Document</title>
     <style>
         input:focus[required] {
-            border-color: blue;
+            outline: none;
+            border: 2px solid blue;
         }
 
         input::placeholder {
diff --git "a/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241012-\351\200\211\346\213\251\345\231\250\347\234\237\345\256\236\351\241\271\347\233\256/\351\200\211\346\213\251\345\231\250\347\234\237\345\256\236\351\241\271\347\233\256-3.html" "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241014-\351\200\211\346\213\251\345\231\250\347\234\237\345\256\236\351\241\271\347\233\256/\351\200\211\346\213\251\345\231\250\347\234\237\345\256\236\351\241\271\347\233\256-3.html"
similarity index 100%
rename from "\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241012-\351\200\211\346\213\251\345\231\250\347\234\237\345\256\236\351\241\271\347\233\256/\351\200\211\346\213\251\345\231\250\347\234\237\345\256\236\351\241\271\347\233\256-3.html"
rename to "\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241014-\351\200\211\346\213\251\345\231\250\347\234\237\345\256\236\351\241\271\347\233\256/\351\200\211\346\213\251\345\231\250\347\234\237\345\256\236\351\241\271\347\233\256-3.html"
diff --git "a/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241012-\351\200\211\346\213\251\345\231\250\347\234\237\345\256\236\351\241\271\347\233\256/\351\200\211\346\213\251\345\231\250\347\234\237\345\256\236\351\241\271\347\233\256-4.html" "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241014-\351\200\211\346\213\251\345\231\250\347\234\237\345\256\236\351\241\271\347\233\256/\351\200\211\346\213\251\345\231\250\347\234\237\345\256\236\351\241\271\347\233\256-4.html"
similarity index 88%
rename from "\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241012-\351\200\211\346\213\251\345\231\250\347\234\237\345\256\236\351\241\271\347\233\256/\351\200\211\346\213\251\345\231\250\347\234\237\345\256\236\351\241\271\347\233\256-4.html"
rename to "\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241014-\351\200\211\346\213\251\345\231\250\347\234\237\345\256\236\351\241\271\347\233\256/\351\200\211\346\213\251\345\231\250\347\234\237\345\256\236\351\241\271\347\233\256-4.html"
index 2c3b46ae5772d2fc6a2042497b81a5e4297f070b..061366664834ccd4aaacab1f93f26bc0c30cb277 100644
--- "a/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241012-\351\200\211\346\213\251\345\231\250\347\234\237\345\256\236\351\241\271\347\233\256/\351\200\211\346\213\251\345\231\250\347\234\237\345\256\236\351\241\271\347\233\256-4.html"
+++ "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241014-\351\200\211\346\213\251\345\231\250\347\234\237\345\256\236\351\241\271\347\233\256/\351\200\211\346\213\251\345\231\250\347\234\237\345\256\236\351\241\271\347\233\256-4.html"
@@ -7,6 +7,8 @@
     <title>Document</title>
     <style>
         h2.special-title::first-letter {
+            font-size: 2em;
+            line-height: 1;
             float: left;
             color: gold;
             background-color: transparent;
diff --git "a/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241012-\351\200\211\346\213\251\345\231\250\347\234\237\345\256\236\351\241\271\347\233\256/\351\200\211\346\213\251\345\231\250\347\234\237\345\256\236\351\241\271\347\233\256-5.html" "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241014-\351\200\211\346\213\251\345\231\250\347\234\237\345\256\236\351\241\271\347\233\256/\351\200\211\346\213\251\345\231\250\347\234\237\345\256\236\351\241\271\347\233\256-5.html"
similarity index 95%
rename from "\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241012-\351\200\211\346\213\251\345\231\250\347\234\237\345\256\236\351\241\271\347\233\256/\351\200\211\346\213\251\345\231\250\347\234\237\345\256\236\351\241\271\347\233\256-5.html"
rename to "\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241014-\351\200\211\346\213\251\345\231\250\347\234\237\345\256\236\351\241\271\347\233\256/\351\200\211\346\213\251\345\231\250\347\234\237\345\256\236\351\241\271\347\233\256-5.html"
index 7d9db552a31e4cf4f3603ab9c24c21c058f6e993..c4ebf14b0c4e17557fd4fb707ab9bcd476f7a719 100644
--- "a/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241012-\351\200\211\346\213\251\345\231\250\347\234\237\345\256\236\351\241\271\347\233\256/\351\200\211\346\213\251\345\231\250\347\234\237\345\256\236\351\241\271\347\233\256-5.html"
+++ "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241014-\351\200\211\346\213\251\345\231\250\347\234\237\345\256\236\351\241\271\347\233\256/\351\200\211\346\213\251\345\231\250\347\234\237\345\256\236\351\241\271\347\233\256-5.html"
@@ -11,7 +11,7 @@
         }
 
         .list li:hover * {
-            color: darkblue;
+            color: blue;
         }
     </style>
 </head>
diff --git "a/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241012-\351\200\211\346\213\251\345\231\250\347\234\237\345\256\236\351\241\271\347\233\256/\351\200\211\346\213\251\345\231\250\347\234\237\345\256\236\351\241\271\347\233\256-6.html" "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241014-\351\200\211\346\213\251\345\231\250\347\234\237\345\256\236\351\241\271\347\233\256/\351\200\211\346\213\251\345\231\250\347\234\237\345\256\236\351\241\271\347\233\256-6.html"
similarity index 91%
rename from "\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241012-\351\200\211\346\213\251\345\231\250\347\234\237\345\256\236\351\241\271\347\233\256/\351\200\211\346\213\251\345\231\250\347\234\237\345\256\236\351\241\271\347\233\256-6.html"
rename to "\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241014-\351\200\211\346\213\251\345\231\250\347\234\237\345\256\236\351\241\271\347\233\256/\351\200\211\346\213\251\345\231\250\347\234\237\345\256\236\351\241\271\347\233\256-6.html"
index bcd9c9309b409476357a9d32a3bdb09611a7a3ca..8eae79d934aa63bcae355562a10a541d005fe76c 100644
--- "a/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241012-\351\200\211\346\213\251\345\231\250\347\234\237\345\256\236\351\241\271\347\233\256/\351\200\211\346\213\251\345\231\250\347\234\237\345\256\236\351\241\271\347\233\256-6.html"
+++ "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241014-\351\200\211\346\213\251\345\231\250\347\234\237\345\256\236\351\241\271\347\233\256/\351\200\211\346\213\251\345\231\250\347\234\237\345\256\236\351\241\271\347\233\256-6.html"
@@ -7,7 +7,8 @@
     <title>Document</title>
     <style>
         .container form input:focus {
-            border-color: green;
+            outline: none;
+            border: 2px solid green;
         }
 
         .container form label:hover {
diff --git "a/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241014-\351\200\211\346\213\251\345\231\250\347\234\237\345\256\236\351\241\271\347\233\256/\351\200\211\346\213\251\345\231\250\347\234\237\345\256\236\351\241\271\347\233\256\346\225\210\346\236\234\345\233\276.md" "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241014-\351\200\211\346\213\251\345\231\250\347\234\237\345\256\236\351\241\271\347\233\256/\351\200\211\346\213\251\345\231\250\347\234\237\345\256\236\351\241\271\347\233\256\346\225\210\346\236\234\345\233\276.md"
new file mode 100644
index 0000000000000000000000000000000000000000..b5fa26cd4dc8d9c3333b6da126e6925a16a8a1eb
--- /dev/null
+++ "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241014-\351\200\211\346\213\251\345\231\250\347\234\237\345\256\236\351\241\271\347\233\256/\351\200\211\346\213\251\345\231\250\347\234\237\345\256\236\351\241\271\347\233\256\346\225\210\346\236\234\345\233\276.md"
@@ -0,0 +1,123 @@
+
+### 二十三、选择器真实项目练习
+
+1. 给定html代码如下，按要求完成CSS规则
+
+```html
+<div class="main">
+  <section id="intro">
+    <h1>Welcome</h1>
+    <p>This is the introduction section.</p>
+  </section>
+  <article class="post">
+    <h2>Post Title</h2>
+    <p>Post content...</p>
+    <ul>
+      <li>Item 1</li>
+      <li>Item 2</li>
+    </ul>
+  </article>
+  <aside class="sidebar">
+    <h3>Sidebar Title</h3>
+    <p>Sidebar content...</p>
+  </aside>
+</div>
+
+```
+
+任务：请写出CSS规则，使得.main类中的`<section>`和`<article>`元素中的所有`<h1>`和`<h2>`标签的字体变为粗体，
+并且`<aside>`类中的`<h3>`标签的字体变为斜体。
+
+效果图：
+![1](https://img.haruka.net.cn/image/2024/10/14/so3wcu.gif)
+
+2. 给定html代码如下，按要求完成CSS规则
+
+```html
+<form>
+  <input type="text" name="username" required placeholder="Username">
+  <input type="email" name="email" required placeholder="Email">
+  <input type="submit" value="Submit">
+</form>
+
+```
+
+任务：请写出CSS规则，使得所有带有required属性的`<input>`元素在获得焦点时边框变为蓝色，并且所有带有placeholder属性的`<input>`元素的占位符文本颜色为灰色。
+
+效果图：
+![2](https://img.haruka.net.cn/image/2024/10/14/so3vq2.gif)
+
+3. 给定html代码如下，按要求完成CSS规则
+
+```html
+<nav>
+  <ul>
+    <li><a href="#home" class="active">Home</a></li>
+    <li><a href="#about">About</a></li>
+    <li><a href="#services">Services</a></li>
+    <li><a href="#contact">Contact</a></li>
+  </ul>
+</nav>
+
+```
+
+任务：请写出CSS规则，使得导航栏中当前激活的链接（class="active"）的子元素`<a>`在悬停时背景色变为深灰色，并且所有`<a>`标签的子元素在悬停时字体颜色变为白色。
+
+效果图：
+![3](https://img.haruka.net.cn/image/2024/10/14/so3xtk.gif)
+
+4. 给定html代码如下，按要求完成CSS规则
+
+```html
+<h2 class="special-title">Special Title</h2>
+
+```
+
+任务：请写出CSS规则，使得带有class="special-title"的`<h2>`标签的第一个字母首字下沉，并且首字下沉的字母颜色为金色，背景色为透明。
+
+效果图：
+![4](https://img.haruka.net.cn/image/2024/10/14/so3wf0.gif)
+
+5. 给定html代码如下，按要求完成CSS规则
+
+```html
+<ul class="list">
+  <li>Item 1
+    <ul>
+      <li>Subitem 1</li>
+      <li>Subitem 2</li>
+    </ul>
+  </li>
+  <li>Item 2
+    <ul>
+      <li>Subitem 3</li>
+      <li>Subitem 4</li>
+    </ul>
+  </li>
+</ul>
+
+```
+
+任务：请写出CSS规则，使得.list类中的每个`<li>`元素的第一个子元素`<ul>`的背景色为浅灰色，并且当鼠标悬停在`<li>`元素上时，其所有子元素的字体颜色变为深蓝色。
+
+效果图：
+![5](https://img.haruka.net.cn/image/2024/10/14/so46ln.gif)
+
+6. 给定html代码如下，按要求完成CSS规则
+
+```html
+<div class="container">
+  <form>
+    <label for="name">Name:</label>
+    <input type="text" id="name" name="name">
+    <label for="password">Password:</label>
+    <input type="password" id="password" name="password">
+    <button type="submit">Submit</button>
+  </form>
+</div>
+```
+
+任务：请写出CSS规则，使得.container类中的`<form>`元素内的所有输入框在获得焦点时边框颜色变为绿色，并且所有标签`<label>`在悬停时背景色变为浅蓝色。
+
+效果图：
+![6](https://img.haruka.net.cn/image/2024/10/14/so430d.gif)
\ No newline at end of file
diff --git "a/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241016-\346\240\267\345\274\217\347\273\247\346\211\277\345\222\214\345\217\240\345\212\240\346\200\247\345\272\217\345\210\227\351\242\230/20241016-\346\240\267\345\274\217\347\273\247\346\211\277\345\222\214\345\217\240\345\212\240\346\200\247\345\272\217\345\210\227\351\242\230.md" "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241016-\346\240\267\345\274\217\347\273\247\346\211\277\345\222\214\345\217\240\345\212\240\346\200\247\345\272\217\345\210\227\351\242\230/20241016-\346\240\267\345\274\217\347\273\247\346\211\277\345\222\214\345\217\240\345\212\240\346\200\247\345\272\217\345\210\227\351\242\230.md"
new file mode 100644
index 0000000000000000000000000000000000000000..4923b5046ab1728f54f627f1528551187b92ac1b
--- /dev/null
+++ "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241016-\346\240\267\345\274\217\347\273\247\346\211\277\345\222\214\345\217\240\345\212\240\346\200\247\345\272\217\345\210\227\351\242\230/20241016-\346\240\267\345\274\217\347\273\247\346\211\277\345\222\214\345\217\240\345\212\240\346\200\247\345\272\217\345\210\227\351\242\230.md"
@@ -0,0 +1,234 @@
+## 二十四、样式继承和叠加性序列题
+
+1. #### 题1，文字“中华人民共和国”是何种颜色？
+
+```html
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        #box1 .para1 p{
+            color:red;
+        }
+        div div #box3 p{
+            color: blue;
+        }
+        div.para1 div.para2 div.para3 p{
+            color: green;
+        }
+    </style>
+</head>
+<body>
+    <div id="box1" class="para1">
+        <div id="box2" class="para2">
+            <div id="box3" class="para3">
+                <p>中华人民共和国</p>
+            </div>
+        </div>
+    </div>
+</body>
+</html>
+
+```
+答：由于 `#box3 p` 是最直接的选择器，且设定为蓝色，因此文字为 **蓝色**。
+
+2. #### 题2，文字“中华人民共和国”是何种颜色？
+
+```html
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        div p {
+            color: red;
+        }
+
+        #box {
+            color: blue;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="box">
+        <p id="para" class="spec">
+            <span>
+                中华人民共和国
+            </span>
+        </p>
+    </div>
+</body>
+
+</html>
+
+```
+答：`#box` 设置了 `color: blue`，这会影响子元素中的文本，因此文字为 **蓝色**。
+
+3. #### 题3，文字“中华人民共和国”是何种颜色？
+
+```html
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        span{
+            color: green;
+        }
+        .nav{
+            color: red;
+        }
+        .nav ul li{
+            color: blue;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="nav">
+        <ul>
+            <li>
+                <span>中华人民共和国</span>
+            </li>
+            <li>
+                <span>中华人民共和国</span>
+            </li>
+            <li>
+                <span>中华人民共和国</span>
+            </li>
+            <li>
+                <span>中华人民共和国</span>
+            </li>
+        </ul>
+    </div>
+
+</body>
+
+</html>
+
+```
+答：`span` 元素的样式指定为绿色，因此 `中华人民共和国` 的文字为 **绿色**。
+
+4. #### 题4，文字“中华人民共和国”是何种颜色？
+
+```html
+
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        #box1 div.spec2 p ,#box1 #box2 p{
+            color: blue;
+        }
+        #box1 #box3 p{
+            color: green;
+        }
+    </style>
+</head>
+
+<body>
+   <div id="box1" class="spec1">
+    <div id="box2" class="spec2">
+        <div id="box3" class="spec3">
+            <p>中华人民共和国</p>
+        </div>
+    </div>
+   </div>
+
+</body>
+
+</html>
+
+```
+答：最后一个选择器 `#box1 #box3 p` 为绿色，因此文字为 **绿色**。
+
+5. #### 题5，文字“中华人民共和国”是何种颜色？（面试题）
+
+```html
+
+<div id="father" class="c1">
+  <p id="son" class="c2">
+    中华人民共和国
+  </p>
+</div>
+
+<style type="text/css">
+  #father #son{  
+    color:blue;
+  }
+  
+  #father p.c2{ 
+    color:black;
+  }
+  
+  div.c1 p.c2{ 
+    color:red;
+  } 
+  
+  #father{
+    color:green!important;
+  }
+</style>
+
+```
+答：`#father{ color:green!important; }` 中 `!important` 优先级最高，因此文字为 **绿色**。
+
+6. #### 题6，文字“中华人民共和国”是何种颜色？（面试题）
+
+```html
+<style type="text/css">
+  #father{ 
+    color:red;
+  }
+  
+  p{ 
+    color:blue;
+  }
+</style>
+
+<div id="father">
+  <p>
+    中华人民共和国
+  </p>
+</div>
+
+```
+答：`p` 标签的样式设定为蓝色，优先于父元素，因此文字为 **蓝色**。
+
+7. #### 题7，文字“中华人民共和国”是何种颜色？（面试题）
+
+```html
+<div id="box1" class="c1">
+  <div id="box2" class="c2">
+    <div id="box3" class="c3">
+      中华人民共和国
+    </div>
+  </div>
+</div>
+
+<style type="text/css">
+  .c1 .c2 div{ 
+    color:blue;
+  }
+  
+  div #box3{
+    color:green;
+  }
+  
+  #box1 div{
+    color:yellow;
+  }
+</style>
+
+```
+答：`div #box3` 设定的绿色优先级较高，因此文字为 **绿色**。
diff --git "a/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241016-\347\233\222\345\255\220\346\250\241\345\236\213/20241016-\347\233\222\345\255\220\346\250\241\345\236\213.md" "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241016-\347\233\222\345\255\220\346\250\241\345\236\213/20241016-\347\233\222\345\255\220\346\250\241\345\236\213.md"
new file mode 100644
index 0000000000000000000000000000000000000000..522d386ef470f307782dcea2741d581e704cf8c7
--- /dev/null
+++ "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241016-\347\233\222\345\255\220\346\250\241\345\236\213/20241016-\347\233\222\345\255\220\346\250\241\345\236\213.md"
@@ -0,0 +1,114 @@
+### 二十四、盒子模型
+
+1. #### 说出下面盒子的真实占用的宽高，并画出盒子模型图
+
+```css
+
+    div{
+        width: 200px;
+        height: 200px;
+        padding: 10px 20px 30px;
+        padding-right: 40px;
+        border: 1px solid #000;
+    }
+
+```
+
+**真实占用宽度** = 200px + 20px + 40px + 2px = **262px**
+**真实占用高度** = 200px + 10px + 30px + 2px = **242px**
+
+**盒子模型图：**
+
+![](https://img.haruka.net.cn/image/2024/10/16/atcwv-0.png)
+
+![](https://img.haruka.net.cn/image/2024/10/16/2nc06-0.png)
+
+> 在处理CSS边框显示问题时，需要注意高分辨率显示器可能会影响边框的实际显示大小。由于浏览器可能会对页面元素进行缩放以适应高像素密度屏幕，这可能导致1px的边框在4K显示器上显示为0.667px。这种行为是为了保持视觉上的清晰度，但可能会引起布局对齐问题。
+
+
+2. #### 说出下面盒子的真实占用的宽高，并画出盒子模型图
+
+```css
+
+	div{
+		width: 200px;
+		height: 200px;
+		padding-left: 10px;
+		padding-right: 20px;
+		padding:40px 50px 60px;
+		padding-bottom: 30px;
+		border: 1px solid #000;
+	}
+
+```
+
+**真实占用宽度** = 200px + 50px + 50px + 2px = **302px**
+**真实占用高度** = 200px + 40px + 30px + 2px = **272px**
+
+**盒子模型图：**
+
+![](https://img.haruka.net.cn/image/2024/10/16/bcrm6-0.png)
+
+![](https://img.haruka.net.cn/image/2024/10/16/3mnwi-0.png)
+
+> 在处理CSS边框显示问题时，需要注意高分辨率显示器可能会影响边框的实际显示大小。由于浏览器可能会对页面元素进行缩放以适应高像素密度屏幕，这可能导致1px的边框在4K显示器上显示为0.667px。这种行为是为了保持视觉上的清晰度，但可能会引起布局对齐问题。
+
+
+3. #### 有如下盒子模型图，请写出代码，尝试用最简单的方式
+
+![](https://img.haruka.net.cn/image/2024/10/15/1304ox4-0.png)
+
+源码：
+```html
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>盒子模型示例</title>
+    <style>
+        .box {
+            width: 123px;  /* 内容区域的宽度 */
+            height: 123px; /* 内容区域的高度 */
+            padding: 20px 40px; /* 上下 20px，左右 40px 内边距 */
+            border: 1px solid black; /* 边框 1px */
+            margin: auto; /* 外边距居中 */
+            background-color: lightyellow; /* 背景颜色 */
+        }
+    </style>
+</head>
+<body>
+    <div class="box">123 × 123</div>
+</body>
+</html>
+```
+
+
+4. #### 有如下盒子模型图，请写出代码，尝试用最简单的方式
+
+![](https://img.haruka.net.cn/image/2024/10/15/130i3j5-0.png)
+
+源码：
+```html
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>盒子模型示例</title>
+    <style>
+        .box {
+            width: 123px;  /* 内容区域的宽度 */
+            height: 123px; /* 内容区域的高度 */
+            padding: 20px 40px 20px 20px; /* 上下 20px，左 20px，右 40px */
+            border: 1px solid black; /* 边框 1px */
+            margin: auto; /* 外边距居中 */
+            background-color: lightyellow; /* 背景颜色 */
+        }
+    </style>
+</head>
+<body>
+    <div class="box">123 × 123</div>
+</body>
+</html>
+```
diff --git "a/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241017-\346\265\256\345\212\250/\346\265\256\345\212\2501.html" "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241017-\346\265\256\345\212\250/\346\265\256\345\212\2501.html"
new file mode 100644
index 0000000000000000000000000000000000000000..9f121dd42ea68ab070f53598792ece5cf809580a
--- /dev/null
+++ "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241017-\346\265\256\345\212\250/\346\265\256\345\212\2501.html"
@@ -0,0 +1,149 @@
+<!DOCTYPE html>
+<html lang="zh">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>浮动</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+        }
+
+        body {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+        }
+
+        .Header {
+            width: 970px;
+            margin-bottom: 8px;
+        }
+
+        .Header::after {
+            content: "";
+            clear: both;
+            display: block;
+        }
+
+        .Logo {
+            width: 277px;
+            height: 103px;
+            margin-right: 8px;
+            background-color: red;
+            float: left;
+        }
+
+        .Lang {
+            width: 137px;
+            height: 49px;
+            margin-bottom: 8px;
+            background-color: green;
+            float: right;
+        }
+
+        .Nav {
+            width: 670px;
+            height: 46px;
+            background-color: green;
+            float: right;
+        }
+
+        .Main {
+            width: 970px;
+            margin-bottom: 8px;
+        }
+
+        .Main::after {
+            content: "";
+            clear: both;
+            display: block;
+        }
+
+        .Ads {
+            width: 310px;
+            height: 435px;
+            float: left;
+            background-color: yellow;
+        }
+
+        .Container {
+            width: 450px;
+            height: 390px;
+            float: left;
+            margin-left: 10px;
+            margin-right: 10px;
+            margin-bottom: 10px;
+        }
+
+        .Section-Top {
+            width: 450px;
+            height: 240px;
+            background-color: aquamarine;
+        }
+
+        .Section-Center {
+            width: 450px;
+            height: 110px;
+            margin-top: 10px;
+            background-color: aquamarine;
+        }
+
+        .Section-Bottom {
+            width: 450px;
+            height: 30px;
+            margin-top: 10px;
+            background-color: aquamarine;
+        }
+
+        .Aside {
+            width: 190px;
+            height: 400px;
+            float: left;
+            background-color: blueviolet;
+        }
+
+        .Section-RightBottom {
+            width: 650px;
+            height: 25px;
+            float: left;
+            background-color: blue;
+            margin-left: 10px;
+            margin-top: 10px;
+        }
+
+        .Bottom {
+            width: 970px;
+            height: 30px;
+            background-color: orange;
+
+        }
+    </style>
+</head>
+
+<body>
+    <div class="Index">
+        <div class="Header">
+            <div class="Logo">Logo</div>
+            <div class="Lang">Lang</div>
+            <div class="Nav">Nav</div>
+        </div>
+
+        <div class="Main">
+            <div class="Ads">Ads</div>
+            <div class="Container">
+                <div class="Section-Top">Section-Top</div>
+                <div class="Section-Center">Section-Center</div>
+                <div class="Section-Bottom">Section-Bottom</div>
+            </div>
+            <div class="Aside">Aside</div>
+            <div class="Section-RightBottom">Section-RightBottom</div>
+        </div>
+        <div class="Bottom">Bottom</div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241017-\346\265\256\345\212\250/\346\265\256\345\212\2502.html" "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241017-\346\265\256\345\212\250/\346\265\256\345\212\2502.html"
new file mode 100644
index 0000000000000000000000000000000000000000..a3a7eeedbe0f50d7aa8a4db244541a03e50867d6
--- /dev/null
+++ "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241017-\346\265\256\345\212\250/\346\265\256\345\212\2502.html"
@@ -0,0 +1,155 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+        }
+
+        body {
+            font-family: "STSong", "SimSun", sans-serif;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            flex-direction: column;
+        }
+
+        .Header {
+            width: 500px;
+            height: 25px;
+        }
+
+        .Header::after {
+            content: "";
+            clear: both;
+            display: block;
+        }
+
+        .Inform {
+            font-family: "SimSun", sans-serif;
+            font-weight: bold;
+            color: rgb(30, 67, 111);
+            list-style: square;
+            float: left;
+        }
+
+        .Inform::before {
+            display: inline-block;
+            width: 3px;
+            height: 19px;
+            font-size: 21px;
+            background: rgb(30, 67, 111);
+            content: "";
+            vertical-align: middle;
+            margin-right: 10px;
+        }
+
+        .More {
+            color: rgb(3, 2, 106);
+            font-size: 8px;
+            margin-top: 12px;
+            float: right;
+        }
+
+        .Banner {
+            width: 500px;
+            height: 2px;
+            background: linear-gradient(to right,
+                    red,
+                    orange,
+                    yellow,
+                    green,
+                    blue,
+                    indigo,
+                    violet);
+        }
+
+        .Banner {
+            width: 500px;
+        }
+
+        .Container {
+            width: 500px;
+        }
+
+        .text {
+            color: rgb(30, 67, 111);
+            font-size: 13px;
+            margin-top: 5px;
+            float: left;
+        }
+
+        .text::before {
+            display: inline-block;
+            width: 0px;
+            height: 0px;
+            border-color: transparent transparent transparent rgb(30, 67, 111);
+            border-width: 2px;
+            border-style: solid;
+            font-size: 21px;
+            content: "";
+            vertical-align: middle;
+            margin-right: 2px;
+            margin-left: 2px;
+        }
+
+        .text {
+            color: rgb(30, 67, 111);
+            font-size: 13px;
+            margin-top: 5px;
+            float: left;
+        }
+
+        .time {
+            color: rgb(30, 67, 111);
+            font-size: 13px;
+            margin-top: 5px;
+            border-bottom: 1px dashed whitesmoke;
+            float: right;
+        }
+
+        .text-Container::after {
+            content: "";
+            clear: both;
+            display: block;
+        }
+
+        .text-Container {
+            width: 500px;
+            border-bottom: 1px dashed whitesmoke;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="Header">
+        <div class="Inform">通知公告</div>
+        <div class="More">更多>></div>
+    </div>
+    <div class="Banner"></div>
+    <div class="Container">
+        <div class="text-Container">
+            <div class="text-left"></div>
+            <div class="text">哈哈哈哈哈哈哈哈</div>
+            <div class="time">2014年9月28日</div>
+        </div>
+        <div class="text-Container">
+            <div class="text-left"></div>
+            <div class="text">哈哈哈哈哈哈哈哈</div>
+            <div class="time">2014年9月28日</div>
+        </div>
+        <div class="text-Container">
+            <div class="text-left"></div>
+            <div class="text">哈哈哈哈哈哈哈哈</div>
+            <div class="time">2014年9月28日</div>
+        </div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241017-\346\265\256\345\212\250/\346\265\256\345\212\250\344\275\234\344\270\232.md" "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241017-\346\265\256\345\212\250/\346\265\256\345\212\250\344\275\234\344\270\232.md"
new file mode 100644
index 0000000000000000000000000000000000000000..53c0fd7b7abb04894bd4878fd7bb42233b3352e7
--- /dev/null
+++ "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241017-\346\265\256\345\212\250/\346\265\256\345\212\250\344\275\234\344\270\232.md"
@@ -0,0 +1,326 @@
+### 二十五、浮动
+
+1. 使用浮动，实现如下效果，具体数值（宽度、高度、间距等可自行使用`snipaste`测量，也可参考如上标识的数值，颜色随意）
+
+![梦葉樱图床](https://img.haruka.net.cn/image/2024/10/17/ieop9u.png)
+
+源码
+```html
+<!DOCTYPE html>
+<html lang="zh">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>浮动</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+        }
+
+        body {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+        }
+
+        .Header {
+            width: 970px;
+            margin-bottom: 8px;
+        }
+
+        .Header::after {
+            content: "";
+            clear: both;
+            display: block;
+        }
+
+        .Logo {
+            width: 277px;
+            height: 103px;
+            margin-right: 8px;
+            background-color: red;
+            float: left;
+        }
+
+        .Lang {
+            width: 137px;
+            height: 49px;
+            margin-bottom: 8px;
+            background-color: green;
+            float: right;
+        }
+
+        .Nav {
+            width: 670px;
+            height: 46px;
+            background-color: green;
+            float: right;
+        }
+
+        .Main {
+            width: 970px;
+            margin-bottom: 8px;
+        }
+
+        .Main::after {
+            content: "";
+            clear: both;
+            display: block;
+        }
+
+        .Ads {
+            width: 310px;
+            height: 435px;
+            float: left;
+            background-color: yellow;
+        }
+
+        .Container {
+            width: 450px;
+            height: 390px;
+            float: left;
+            margin-left: 10px;
+            margin-right: 10px;
+            margin-bottom: 10px;
+        }
+
+        .Section-Top {
+            width: 450px;
+            height: 240px;
+            background-color: aquamarine;
+        }
+
+        .Section-Center {
+            width: 450px;
+            height: 110px;
+            margin-top: 10px;
+            background-color: aquamarine;
+        }
+
+        .Section-Bottom {
+            width: 450px;
+            height: 30px;
+            margin-top: 10px;
+            background-color: aquamarine;
+        }
+
+        .Aside {
+            width: 190px;
+            height: 400px;
+            float: left;
+            background-color: blueviolet;
+        }
+
+        .Section-RightBottom {
+            width: 650px;
+            height: 25px;
+            float: left;
+            background-color: blue;
+            margin-left: 10px;
+            margin-top: 10px;
+        }
+
+        .Bottom {
+            width: 970px;
+            height: 30px;
+            background-color: orange;
+
+        }
+    </style>
+</head>
+
+<body>
+    <div class="Index">
+        <div class="Header">
+            <div class="Logo">Logo</div>
+            <div class="Lang">Lang</div>
+            <div class="Nav">Nav</div>
+        </div>
+
+        <div class="Main">
+            <div class="Ads">Ads</div>
+            <div class="Container">
+                <div class="Section-Top">Section-Top</div>
+                <div class="Section-Center">Section-Center</div>
+                <div class="Section-Bottom">Section-Bottom</div>
+            </div>
+            <div class="Aside">Aside</div>
+            <div class="Section-RightBottom">Section-RightBottom</div>
+        </div>
+        <div class="Bottom">Bottom</div>
+    </div>
+</body>
+
+</html>
+```
+
+效果图
+![梦葉樱图床](https://img.haruka.net.cn/image/2024/10/18/1bf18-0.png)
+
+2. 使用浮动，实现如下效果
+
+![梦葉樱图床](https://img.haruka.net.cn/image/2024/10/17/ieqq12.png)
+
+源码
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+        }
+
+        body {
+            font-family: "STSong", "SimSun", sans-serif;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            flex-direction: column;
+        }
+
+        .Header {
+            width: 500px;
+            height: 25px;
+        }
+
+        .Header::after {
+            content: "";
+            clear: both;
+            display: block;
+        }
+
+        .Inform {
+            font-family: "SimSun", sans-serif;
+            font-weight: bold;
+            color: rgb(30, 67, 111);
+            list-style: square;
+            float: left;
+        }
+
+        .Inform::before {
+            display: inline-block;
+            width: 3px;
+            height: 19px;
+            font-size: 21px;
+            background: rgb(30, 67, 111);
+            content: "";
+            vertical-align: middle;
+            margin-right: 10px;
+        }
+
+        .More {
+            color: rgb(3, 2, 106);
+            font-size: 8px;
+            margin-top: 12px;
+            float: right;
+        }
+
+        .Banner {
+            width: 500px;
+            height: 2px;
+            background: linear-gradient(to right,
+                    red,
+                    orange,
+                    yellow,
+                    green,
+                    blue,
+                    indigo,
+                    violet);
+        }
+
+        .Banner {
+            width: 500px;
+        }
+
+        .Container {
+            width: 500px;
+        }
+
+        .text {
+            color: rgb(30, 67, 111);
+            font-size: 13px;
+            margin-top: 5px;
+            float: left;
+        }
+
+        .text::before {
+            display: inline-block;
+            width: 0px;
+            height: 0px;
+            border-color: transparent transparent transparent rgb(30, 67, 111);
+            border-width: 2px;
+            border-style: solid;
+            font-size: 21px;
+            content: "";
+            vertical-align: middle;
+            margin-right: 2px;
+            margin-left: 2px;
+        }
+
+        .text {
+            color: rgb(30, 67, 111);
+            font-size: 13px;
+            margin-top: 5px;
+            float: left;
+        }
+
+        .time {
+            color: rgb(30, 67, 111);
+            font-size: 13px;
+            margin-top: 5px;
+            border-bottom: 1px dashed whitesmoke;
+            float: right;
+        }
+
+        .text-Container::after {
+            content: "";
+            clear: both;
+            display: block;
+        }
+
+        .text-Container {
+            width: 500px;
+            border-bottom: 1px dashed whitesmoke;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="Header">
+        <div class="Inform">通知公告</div>
+        <div class="More">更多>></div>
+    </div>
+    <div class="Banner"></div>
+    <div class="Container">
+        <div class="text-Container">
+            <div class="text-left"></div>
+            <div class="text">哈哈哈哈哈哈哈哈</div>
+            <div class="time">2014年9月28日</div>
+        </div>
+        <div class="text-Container">
+            <div class="text-left"></div>
+            <div class="text">哈哈哈哈哈哈哈哈</div>
+            <div class="time">2014年9月28日</div>
+        </div>
+        <div class="text-Container">
+            <div class="text-left"></div>
+            <div class="text">哈哈哈哈哈哈哈哈</div>
+            <div class="time">2014年9月28日</div>
+        </div>
+    </div>
+</body>
+
+</html>
+```
+效果图
+![梦葉樱图床](https://img.haruka.net.cn/image/2024/10/17/12zna94-0.png)
\ No newline at end of file

单元格1	单元格2	单元格3	单元格4
单元格5	单元格6	单元格7	单元格8