From 795bee697493d5b76d34ec0a79564dc4f9bb959e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B4=E5=98=89=E7=8E=B2?=
<14091858+softwork-wjl@user.noreply.gitee.com>
Date: Tue, 22 Oct 2024 21:22:39 +0800
Subject: [PATCH 1/3] =?UTF-8?q?20241021=E5=AE=9A=E4=BD=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../20241021\345\256\232\344\275\215.md" | 407 ++++++++++++++++++
1 file changed, 407 insertions(+)
create mode 100644 "\345\220\264\345\230\211\347\216\262/20241021\345\256\232\344\275\215.md"
diff --git "a/\345\220\264\345\230\211\347\216\262/20241021\345\256\232\344\275\215.md" "b/\345\220\264\345\230\211\347\216\262/20241021\345\256\232\344\275\215.md"
new file mode 100644
index 0000000..895546a
--- /dev/null
+++ "b/\345\220\264\345\230\211\347\216\262/20241021\345\256\232\344\275\215.md"
@@ -0,0 +1,407 @@
+# 笔记
+
+ css定位属性有三种:分别是绝对定位、相对定位、固定定位
+
+```
+ position: absolute;
+
+ position: relative;
+
+ position: fixed;
+```
+
+## 相对定位:让元素相对于自己原来的位置
+
+**不脱标**
+
+position:relative
+
+```
+background-position:向右偏移量 向下偏移；
+```
+
+### 不脱标
+真实位置在老家，影子出去玩
+
+### 用途
++ 微调元素
++ 做绝对定位的参考:子绝父相
+
+### 相对定位的定位值
++ left:盒子右移
++ right:盒子左移
++ top:盒子下移
++ bottom:盒子上移
+**负数表示相反方向**
+`left:200px`等价于`right:-200px`
+
+## 绝对定位
+**脱标**
+
+position:absolute
+
+**绝对定位**：定义横纵坐标。原点在父容器的左上角或左下角。横坐标用left表示，纵坐标用top或者bottom表示。
+
+### 绝对定位会脱标
+绝对定位之后，标签就不区分所谓的行内元素、块级元素了，不需要`display:block`就可以设置宽、高了。
+
+### 绝对定位参考点
+
+1. 如果用`top`描述，参考点就是**页面的左上角**，不是浏览器左上角
+
+2. 如果用`bottom`描述，参考点是**浏览器首屏窗口尺寸**
+
+注意以下:
+1. 要听最近的已经定位的祖先元素的，不一定是父亲，可能是爷爷
+2. 不一定是相对定位，任何定位，都可以作为儿子的参考点:父亲浮动，设置相对定位（零偏移），然后让儿子绝对定位一定的距离。
+3. 绝对定位的儿子，无视参考的那个盒子的padding
+
+**让绝对定位中的盒子在父亲里居中**
+
+```css
+div{
+ width:600px;
+ height:60px;
+ position:absolute; 绝对定位的盒子
+ left:50%; 首先，让左边线居中
+ top:50%; 让中间线居中
+ margin-left:-50px; 然后，向左移动宽度(100px)的一半
+ margin-top:-50px; 向上移动(100px)的一半
+}
+```
+我们可以总结成一个公式：
+
+> left:50%; margin-left:负的宽度的一半
+
+## 固定定位
+就是相对浏览器窗口进行定位。无论页面如何滚动，这个盒子显示的位置不变。
+
+`position:fixed`
+
+1. 用途:网页右下角显示回到顶部，就可以固定定位
+
+```css
+
+```
+
+2.用途:顶部导航条
+
+```html
+
+
+
+
+ Document
+
+
+
+
+
+
+```
+
+## z-index属性:
+**表示谁压着谁，数值大的压盖住数值小的**
+有如下特性：
+
+ （1）属性值大的位于上层，属性值小的位于下层。
+
+ （2）z-index值没有单位，就是一个正整数。默认的z-index值是0。
+
+ （3）如果大家都没有z-index值，或者z-index值一样，那么在HTML代码里写在后面，谁就在上面能压住别人。定位了的元素，永远能够压住没有定位的元素。
+
+ （4）只有定位了的元素，才能有z-index值。也就是说，不管相对定位、绝对定位、固定定位，都可以使用z-index值。**而浮动的元素不能用**。
+
+ （5）从父现象：父亲怂了，儿子再牛逼也没用。意思是，如果父亲1比父亲2大，那么，即使儿子1比儿子2小，儿子1也能在最上层。
+
+
+z-index属性的应用还是很广泛的。当好几个已定位的标签出现覆盖的现象时，我们可以用这个z-index属性决定，谁处于最上方。也就是**层级**的应用。
+
+
+**层级：**
+
+（1）必须有定位（除去static）
+
+（2）用`z-index`来控制层级数。
+
+# 作业
+
+1. 创建一个在其父级容器中水平、垂直居中的绝对定位元素，如下效果：
+效果:
+```css
+ #d1{
+ /* 相对定位 */
+ position: relative;
+ width: 300px;
+ height: 300px;
+ border: 1px solid black;
+ background-color: pink;
+ }
+ #d2{
+ /* 绝对定位 */
+ position: absolute;
+ width: 100px;
+ height: 100px;
+ top: 50%;
+ left: 50%;
+ background-color: yellow;
+ margin-top: -50px;
+ margin-left: -50px;
+ }
+```
+html代码
+```html
+
+
+```
+
+2. 在页面顶部创建一个固定不动的导航条，要求不遮盖下面的内容
+
+```css
+ /* fixed;属性来固定导航条，
+ 并通过适当的top、z-index和padding-top等样式属性来确保下面的内容不会被遮盖。 */
+ *{
+ margin: 0px;
+ padding: 0px;
+ }
+ .c1{
+ top: 0px;
+ left: 0px;
+ position: fixed;
+ width: 100%;
+ height: 50px;
+ background-color:gray;
+ color: black;
+ border: 1px solid black;
+ /* 设置背景不会覆盖内容，只需要z-index: ;足够高 */
+ z-index: 1000;
+ }
+ .c2{
+ width: 300px;
+ height: 100%;
+ margin-top: 50px;
+ position: relative;
+
+ }
+```
+
+html代码
+```html
+
+ 8888
+ 33333333333333333333333333333333333333
+ 333333333333333333333333333333333333333
+ 333333333333333333333333333333333333333
+ 333333333333333333333333333333333333333
+ 333333333333333333333333333333333333333
+ 333333333333333333333333333333333333333
+ 333333333333333333333333333333333333333
+ 333333333333333333333333333333333333333
+ 333333333333333333333333333333333333333
+ 333333333333333333333333333333333333333
+ 333333333333333333333333333333333333333
+ 333333333333333333333333333333333333333
+ 333333333333333333333333333333333333333
+ 333333333333333333333333333333333333333
+ 333333333333333333333333333333333333333
+ 333333333333333333333333333333333333333
+ 333333333333333333333333333333333333333
+ 333333333333333333333333333333333333333
+ 333333333333333333333333333333333333333
+ 333333333333333333333333333333333333333
+ 333333333333333333333333333333333333333
+ 333333333333333333333333333333333333333
+ 333333333333333333333333333333333333333
+ 333333333333333333333333333333333333333
+ 333333333333333333333333333333333333333
+ 333333333333333333333333333333333333333
+ 333333333333333333333333333333333333333
+ ..........
+
+
+
+```
+3. 创建一个悬浮在文字下方的提示框,当鼠标经过的时候展示出来，鼠标移开不显示
+```css
+ .c1 {
+ position: relative;
+ display: inline-block;
+
+ /* 鼠标悬停在这个元素上时，鼠标指针会变成一个手形图标： cursor: pointer; */
+ cursor: pointer;
+ }
+
+ .c1 .c2 {
+ /* 临时隐藏的元素 */
+ visibility: hidden;
+ width: 160px;
+ background-color: #555;
+ color: #fff;
+ text-align: center;
+ border-radius: 6px;
+ padding: 5px;
+ position: absolute;
+ z-index: 1;
+ top:100%; /* 位置在文字下方，距离可以根据需要调整 */
+ left: 50%;
+ margin-left: -80px; /* 提示框宽度的一半，用于水平居中 */
+ opacity: 0; /* 设置元素的不透明度。opacity 属性的值范围从 0 到 1|*/
+ transition: opacity 0.3s;
+ /* 可以根据需要添加更多样式，如阴影、箭头等 */
+
+ }
+
+ .c1:hover .c2 {
+ visibility: visible;
+ opacity: 1; /*不透明*/
+ }
+```
+html代码
+```html
+
+
+```
+
+5. 素材
+```html
+
+
+
+
+ Document
+
+
+
+
+
+
+
+
+
广东深圳宝安区建安一路海雅缤纷城4楼
+
+ `transform:scale(x,y)` 取值：大于1表示放大，小于1表示缩小。不能为百分比。
+ - 位移: translate
+ `transfrom:translate(水平位移，垂直位移)`
+ - 旋转: rotale
+ `tranform:rotale(角度)` 参数解释:transfrom:正值:顺时针；负值:逆时针；
+
+```javascript
+ transform-origin: 水平坐标 垂直坐标;
+
+ transform-origin: 50px 50px;
+
+ transform-origin: center bottom; //旋转时，以盒子底部的中心为坐标原点
+```
+ 案例:扑克牌
+
+我们来看一下 rotate 结合 transform-origin 的用法举例。
+
+代码如下：
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
遥遥领先
+
+
+```
+
+3. 火箭发射
+
+```html
+
+
+
+
+
+ Document
+
+
+
+
+
+
+```
+4. 扑克牌
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+