diff --git "a/\346\235\216\345\205\264\351\234\262/20241016--\346\265\256\345\212\250.md" "b/\346\235\216\345\205\264\351\234\262/20241016--\346\265\256\345\212\250.md"
new file mode 100644
index 0000000000000000000000000000000000000000..4b890a78aa56bb3b8b62ac40e31064e2f938b263
--- /dev/null
+++ "b/\346\235\216\345\205\264\351\234\262/20241016--\346\265\256\345\212\250.md"
@@ -0,0 +1,262 @@
+## 行内元素和块级元素
+行内元素:h1...
+块级元素：span..
+### 行内和块级元素的区别
+`行内元素：`
+ **与其他行内元素并排**
+ **不能设置宽，高，默认的宽度（文字宽度）**
+ `块状元素：`
+ **霸占一行，不能和其他任何元素并列**
+ **能接受宽，高**
+ ## 行内元素和块级元素的相互转换
+ ### 块级转换为行内元素
+`display:inline` 这时候为 ***显示模式***
+**此时这个div不能设置宽度，高度**
+**这个div可以和别人并排**
+### 行内元素转换为块级元素
+`display:block` ***块***
+**此时这个span能够设置宽度，高度**
+**独占一行，别人无法与他并排**
+**不设置宽度，将撑满父亲**
+## 浮动的性质
+`float:left`
+**这样就能完成两个元素并排，使得两个元素都能设置宽，高**
+### 性质一：浮动元素脱标
+#### 证明1
+***举例：***
+ ```css
+ .box1{
+ float: left;
+ width: 200px;
+ height: 200px;
+ background-color: rgb(82, 82, 194);
+ }
+ /* 因为box1中有float，所以脱离了标准流 box就成为了页面中的第一个标准流
+ 并渲染到页面左上角 */
+ .box2{
+ width: 300px;
+ height: 300px;
+ background-color: #c24e4e;
+ }
+```
+#### 证明2.
+ **span在标准流当中是不能设置宽高的吗，但是一旦设置浮动，就可以设置宽高了**
+ ### 性质二：浮动的元素互相贴靠
+ **给div设置浮动之后，当改变浏览器窗口大小的时候，就可以看到div的贴靠效果**
+ ***动态图展示：***：
+ ![]()
+ ***举例代码展示：***
+ ```css
+ div
+ {
+ float: left;
+ }
+ .d1{
+ width: 400px;
+ height: 200px;
+ font-size: 20px;
+ background-color: greenyellow;
+ }
+ .d2{
+
+ width: 200px;
+ height: 300px;
+ font-size: 20px;
+ background-color: pink;
+ }
+ .d3{
+
+ width: 200px;
+ height: 400px;
+ font-size: 20px;
+ background-color: rgb(139, 220, 240);
+ }
+```
+### 性质三：浮动元素有“字围”效果
+**让div内内容浮动。p不浮动即可，div挡住p，但是不会挡住p当中的文字，标准流当中的文字不会被浮动的合作遮挡住**
+**永远不是一个东西单独浮动，浮动都是一起浮动，要动大家一起动**
+### 性质四：收缩
+：一个浮动的元素，如果没有设置width，那么将自动收缩为内容宽度
+
+## 作业
+### 颜色浮动
+#### 效果图
+
+```html
+
+
+
+
+
+
+
+```
+
+
+### 通知栏
+#### 效果图
+
+```html
+
+
+
+
+
+
+```
\ No newline at end of file
diff --git "a/\346\235\216\345\205\264\351\234\262/20241018--\345\256\232\344\275\215\345\261\236\346\200\247.md" "b/\346\235\216\345\205\264\351\234\262/20241018--\345\256\232\344\275\215\345\261\236\346\200\247.md"
new file mode 100644
index 0000000000000000000000000000000000000000..55b4d90464a45e383bccb3ec41c871311d006e1f
--- /dev/null
+++ "b/\346\235\216\345\205\264\351\234\262/20241018--\345\256\232\344\275\215\345\261\236\346\200\247.md"
@@ -0,0 +1,165 @@
+css的定位属性有三种，分为绝对定位、相对定位、固定定位。
+```
+position: absolute;
+
+position: relative;
+
+position: fixed;
+```
+## 相对定位
+### 概念
+**相对定位**：让元素相对于自己原来的位置，进行位置调整（可用于盒子的位置微调）。
+
+语法：
+```
+background-position：向右偏移量 向下偏移量；
+```
+例如：
+```
+position：relative；
+left：50px；
+top：50px；
+```
+
+相对定位：别人不会把它原来的位置挤走。
+
+### 相对定位的定位值
++ left：盒子右移
++ right：盒子左移
++ top：盒子下移
++ bottom：盒子上移
+注：负数表示相反的方向
+
+## 绝对定位
+### 概念
+**绝对定位**：定义横纵坐标。原点在父容器的左上角或左下角。横坐标用left表示，纵坐标用top或者bottom表示。
+
+格式举例：
+```
+position: absolute; /*绝对定位*/
+left: 10px; /*横坐标*/
+top/bottom: 20px; /*纵坐标*/
+```
+**绝对定位脱标** ：**绝对定位的盒子脱离了标准文档流。**所以，所有的标准文档流的性质，绝对定位之后都不遵守了。
+
+绝对定位之后，标签就不区分所谓的行内元素、块级元素了，不需要`display:block`就可以设置宽、高了。
+
+### 绝对定位的参考点
+（1）如果用**top描述**，那么参考点就是**页面的左上角**，而不是浏览器的左上角
+（2）如果用**bottom描述**，那么参考点就是**浏览器首屏窗口尺寸**（好好理解“首屏”二字），对应的页面的左下角
+
+### 以盒子为参考点
+一个绝对定位的元素，如果父辈元素中也出现了已定位（无论是绝对定位、相对定位，还是固定定位）的元素，那么将以父辈这个元素，为参考点。
+
+注：（1） 要听最近的已经定位的祖先元素的，
+
+（2）不一定是相对定位，任何定位，都可以作为儿子的参考点：
+
+子绝父绝、**子绝父相**、子绝父固，都是可以给儿子定位的。但是在工程上，如果子绝、父绝，没有一个盒子在标准流里面了，所以页面就不稳固，没有任何实战用途。
+
+“**子绝父相**”有意义：这样可以保证父亲没有脱标，儿子脱标在父亲的范围里面移动。于是，工程上经常这样做：
+
+> 父亲浮动，设置相对定位（零偏移），然后让儿子绝对定位一定的距离。
+
+（3）绝对定位的儿子，无视参考的那个盒子的padding：
+
+## 作业
+### 效果图
+
+```html
+
+
+
+
+
+
+
+
+
+
+
【海雅缤纷店】万达影城(深圳海雅广场...)
+
+
+
￥80
+
已售
+
+