From 761c7fc35cf8040d4f09c0024a88f19218f56d41 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=8E=8B=E9=9D=96=E8=8C=B9?= <1848686492@qq.com> Date: Wed, 16 Oct 2024 17:41:27 +0800 Subject: [PATCH 1/2] 'aaaa' --- .../20241016\346\265\256\345\212\250.html" | 72 +++++++++++++++++++ 1 file changed, 72 insertions(+) create mode 100644 "\347\216\213\351\235\226\350\214\271/\346\235\202\344\270\203\346\235\202\345\205\253\347\232\204\344\270\234\350\245\277/20241016\346\265\256\345\212\250.html" diff --git "a/\347\216\213\351\235\226\350\214\271/\346\235\202\344\270\203\346\235\202\345\205\253\347\232\204\344\270\234\350\245\277/20241016\346\265\256\345\212\250.html" "b/\347\216\213\351\235\226\350\214\271/\346\235\202\344\270\203\346\235\202\345\205\253\347\232\204\344\270\234\350\245\277/20241016\346\265\256\345\212\250.html" new file mode 100644 index 0000000..87bbab6 --- /dev/null +++ "b/\347\216\213\351\235\226\350\214\271/\346\235\202\344\270\203\346\235\202\345\205\253\347\232\204\344\270\234\350\245\277/20241016\346\265\256\345\212\250.html" @@ -0,0 +1,72 @@ + + + + + + Document + + + +
log
+
语言选择
+
大广告
+
+
+
+
+
+
+
导航条
+ + \ No newline at end of file -- Gitee From 828dffdf251f58fa6d5ae70dc70e28a1e14f6805 Mon Sep 17 00:00:00 2001 From: Your Name Date: Mon, 21 Oct 2024 00:34:59 +0800 Subject: [PATCH 2/2] 'tijiao' --- ...32\344\275\215\345\261\236\346\200\247.md" | 238 ++++++++++++++++++ .../20241016\346\265\256\345\212\250.html" | 115 ++++++--- .../20241018\345\256\232\344\275\215.html" | 30 +++ .../3.html" | 25 ++ .../4.html" | 60 +++++ .../5.html" | 82 ++++++ .../\345\256\232\344\275\2152.html" | 85 +++++++ 7 files changed, 598 insertions(+), 37 deletions(-) create mode 100644 "\347\216\213\351\235\226\350\214\271/20241018--CSS\345\256\232\344\275\215\345\261\236\346\200\247.md" create mode 100644 "\347\216\213\351\235\226\350\214\271/\346\235\202\344\270\203\346\235\202\345\205\253\347\232\204\344\270\234\350\245\277/20241018\345\256\232\344\275\215.html" create mode 100644 "\347\216\213\351\235\226\350\214\271/\346\235\202\344\270\203\346\235\202\345\205\253\347\232\204\344\270\234\350\245\277/3.html" create mode 100644 "\347\216\213\351\235\226\350\214\271/\346\235\202\344\270\203\346\235\202\345\205\253\347\232\204\344\270\234\350\245\277/4.html" create mode 100644 "\347\216\213\351\235\226\350\214\271/\346\235\202\344\270\203\346\235\202\345\205\253\347\232\204\344\270\234\350\245\277/5.html" create mode 100644 "\347\216\213\351\235\226\350\214\271/\346\235\202\344\270\203\346\235\202\345\205\253\347\232\204\344\270\234\350\245\277/\345\256\232\344\275\2152.html" diff --git "a/\347\216\213\351\235\226\350\214\271/20241018--CSS\345\256\232\344\275\215\345\261\236\346\200\247.md" "b/\347\216\213\351\235\226\350\214\271/20241018--CSS\345\256\232\344\275\215\345\261\236\346\200\247.md" new file mode 100644 index 0000000..e358c1d --- /dev/null +++ "b/\347\216\213\351\235\226\350\214\271/20241018--CSS\345\256\232\344\275\215\345\261\236\346\200\247.md" @@ -0,0 +1,238 @@ +CSS的定位属性有三种，分别是绝对定位、相对定位、固定定位。 + +``` + position: absolute; + + position: relative; + + position: fixed; + +``` + +## 相对定位 +**相对定位**：让元素相对于自己原来的位置，进行位置调整（可用于盒子的位置微调）。 + +相对定位的举例： + +```html + + + + + + + + + Document + + + + + + +
有生之年
+
狭路相逢
+ + + + +``` + +效果： + +![](http://img.smyhvae.com/2015-10-03-css-28.png) + +### 相对定位不脱标 + +**相对定位**：不脱标，老家留坑，**别人不会把它的位置挤走**。 + +也就是说，相对定位的真实位置还在老家，只不过影子出去了，可以到处飘。 + +### 相对定位的用途 + +如果想做“压盖”效果（把一个div放到另一个div之上），我们一般**不用**相对定位来做。相对定位，就两个作用： + +- （1）微调元素 +- （2）做绝对定位的参考，子绝父相 + +### 相对定位的定位值 + +- left：盒子右移 + +- right：盒子左移 + +- top：盒子下移 + +- bottom：盒子上移 + +PS：负数表示相反的方向。 +## 绝对定位 + +**绝对定位**：定义横纵坐标。原点在父容器的左上角或左下角。横坐标用left表示，纵坐标用top或者bottom表示。 + +格式举例如下： + +``` + position: absolute; /*绝对定位*/ + left: 10px; /*横坐标*/ + top/bottom: 20px; /*纵坐标*/ +``` + +### 绝对定位脱标 + +**绝对定位的盒子脱离了标准文档流。** + +所以，所有的标准文档流的性质，绝对定位之后都不遵守了。 + +绝对定位之后，标签就不区分所谓的行内元素、块级元素了，不需要`display:block`就可以设置宽、高了。 + +### 绝对定位的参考点（重要） + +（1）如果用**top描述**，那么参考点就是**页面的左上角**，而不是浏览器的左上角： + +![](http://img.smyhvae.com/20180115_2120.png) + +（2）如果用**bottom描述**，那么参考点就是**浏览器首屏窗口尺寸**（好好理解“首屏”二字），对应的页面的左下角： + +![](http://img.smyhvae.com/20180115_2121.png) + +为了理解“**首屏**”二字的含义，我们来看一下动态图： + +![](https://img.smyhvae.com/20180115_2200.gif) + +问题： + +![](http://img.smyhvae.com/20180115_2131.png) + +答案： + +用bottom的定位的时候，参考的是浏览器首屏大小对应的页面左下角。 + +![](http://img.smyhvae.com/20180115_2132.png) + +### 以盒子为参考点 + +一个绝对定位的元素，如果父辈元素中也出现了已定位（无论是绝对定位、相对定位，还是固定定位）的元素，那么将以父辈这个元素，为参考点。 + +如下：（子绝父相） + +![](http://img.smyhvae.com/20180115_2210.png) + +以下几点需要注意。 + +（1） 要听最近的已经定位的祖先元素的，不一定是父亲，可能是爷爷： + +``` +
相对定位 +
没有定位 +

绝对定位，将以box1为参考，因为box2没有定位，box1就是最近的父辈元素 +
+
+ +``` + +再比如： + +``` +
相对定位 +
相对定位 +

绝对定位，将以box2为参考，因为box2是自己最近的父辈元素 +
+
+``` + +（2）不一定是相对定位，任何定位，都可以作为儿子的参考点： + +子绝父绝、**子绝父相**、子绝父固，都是可以给儿子定位的。但是在工程上，如果子绝、父绝，没有一个盒子在标准流里面了，所以页面就不稳固，没有任何实战用途。 + +**工程应用：** + +“**子绝父相**”有意义：这样可以保证父亲没有脱标，儿子脱标在父亲的范围里面移动。于是，工程上经常这样做： + +> 父亲浮动，设置相对定位（零偏移），然后让儿子绝对定位一定的距离。 + +（3）绝对定位的儿子，无视参考的那个盒子的padding： + +下图中，绿色部分是父亲div的padding，蓝色部分p是div的内容区域。此时，如果div相对定位，p绝对定位，那么， +p将无视父亲的padding，在border内侧为参考点，进行定位： + +![](http://img.smyhvae.com/20180116_0812.png) +### 让绝对定位中的盒子在父亲里居中 + +我们知道，如果想让一个**标准流中的盒子在父亲里居中**（水平方向看），可以将其设置`margin: 0 auto`属性。 + +可如果盒子是绝对定位的，此时已经脱标了，如果还想让其居中（位于父亲的正中间），可以这样做： + +``` + div { + width: 600px; + height: 60px; + position: absolute; 绝对定位的盒子 + left: 50%; 首先，让左边线居中 + top: 0; + margin-left: -300px; 然后，向左移动宽度（600px）的一半 + } +``` + +如上方代码所示，我们先让这个宽度为600px的盒子，左边线居中，然后向左移动宽度（600px）的一半，就达到效果了。 + +![](http://img.smyhvae.com/20180116_1356.png) + +我们可以总结成一个公式： + +> left:50%; margin-left:负的宽度的一半 + +## 固定定位 + +**固定定位**：就是相对浏览器窗口进行定位。无论页面如何滚动，这个盒子显示的位置不变。 + +备注：IE6不兼容。 + +**用途1**：网页右下角的“返回到顶部” + +**用途2：**顶部导航条 +### 5、z-index属性： + +**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`来控制层级数。 diff --git "a/\347\216\213\351\235\226\350\214\271/\346\235\202\344\270\203\346\235\202\345\205\253\347\232\204\344\270\234\350\245\277/20241016\346\265\256\345\212\250.html" "b/\347\216\213\351\235\226\350\214\271/\346\235\202\344\270\203\346\235\202\345\205\253\347\232\204\344\270\234\350\245\277/20241016\346\265\256\345\212\250.html" index 87bbab6..4adea58 100644 --- "a/\347\216\213\351\235\226\350\214\271/\346\235\202\344\270\203\346\235\202\345\205\253\347\232\204\344\270\234\350\245\277/20241016\346\265\256\345\212\250.html" +++ "b/\347\216\213\351\235\226\350\214\271/\346\235\202\344\270\203\346\235\202\345\205\253\347\232\204\344\270\234\350\245\277/20241016\346\265\256\345\212\250.html" @@ -5,68 +5,109 @@ Document -
log
-
语言选择
-
大广告
-
-
-
-
-
-
-
导航条
+
+
logo
+
语言选择
+
导航条
+
+
+
大广告
+
+
+
+
+
+
+
+ \ No newline at end of file diff --git "a/\347\216\213\351\235\226\350\214\271/\346\235\202\344\270\203\346\235\202\345\205\253\347\232\204\344\270\234\350\245\277/20241018\345\256\232\344\275\215.html" "b/\347\216\213\351\235\226\350\214\271/\346\235\202\344\270\203\346\235\202\345\205\253\347\232\204\344\270\234\350\245\277/20241018\345\256\232\344\275\215.html" new file mode 100644 index 0000000..3727a1d --- /dev/null +++ "b/\347\216\213\351\235\226\350\214\271/\346\235\202\344\270\203\346\235\202\345\205\253\347\232\204\344\270\234\350\245\277/20241018\345\256\232\344\275\215.html" @@ -0,0 +1,30 @@ + + + + + + Document + + + +
8888 +
+ + \ No newline at end of file diff --git "a/\347\216\213\351\235\226\350\214\271/\346\235\202\344\270\203\346\235\202\345\205\253\347\232\204\344\270\234\350\245\277/3.html" "b/\347\216\213\351\235\226\350\214\271/\346\235\202\344\270\203\346\235\202\345\205\253\347\232\204\344\270\234\350\245\277/3.html" new file mode 100644 index 0000000..9c9af63 --- /dev/null +++ "b/\347\216\213\351\235\226\350\214\271/\346\235\202\344\270\203\346\235\202\345\205\253\347\232\204\344\270\234\350\245\277/3.html" @@ -0,0 +1,25 @@ + + + + + + Document + + + +
点我
+
俺是文字提示
+ + \ No newline at end of file diff --git "a/\347\216\213\351\235\226\350\214\271/\346\235\202\344\270\203\346\235\202\345\205\253\347\232\204\344\270\234\350\245\277/4.html" "b/\347\216\213\351\235\226\350\214\271/\346\235\202\344\270\203\346\235\202\345\205\253\347\232\204\344\270\234\350\245\277/4.html" new file mode 100644 index 0000000..6c40b9f --- /dev/null +++ "b/\347\216\213\351\235\226\350\214\271/\346\235\202\344\270\203\346\235\202\345\205\253\347\232\204\344\270\234\350\245\277/4.html" @@ -0,0 +1,60 @@ + + + + + + Document + + + + + + \ No newline at end of file diff --git "a/\347\216\213\351\235\226\350\214\271/\346\235\202\344\270\203\346\235\202\345\205\253\347\232\204\344\270\234\350\245\277/5.html" "b/\347\216\213\351\235\226\350\214\271/\346\235\202\344\270\203\346\235\202\345\205\253\347\232\204\344\270\234\350\245\277/5.html" new file mode 100644 index 0000000..ad8ea9c --- /dev/null +++ "b/\347\216\213\351\235\226\350\214\271/\346\235\202\344\270\203\346\235\202\345\205\253\347\232\204\344\270\234\350\245\277/5.html" @@ -0,0 +1,82 @@ + + + + + + Document + + + +
+
+ +
+
广东深圳宝安区建安一路海雅缤纷城4楼
+
+
+

【海雅缤纷城】万达影城（深圳海雅广场）

+
+ 单人电影票，可观看2D +
+ ￥35 ￥80 + 已售225 +
+
+
+
+ + \ No newline at end of file diff --git "a/\347\216\213\351\235\226\350\214\271/\346\235\202\344\270\203\346\235\202\345\205\253\347\232\204\344\270\234\350\245\277/\345\256\232\344\275\2152.html" "b/\347\216\213\351\235\226\350\214\271/\346\235\202\344\270\203\346\235\202\345\205\253\347\232\204\344\270\234\350\245\277/\345\256\232\344\275\2152.html" new file mode 100644 index 0000000..a7db128 --- /dev/null +++ "b/\347\216\213\351\235\226\350\214\271/\346\235\202\344\270\203\346\235\202\345\205\253\347\232\204\344\270\234\350\245\277/\345\256\232\344\275\2152.html" @@ -0,0 +1,85 @@ + + + + + + Document + + + +
8888
+
+ 333333333333333333333333333333333333333333333333333333333333 + 333333333333333333333333333333333333333333333333333333333333 + 333333333333333333333333333333333333333333333333333333333333 + 333333333333333333333333333333333333333333333333333333333333 + 333333333333333333333333333333333333333333333333333333333333 + 333333333333333333333333333333333333333333333333333333333333 + 333333333333333333333333333333333333333333333333333333333333 + 333333333333333333333333333333333333333333333333333333333333 + 333333333333333333333333333333333333333333333333333333333333 + 333333333333333333333333333333333333333333333333333333333333 + 333333333333333333333333333333333333333333333333333333333333 + 333333333333333333333333333333333333333333333333333333333333 + 333333333333333333333333333333333333333333333333333333333333 + 333333333333333333333333333333333333333333333333333333333333 + 333333333333333333333333333333333333333333333333333333333333 + 333333333333333333333333333333333333333333333333333333333333 + 333333333333333333333333333333333333333333333333333333333333 + 333333333333333333333333333333333333333333333333333333333333 + 333333333333333333333333333333333333333333333333333333333333 + 333333333333333333333333333333333333333333333333333333333333 + 333333333333333333333333333333333333333333333333333333333333 + 333333333333333333333333333333333333333333333333333333333333 + 333333333333333333333333333333333333333333333333333333333333 + 333333333333333333333333333333333333333333333333333333333333 + 333333333333333333333333333333333333333333333333333333333333 + 333333333333333333333333333333333333333333333333333333333333 + 333333333333333333333333333333333333333333333333333333333333 + 333333333333333333333333333333333333333333333333333333333333 + 333333333333333333333333333333333333333333333333333333333333 + 333333333333333333333333333333333333333333333333333333333333 + 333333333333333333333333333333333333333333333333333333333333 + 333333333333333333333333333333333333333333333333333333333333 + 333333333333333333333333333333333333333333333333333333333333 + 333333333333333333333333333333333333333333333333333333333333 + 333333333333333333333333333333333333333333333333333333333333 + 333333333333333333333333333333333333333333333333333333333333 + 333333333333333333333333333333333333333333333333333333333333 + 333333333333333333333333333333333333333333333333333333333333 + 333333333333333333333333333333333333333333333333333333333333 + 333333333333333333333333333333333333333333333333333333333333 + 333333333333333333333333333333333333333333333333333333333333 + 333333333333333333333333333333333333333333333333333333333333 + 333333333333333333333333333333333333333333333333333333333333 + 333333333333333333333333333333333333333333333333333333333333 + 333333333333333333333333333333333333333333333333333333333333 + 333333333333333333333333333333333333333333333333333333333333 + 333333333333333333333333333333333333333333333333333333333333 + 333333333333333333333333333333333333333333333333333333333333 + 333333333333333333333333333333333333333333333333333333333333 + 333333333333333333333333333333333333333333333333333333333333 + 333333333333333333333333333333333333333333333333333333333333 + 333333333333333333333333333333333333333333333333333333333333 + 333333333333333333333333333333333333333333333333333333333333 + 333333333333333333333333333333333333333333333333333333333333 + 333333333333333333333333333333333333333333333333333333333333 +
+ + \ No newline at end of file -- Gitee