diff --git "a/\347\216\213\345\251\211\345\251\267/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\357\274\214\347\233\222\345\255\220\346\250\241\345\236\213 (3).md" "b/\347\216\213\345\251\211\345\251\267/20241014-\344\274\252\347\261\273.md"
similarity index 100%
rename from "\347\216\213\345\251\211\345\251\267/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\357\274\214\347\233\222\345\255\220\346\250\241\345\236\213 (3).md"
rename to "\347\216\213\345\251\211\345\251\267/20241014-\344\274\252\347\261\273.md"
diff --git "a/\347\216\213\345\251\211\345\251\267/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\357\274\214\347\233\222\345\255\220\346\250\241\345\236\213 (2).md" "b/\347\216\213\345\251\211\345\251\267/20241017-\346\265\256\345\212\250.md"
similarity index 100%
rename from "\347\216\213\345\251\211\345\251\267/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\357\274\214\347\233\222\345\255\220\346\250\241\345\236\213 (2).md"
rename to "\347\216\213\345\251\211\345\251\267/20241017-\346\265\256\345\212\250.md"
diff --git "a/\347\216\213\345\251\211\345\251\267/20241021-\345\256\232\344\275\215\345\261\236\346\200\247.md" "b/\347\216\213\345\251\211\345\251\267/20241021-\345\256\232\344\275\215\345\261\236\346\200\247.md"
new file mode 100644
index 0000000000000000000000000000000000000000..f8c1befc8ce215104332ac630a2b6a8d0689cf1e
--- /dev/null
+++ "b/\347\216\213\345\251\211\345\251\267/20241021-\345\256\232\344\275\215\345\261\236\346\200\247.md"
@@ -0,0 +1,118 @@
+# CSS定位属性
+## css的定位属性有三种：绝对定位、相对定位、固定定位
+```
+position：absolute; //绝对定位
+
+position：relative; //相对定位
+
+position：fixed ; //固定定位
+```
+
+### 相对定位
+- 让元素相对于自己原来的位置，进行位置调整（可用于盒子的位置微调）
+```
+ position: relative;/*相对定位：相对于自己原来的位置*/
+ left: 50px;/*横坐标：正值表示向右偏移，负值表示向左偏移*/
+ top: 50px;/*纵坐标：正值表示向下偏移，负值表示向上偏移*/
+```
+
+#### 相对定位不脱标
+- 相对定位：不脱标，老家留坑，别人不会把它的位置挤走。
+
+- 也就是说，相对定位的真实位置还在老家，只不过影子出去了，可以到处飘。
+
+#### 相对定位的用途
+- 如果想做“压盖”效果（把一个div放到另一个div之上），我们一般不用相对定位来做。相对定位，就两个作用：
+
+（1）微调元素
+（2）做绝对定位的参考，子绝父相
+#### 相对定位的定位值(负数表示相反的方向)
+- left：盒子右移
+
+- right：盒子左移
+
+- top：盒子下移
+
+- bottom：盒子上移
+
+
+
+## 绝对定位 (abosolute)
+- 定义在横纵坐标。原点在父容器的左上角或左下角
+```
+position :abosolute; //绝对定位
+left:10px; //横坐标，x轴
+top/bottom :20px; //纵坐标，y轴
+```
+
+### 绝对定位脱标
+- 绝对定位的盒子脱离了标准文档流。
+
+- 所以，所有的标准文档流的性质，绝对定位之后都不遵守了。
+
+- 绝对定位之后，标签就不区分所谓的行内元素、块级元素了，不需要display:block就可以设置宽、高了。
+
+### 绝对定位的参考点（重要）
+（1）如果用top描述，那么参考点就是页面的左上角，而不是浏览器的左上角
+
+（2）如果用bottom描述，那么参考点就是**浏览器首屏窗口**尺寸（好好理解“首屏”二字），对应的页面的左下角
+
+
+##以盒子模型为参考
+- 一个绝对定位的元素，如果父辈元素也出现了定位（相对、绝对、固定）的元素，那么将以父辈这个元素为参考点
+- 就是以父辈的左上角为参考点
+- 要看定位的祖先元素，不一定是父亲，可能是爷爷（谁离自己最近，就以谁为参考点
+- 任何定位都可以是儿子的参考点
+ - 子绝父绝、子绝父相、子绝父固，都是可以给儿子定位的。但是在工程上，如果子绝、父绝，没有一个盒子在标准流里面了，所以页面就不稳固，没有任何实战用途。
+
+- 绝对定位的儿子，直接无视参考点的盒子的padding，从border开始
+
+
+
+## 固定定位(fixed)
+- 相对浏览器窗口进行定位。无论页面如何滚动，这个盒子位置不变
+- 用途1：网页右下角的“返回到顶部”
+- **用途2：**顶部导航条
+
+## z-index属性
+- 表示谁压着谁，数值大的压盖这数值小的
+- 特性：
+ - 属性值大的位于上层，属性值小的位于下层
+ - z-index值没有单位，就是一个正整数，默认值为0
+ - 如果都没有写这个属性，或者属性一样。那么谁在HTML页面里面写在后面，谁就会压在上面（覆盖）。**定位的元素永远可以压在没有定位的元素**
+ - 只有定位的元素才可以使用z-index元素。**浮动的元素不能用**
+ - 从父现象：父亲怂了，儿子再牛逼也没有用。就是父亲1比父亲2的官大，那么儿子1的官比儿子2的官小，儿子1也是在上层
+ - 父亲的z-index属性大，即使儿子的z-index属性值小，那么也是在上层
+
+## 作业
+- 定位悬停文字
+```html
+
+
+
+
+
+ Document
+
+
+
+
+
+
+```
\ No newline at end of file
diff --git "a/\347\216\213\345\251\211\345\251\267/20241023-css\345\261\236\346\200\247.md" "b/\347\216\213\345\251\211\345\251\267/20241023-css\345\261\236\346\200\247.md"
new file mode 100644
index 0000000000000000000000000000000000000000..9addcc67332907d1746fbf6ef1e51b770b756ec7
--- /dev/null
+++ "b/\347\216\213\345\251\211\345\251\267/20241023-css\345\261\236\346\200\247.md"
@@ -0,0 +1,319 @@
+## css3现状
+1. 移动端支持优于pc端
+2. 不断改进中
+3. 应用相对广泛
+## 符号
+* `[]`表示可选项
+* `||`表示或者
+* `|` 表示多选一
+* `?`0个或1个
+* `*`0个或多个
+* `{}`范围
+## css3选择器
+1. div 标签选择器
+2. .box 类选择器
+3. #box id选择器
+4. div p 后代选择器
+5. div.box 交集选择器
+6. div,p,span 并集选择器
+7. div>p 子代选择器
+8. div+p 选中的div后面相邻的第一个p
+9. div~p 选中的div后面所有的p
+10. `*` 通配符
+
+
+11. **UI 元素状态伪类选择器**：用于选择用户界面元素的不同状态。
+ - `:enabled` 和 `:disabled`：选择启用或禁用的表单元素。
+ ```css
+ input:enabled {
+ background-color: white;
+ }
+ input:disabled {
+ background-color: gray;
+ }
+ ```
+ - `:read-only` 和 `:read-write`：选择只读或可编辑的元素。
+ ```css
+ input:read-only {
+ background-color: silver;
+ }
+ input:read-write {
+ background-color: white;
+ }
+ ```
+
+12. **通用兄弟选择器**：`~` 选择器选择后续所有兄弟元素。
+ ```css
+ h1 ~ p {
+ color: #555;
+ }
+ ```
+
+13. **相邻兄弟选择器**：`+` 选择器选择紧随其后的兄弟元素。
+ ```css
+ h1 + p {
+ color: #333;
+ }
+ ```
+
+14. **子元素选择器**：`>` 选择器选择作为某元素直接子元素的元素。
+ ```css
+ ul > li {
+ margin-left: 20px;
+ }
+ ```
+
+
+
+
+## 属性选择器
+- **属性选择器**：根据元素的属性及其值来选择元素。
+ ```css
+ [type="text"] {
+ border: 1px solid #ccc;
+ }
+ ```
+- **属性选择器的扩展**：可以更精确地选择具有特定属性值的元素。
+ ```css
+ input[type="radio"] {
+ margin-right: 5px;
+ }
+ ```
+1. 标志性符号`[]`
+2. `E[title]` 选中页面的E元素，并且E存在 title 属性
+3. `E[title="abc"]`选中页面的E元素，并且E需要带有title属性，且属性值完全等于abc
+4. `E[attr~=val]`选择具有 attr 属性且属性值为：用空格分隔的字词列表，其中一个等于val的E元素.如``
+5. `E[attr|=val]`表示要么是一个单独的属性值，要么这个属性值是以“-”分隔的
+6. `E[title^="abc"]`选中页面的E元素，并且E需要带有 title 属性,属性值以 abc 开头
+7. `E[title$="abc"]`选中页面的E元素，并且E需要带有 title 属性,属性值以 abc 结尾
+8. `E[title*="abc"]`选中页面的E元素，并且E需要带有 title 属性,属性值任意位置包含abc
+## 结构伪类选择器
+1. **伪类选择器**：用于选择处于特定状态的元素。
+ - `:nth-child()`：选择指定的子元素。
+ ```css
+ li:nth-child(2) {
+ font-weight: bold;
+ }
+ ```
+ - `:nth-of-type()`：选择父元素中指定类型的子元素。
+ ```css
+ ul li:nth-of-type(2) {
+ font-weight: bold;
+ }
+ ```
+ - `:first-of-type`：选择父元素中第一个特定类型的子元素。
+ ```css
+ ul li:first-of-type {
+ font-weight: bold;
+ }
+ ```
+ - `:last-of-type`：选择父元素中最后一个特定类型的子元素。
+ ```css
+ ul li:last-of-type {
+ font-weight: bold;
+ }
+ ```
+ - `:not()`：选择不匹配指定选择器的元素。
+ ```css
+ li:not(:first-child) {
+ background-color: #eee;
+ }
+ ```
+ - `:checked`：选择被选中的 radio 或 checkbox 元素。
+ ```css
+ input[type="checkbox"]:checked {
+ background-color: yellow;
+ }
+ ```
+2. **结构伪类选择器**：基于文档结构选择元素。
+ - `:root`：选择文档的根元素（例如 HTML）。
+ ```css
+ :root {
+ background-color: #f9f9f9;
+ }
+ ```
+ - `:empty`：选择没有子元素的元素。
+ ```css
+ p:empty {
+ display: none;
+ }
+ ```
+ - `:target`：选择当前活动的锚点元素。
+ ```css
+ section:target {
+ border: 1px solid #000;
+ }
+ ```
+
+## 伪元素选择器
+ + 块级元素才起作用
+ + `E::before` 设置在元素E的前面的内容，配合content属性（撑高）一起使用
+ + `E::after` 设置在元素E的后面的内容，配合content属性一起使用
+ + `E::first-letter`设置元素 E 里面的第一个字符的样式
+ + `E::first-line`设置元素 E 里面的第一行的样式
+ + `E::selection`设置元素 E 里面被鼠标选中的区域的样式（一般设置颜色和背景色）
+
+
+## 作业
+-[精灵图标](../imgs/精灵技术.png)
+```html
+
+
+
+
+
+ Document
+
+
+
+ 付款图标
+ 存款图标
+ 笑脸图标
+ 删除图标
+ 粘贴图标
+ 编辑图标
+
+
+```
+
+-[万达影城](../imgs/万达.png)
+```html
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+
+
+
+ - 【海雅缤纷城】万达影城（深圳海雅广场...
+ - 单人电影票，可2D观看
+ - ￥35￥80
已售225
+
+
+
+
+