+```
+
+**（2）高矮不齐，底边对齐：**
+
+**（3）自动换行，一行写不满，换行写。**
+
+
+## 行内元素和块级元素
+标签分为两种等级：
+- 行内元素
+- 块级元素
+
+**行内元素和块级元素的区别：**（非常重要）
+
+行内元素：
+
+- 与其他行内元素并排；
+- 不能设置宽、高。默认的宽度，就是文字的宽度。
+
+块级元素：
+
+- 霸占一行，不能与其他任何元素并列；
+- 能接受宽、高。如果不设置宽度，那么宽度将默认变为子元素的高度。
+
+
+**行内元素和块级元素的分类：**
+
+标签分类：文本级、容器级。
+
+从HTML的角度来讲，标签分为：
+- 文本级标签：p、span、a、b、i、u、em。
+- 容器级标签：div、h系列、li、dt、dd。
+
+从CSS的角度讲：
+
+- 行内元素：除了p之外，所有的文本级标签，都是行内元素。p是个文本级，但是个块级元素。
+- 块级元素：所有的容器级标签都是块级元素，还有p标签。
+
+
+
+## 行内元素和块级元素的相互转换
+
+通过`display`属性将块级元素和行内元素进行相互转换。display即“显示模式”。
+
+### 块级元素可以转换为行内元素：
+
+给一个块级元素（比如div）设置：
+```
+display: inline;
+```
+这个标签将立即变为行内元素，此时它和一个span无异。inline就是“行内”。也就是说：
+- 此时这个div不能设置宽度、高度；
+- 此时这个div可以和别人并排了。
+
+### 行内元素转换为块级元素：
+
+给一个行内元素（比如span）设置：
+```
+display: block;
+```
+这个标签将立即变为块级元素，此时它和一个div无异。block”是“块”的意思。也就是说：
+- 此时这个span能够设置宽度、高度
+- 此时这个span必须霸占一行了，别人无法和他并排
+- 如果不设置宽度，将撑满父亲
+
+css中一共有三种手段，使一个元素脱离标准文档流：
+- （1）浮动
+- （2）绝对定位
+- （3）固定定位
+
+# 浮动
+## 浮动的性质
+
+现在有两个div，分别设置宽高。我们知道，它们的效果如下：
+
+
+
+此时，如果给这两个div增加一个浮动属性，比如`float: left;`，效果如下：
+
+
+
+此时，两个元素并排了，并且两个元素都能够设置宽度、高度了
+
+### 性质1：浮动的元素脱标(脱离标准流)
+
+
+
+在默认情况下，两个div标签是上下进行排列的。现在由于float属性让上图中的第一个`3333333333333333333333333333333333333333333333333 + 3333333333333333333333333333333333333333333333333 + 3333333333333333333333333333333333333333333333333 + 3333333333333333333333333333333333333333333333333 + 3333333333333333333333333333333333333333333333333 + 3333333333333333333333333333333333333333333333333 + 3333333333333333333333333333333333333333333333333 + 3333333333333333333333333333333333333333333333333 + 3333333333333333333333333333333333333333333333333 + 3333333333333333333333333333333333333333333333333 + 3333333333333333333333333333333333333333333333333 + 3333333333333333333333333333333333333333333333333 + 3333333333333333333333333333333333333333333333333 + 3333333333333333333333333333333333333333333333333 + 3333333333333333333333333333333333333333333333333 + 3333333333333333333333333333333333333333333333333 + 3333333333333333333333333333333333333333333333333 + 3333333333333333333333333333333333333333333333333 + 3333333333333333333333333333333333333333333333333 + 3333333333333333333333333333333333333333333333333 + 3333333333333333333333333333333333333333333333333 + 3333333333333333333333333333333333333333333333333 + 3333333333333333333333333333333333333333333333333 + 3333333333333333333333333333333333333333333333333 + 3333333333333333333333333333333333333333333333333 + 3333333333333333333333333333333333333333333333333 + 3333333333333333333333333333333333333333333333333 + 3333333333333333333333333333333333333333333333333 + 3333333333333333333333333333333333333333333333333 + 3333333333333333333333333333333333333333333333333 + 3333333333333333333333333333333333333333333333333 + 3333333333333333333333333333333333333333333333333 + 3333333333333333333333333333333333333333333333333 + 3333333333333333333333333333333333333333333333333 + 3333333333333333333333333333333333333333333333333 + 3333333333333333333333333333333333333333333333333 + 3333333333333333333333333333333333333333333333333 + 3333333333333333333333333333333333333333333333333 + 3333333333333333333333333333333333333333333333333 + 3333333333333333333333333333333333333333333333333 + 3333333333333333333333333333333333333333333333333 + 3333333333333333333333333333333333333333333333333 + 3333333333333333333333333333333333333333333333333 + 3333333333333333333333333333333333333333333333333 + 3333333333333333333333333333333333333333333333333 + 3333333333333333333333333333333333333333333333333 + 3333333333333333333333333333333333333333333333333 + 3333333333333333333333333333333333333333333333333 + 3333333333333333333333333333333333333333333333333 + 3333333333333333333333333333333333333333333333333 +
+`还在自己的层面上遵从标准流进行排列。
+
+
+
+上图中，span标签在标准流中，是不能设置宽高的（因为是行内元素）。但是，一旦设置为浮动之后，即使不转成块级元素，也能够设置宽高了。
+
+>**所有标签，浮动之后，已经不区分行内、块级了。
+
+
+### 性质2：浮动的元素互相贴靠
+
+
+上图显示，3号如果有足够空间，那么就会靠着2号。如果没有足够的空间，那么会靠着1号大哥。如果没有足够的空间靠着1号大哥，3号自己去贴左墙。
+
+不过3号自己去贴墙的时候
+
+上图显示，3号贴左墙的时候，并不会往1号里面挤。
+
+### 性质3：浮动的元素有“字围”效果
+让div浮动，p不浮动。
+
+
+上图中，**div挡住了p，但不会挡住p中的文字**，形成“字围”效果。
+
+>**标准流中的文字不会被浮动的盒子遮挡住**。
+
+浮动原则：不是一个东西单独浮动，浮动都是一起浮动，要浮动，大家都浮动。**
+
+
+### 性质4：收缩
+
+收缩：一个浮动的元素，如果没有设置width，那么将自动收缩为内容的宽度（这点非常像行内元素）。
+
+
+div本身是块级元素，如果不设置width，它会单独霸占整行；但是，设置div浮动后，它会收缩
+
+## 浮动的补充（做网站时注意）
+
+
+
+
+上图所示，将para1和para2设置为浮动，它们是div的儿子。此时para1+para2的宽度小于div的宽度。效果如上图所示。可如果设置para1+para2的宽度大于div的宽度，我们会发现，para2掉下来了：
+
+
+
+
+## 浮动的清除
+
+> 这里所说的清除浮动，指的是清除浮动与浮动之间的影响。
+
+
+有两个块级元素div，div没有任何属性，每个div里有li，效果如下：
+
+
+
+上图中，我们发现：第二组中的第1个li，去贴靠第一组中的最后一个li了（我们本以为这些li会分成两排）。
+
+### 方法1：给浮动元素的祖先元素加高度
+
+这个现象的根本原因是：li的**父亲div没有设置高度**，导致这两个div的高度均为0px（我们可以通过网页的审查元素进行查看）。div的高度为零，导致不能给自己浮动的孩子，撑起一个容器。
+
+给div设置高度，如果div自己的高度小于孩子的高度，也会出现不正常的现象：
+
+
+
+父亲大于儿子的高度：
+
+
+**如果一个元素要浮动，那么它的祖先元素一定要有高度。**
+
+**有高度的盒子，才能关住浮动**。
+
+只要浮动在一个有高度的盒子中，那么这个浮动就不会影响后面的浮动元素。
+
+
+
+
+### 方法2：clear:both;(不设置高度)
+使用`clear:both;`属性：
+
+```
+clear:both;
+```
+
+>clear就是清除，both指的是左浮动、右浮动都要清除。`clear:both`的意思是：**不允许左侧和右侧有浮动对象。**
+
+>致命的问题，**它所在的标签，margin属性失效了**
+
+margin失效的本质原因是：上图中的box1和box2，高度为零。
+
+### 方法3：隔墙法
+防止第二个div贴靠到第二个div，我们可以在这两个div中间用一个新的div隔开，然后给这个新的div设置`clear: both;`属性；同时，既然这个新的div无法设置margin属性，我们可以给它设置height，以达到margin的效果（曲线救国）。这便是隔墙法。
+
+
+
+
+**内墙法：**
+
+
+>**一个父亲是不能被浮动的儿子撑出高度的**。
+
+（1）我们在一个div里放一个有宽高的p，效果如下：（很简单）
+
+
+
+（2）可如果在此基础之上，给p设置浮动，却发现父亲div没有高度了：
+
+
+
+（3）此时，我么可以在div的里面放一个div（作为内墙），就可以让父亲div恢复高度：
+
+
+
+于是，我们采用内墙法解决前言中的问题：
+
+
+
+与外墙法相比，内墙法的优势（本质区别）在于：内墙法可以给它所在的家撑出宽度（让box1有高）。即：box1的高度可以自适应内容。
+
+而外墙法，虽然一道墙可以把两个div隔开，但是这两个div没有高，也就是说，无法wrap_content。
+
+
+### 清除浮动方法4：overflow:hidden;
+
+```
+overflow:hidden;
+```
+
+
+overflow即“溢出”， hidden即“隐藏”。这个属性的意思是“溢出隐藏”。顾名思义：所有溢出边框的内容，都要隐藏掉。
+
+
+
+
+上图显示，`overflow:hidden;`的本意是清除溢出到盒子外面的文字。但是，前端开发工程师发现了，它能做偏方。如下：
+
+一个父亲不能被自己浮动的儿子，撑出高度。但是，只要给父亲加上`overflow:hidden`; 那么，父亲就能被儿子撑出高了。
+
+
+
+那么对于前言中的例子，我们同样可以使用这一属性：
+
+
+
+## 浮动清除的总结
+浮动的元素，只能被有高度的盒子关住。 也就是说，如果盒子内部有浮动，这个盒子有高，那么妥妥的，浮动不会互相影响。
+
+### 1、加高法
+
+```html
+
+
+```
+## 第三题效果图
+## 主要代码
+[](./定位3.gif)
+```CSS
+
+```
+```html
+
+ //设置height
+
+
+
+
+
+ //设置height
+
+
+
+
+```
+
+### 2、`clear:both;`法
+
+最简单的清除浮动的方法，就是给盒子增加clear:both；表示自己的内部元素，不受其他盒子的影响。
+
+
+```html
+
+
+
+
+
+
+ //clear:both;
+
+
+
+
+```
+
+
+### 3、隔墙法
+
+在两部分浮动元素中间，建一个墙。隔开两部分浮动，让后面的浮动元素，不去追前面的浮动元素。
+墙用自己的身体当做了间隙。
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+我们发现，隔墙法好用，但是第一个div，还是没有高度。如果我们现在想让第一个div，自动根据自己的儿子撑出高度，我们就要想一些“小伎俩”。
+
+内墙法：
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+内墙法的优点就是，不仅仅能够让后部分的p不去追前部分的p了，并且能把第一个div撑出高度。这样，这个div的背景、边框就能够根据p的高度来撑开了。
+
+
+### 4、`overflow:hidden;`
+overflow:hidden;能够让margin生效。
+
+
+
+比如说，我们给背景颜色这个属性加上下划线，就变成了`_background-color: green;`。效果如下：
+
+
+
+
+
+于是乎，为了解决微型盒子（即height小于12px）的问题，正确写法：（注意不要忘记下划线）
+
+```
+height: 10px;
+_font-size:0;
+```
+
diff --git "a/\351\273\216\346\254\243\346\254\243/20241018--CSS\345\256\232\344\275\215\345\261\236\346\200\247\347\254\224\350\256\260--\345\256\232\344\275\215\344\275\234\344\270\232.md" "b/\351\273\216\346\254\243\346\254\243/20241018--CSS\345\256\232\344\275\215\345\261\236\346\200\247\347\254\224\350\256\260--\345\256\232\344\275\215\344\275\234\344\270\232.md"
new file mode 100644
index 0000000000000000000000000000000000000000..a391432a3124e8a9e6db0e39c1c2dafe6c669bfa
--- /dev/null
+++ "b/\351\273\216\346\254\243\346\254\243/20241018--CSS\345\256\232\344\275\215\345\261\236\346\200\247\347\254\224\350\256\260--\345\256\232\344\275\215\344\275\234\344\270\232.md"
@@ -0,0 +1,693 @@
+# 作业
+## 第一题效果图
+[](./屏幕截图%202024-10-20%20定位1.png)
+## 主要代码
+```CSS
+
+```
+```html
+
+
+
+
+```
+## 第二题效果图
+[](./定位2.gif)
+## 主要代码
+```CSS
+
+```
+```html
+
+
+
+
+ 8888
+
+
+
+这是一个带有悬浮提示这是提示内容的文字。
+ + +``` +## 第四题效果图 +## 主要代码 +[](./定位4.png) +```CSS + +``` +```html + +付款图标
+ 存款图标
+ 删除图标
+ 粘贴图标
+ 笑脸图标
+ 编辑图标
+
+```
+
+
+## 第五题效果图
+[](./定位5.png)
+## 主要代码
+```CSS
+
+```
+```html
+
+
+
+
+
+```
+## 第六题效果图
+[](/定位6.png)
+## 主要代码
+```CSS
+
+```
+```html
+
+```
+
+# 笔记
+# 定位
+CSS的定位属性有三种，分别是绝对定位、相对定位、固定定位。
+```
+ position: absolute;
+
+ position: relative;
+
+ position: fixed;
+
+```
+
+## 相对定位
+
+**相对定位**：让元素相对于自己原来的位置，进行位置调整（可用于盒子的位置微调）。
+
+之前学习的背景属性中，是通过如下格式：
+
+```
+ background-position:向右偏移量 向下偏移量;
+```
+
+但这回的定位属性，是通过如下格式：
+
+```
+ position: relative;
+ left: 50px;
+ top: 50px;
+```
+
+```html
+
+
+
+
+
+
+ 
+
+
+ -
+
- 【海雅缤纷城】万达影城(深圳海雅广场...) +
- 单人电影票,可观看2D +
- ￥35 +
- ￥89 +
- 已售 +
- 225 +
广东深圳宝安区建安一路海雅缤纷城4楼
+有生之年
+ 狭路相逢
+
+
+
+