diff --git "a/\351\230\231\347\202\234\345\273\267/\344\275\234\344\270\232/20241014.html" "b/\351\230\231\347\202\234\345\273\267/\344\275\234\344\270\232/20241014.html"
new file mode 100644
index 0000000000000000000000000000000000000000..b51258e1ca572b123f7485b198cac0c8cda4aa7d
--- /dev/null
+++ "b/\351\230\231\347\202\234\345\273\267/\344\275\234\344\270\232/20241014.html"
@@ -0,0 +1,158 @@
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git "a/\351\230\231\347\202\234\345\273\267/\344\275\234\344\270\232/20241016.html" "b/\351\230\231\347\202\234\345\273\267/\344\275\234\344\270\232/20241016.html"
new file mode 100644
index 0000000000000000000000000000000000000000..86e9710ce44f1d98764ce3da18045fd6b1a6c9aa
--- /dev/null
+++ "b/\351\230\231\347\202\234\345\273\267/\344\275\234\344\270\232/20241016.html"
@@ -0,0 +1,53 @@
+
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git "a/\351\230\231\347\202\234\345\273\267/\350\257\276\345\240\202\347\254\224\350\256\260/20241014.md" "b/\351\230\231\347\202\234\345\273\267/\350\257\276\345\240\202\347\254\224\350\256\260/20241014.md"
new file mode 100644
index 0000000000000000000000000000000000000000..44d560f08eeff6abe111aae46ab5c22ef283ba19
--- /dev/null
+++ "b/\351\230\231\347\202\234\345\273\267/\350\257\276\345\240\202\347\254\224\350\256\260/20241014.md"
@@ -0,0 +1,86 @@
+# 伪类
+
+1. **伪类**：同一个标签，根据其**不同的种状态，有不同的样式** 这就叫做“伪类” 伪类用冒号来表示。
+
+2. 静态伪类:只能用于**超链接**的样式
+
++ `:link` 超链接点击之前
++ `:visited` 链接被访问过之后
+
+3. **动态伪类**：针对**所有标签**都适用的样式
+
++ `:hover` “悬停”：鼠标放到标签上的时候
++ `:active` “激活”： 鼠标点击标签，但是不松手时。
++ `:focus` 是某个标签获得焦点时的样式（比如某个输入框获得焦点）
+
+4. 超链接的四种状态
+
++ `:link` “链接”：超链接点击之前
++ `:visited` “访问过的”：链接被访问过之后
++ `:hover` “悬停”：鼠标放到标签上的时候
++ `:active` “激活”： 鼠标点击标签，但是不松手时
+
+```html
+
+```
+
+5. 动态伪类举例
+
++ `:hover` “悬停”：鼠标放到标签上的时候
++ `:active` “激活”： 鼠标点击标签，但是不松手时。
++ `:focus` 是某个标签获得焦点时的样式（比如某个输入框获得焦点）
+
+```html
+
+```
\ No newline at end of file
diff --git "a/\351\230\231\347\202\234\345\273\267/\350\257\276\345\240\202\347\254\224\350\256\260/20241016.md" "b/\351\230\231\347\202\234\345\273\267/\350\257\276\345\240\202\347\254\224\350\256\260/20241016.md"
new file mode 100644
index 0000000000000000000000000000000000000000..2ba5d4b1758014c2321a9d6142ef04283bb55988
--- /dev/null
+++ "b/\351\230\231\347\202\234\345\273\267/\350\257\276\345\240\202\347\254\224\350\256\260/20241016.md"
@@ -0,0 +1,132 @@
+# 样式表的继承性和层叠性
+
+1. CSS的继承性:
+
++ 关于文字样式的属性，都具有继承性。这些属性包括：color、 text-开头的、line-开头的、font-开头的
+
++ 关于盒子、定位、布局的属性，都不能继承
+
+2. CSS的层叠性:就是css处理冲突的能力
+
++ 对于相同的选择器（比如同样都是类选择器），其样式表排序：行级样式 > 内嵌样式表 > 外部样式表（就近原则）
+
++ 对于相同类型的样式表（比如同样都是内部样式表），其选择器排序：ID选择器 > 类选择器 > 标签选择器
+
++ 外部样式表的ID选择器 > 内嵌样式表的标签选择器
+
++ 对同一个标签，如果用到的都是内嵌样式表，且权重一致，那它的优先级：定义的CSS样式表中，谁最近，就用谁
+
++ 对于同一个标签，如果用到的都是外部样式表，且权重一致，那它的优先级：html文件中，引用样式表的位置越近，就用谁
+
++ 计算权重,统计各个选择器的数量,优先级高的胜出
+
++ 权重相同时,依据就近原则(靠近文本的优先)
+
++ !important标记:优先级最高
+正确语法:`font-size:60px !important;`
+!important提升的是一个属性，而不是一个选择器;
+!important无法提升继承的权重，该是0还是0;
+!important不影响就近原则;
+
+# 盒子模型
+
+1. 盒子中的区域:一个盒子中主要的属性就5个：width、height、padding、border、margin
+
++ width和height：内容的宽度、高度（不是盒子的宽度、高度）
+
++ padding：内边距
+
++ border：边框
+
++ margin：外边距
+
+2. CSS盒模型和IE盒模型的区别
+
++ 在标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸
+
++ IE盒子模型中，width 和 height 指的是内容区域+border+padding的宽度和高度
+
+3. 认识padding
+
++ padding区域也有颜色
+
++ padding有四个方向
+
++ 小属性的写法
+```html
+padding-top: 30px;
+padding-right: 20px;
+padding-bottom: 40px;
+padding-left: 100px;
+```
+
++ 综合属性的写法：(上、右、下、左)（顺时针方向，用空格隔开。margin的道理也是一样的）
+
+4. 认识border
+
++ 一个border属性，是由三个小属性综合而成的。如果某一个小属性后面是空格隔开的多个值，那么就是上右下左的顺序
+
++ boder三要素: 像素(粗细)、线型、颜色
+```html
+.div1{
+ width: 10px;
+ height: 10px;
+ border: 2px solid red;
+}
+```
+
+5. border拆分
+
++ （1）按三要素拆开：border-width、border-style、border-color。（一个border属性是由三个小属性综合而成的）
++ （2）按方向拆开：border-top、border-right、border-bottom、border-left
+
+
+# 作业及主要代码
+
+1. 说出下面盒子的真实占用的宽高，并画出盒子模型图
+```html
+div{
+ width: 200px;
+ height: 200px;
+ padding: 10px 20px 30px;
+ padding-right: 40px;
+ border: 1px solid #000;
+ }
+```
+
+2. 说出下面盒子的真实占用的宽高，并画出盒子模型图
+```html
+div{
+ width: 200px;
+ height: 200px;
+ padding-left: 10px;
+ padding-right: 20px;
+ padding:40px 50px 60px;
+ padding-bottom: 30px;
+ border: 1px solid #000;
+ }
+```
+
+3. 有如下盒子模型图，请写出代码，尝试用最简单的方式
+```html
+div{
+ width: 123px;
+ height: 123px;
+ border: 1px solid black;
+ padding-top: 20px;
+ padding-right: 40px;
+ }
+```
+
+4. 有如下盒子模型图，请写出代码，尝试用最简单的方式
+```html
+div {
+ width: 123px;
+ height: 123px;
+ border: 1px solid black;
+ padding-top: 20px;
+ padding-right: 40px;
+ padding-bottom: 20px;
+ padding-left: 20px;
+ }
+```
\ No newline at end of file