From 9531c6f44d1cb5ad336d3d7ae489fce746988cfa Mon Sep 17 00:00:00 2001 From: Your Name Date: Sun, 20 Oct 2024 22:31:27 +0800 Subject: [PATCH] hfds --- ...56\345\212\250\344\275\234\344\270\232.md" | 556 ++++++++++++++ ...32\344\275\215\344\275\234\344\270\232.md" | 693 ++++++++++++++++++ 2 files changed, 1249 insertions(+) create mode 100644 "\351\273\216\346\254\243\346\254\243/20241016--\346\265\256\345\212\250\347\254\224\350\256\260--\346\265\256\345\212\250\344\275\234\344\270\232.md" create mode 100644 "\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" diff --git "a/\351\273\216\346\254\243\346\254\243/20241016--\346\265\256\345\212\250\347\254\224\350\256\260--\346\265\256\345\212\250\344\275\234\344\270\232.md" "b/\351\273\216\346\254\243\346\254\243/20241016--\346\265\256\345\212\250\347\254\224\350\256\260--\346\265\256\345\212\250\344\275\234\344\270\232.md" new file mode 100644 index 0000000..ca6b0b7 --- /dev/null +++ "b/\351\273\216\346\254\243\346\254\243/20241016--\346\265\256\345\212\250\347\254\224\350\256\260--\346\265\256\345\212\250\344\275\234\344\270\232.md" @@ -0,0 +1,556 @@ +# 作业 布局作业 +## 第一题效果图 +[](./屏幕截图%202024-10-17%20布局作业.png) +## 主要代码 +```CSS + +``` +```html + +
+ +
+
+
  • +
  • +
  • +
  • +
  • + +
  • +
    +
    + + +``` + +## 第二题效果图 +## 主要代码 +[](./屏幕截图%202024-10-20%20浮动2.png) +```CSS + +``` +```html + +
    + +
    +

    +
    + +
    + +``` + + + +# 笔记 +# 标准文档流 + +## 标准文档流的特性 + +**（1）空白折叠现象：** + +无论多少个空格、换行、tab，都会折叠为一个空格。 + +如果我们想让img标签之间没有空隙，必须紧密连接： +``` + +``` + +**（2）高矮不齐，底边对齐：** + +**（3）自动换行，一行写不满，换行写。** + + +## 行内元素和块级元素 +标签分为两种等级： +- 行内元素 +- 块级元素 + +**行内元素和块级元素的区别：**（非常重要） + +行内元素： + +- 与其他行内元素并排； +- 不能设置宽、高。默认的宽度，就是文字的宽度。 + +块级元素： + +- 霸占一行，不能与其他任何元素并列； +- 能接受宽、高。如果不设置宽度，那么宽度将默认变为子元素的高度。 + + +**行内元素和块级元素的分类：** + +标签分类：文本级、容器级。 + +从HTML的角度来讲，标签分为： +- 文本级标签：p、span、a、b、i、u、em。 +- 容器级标签：div、h系列、li、dt、dd。 + +从CSS的角度讲： + +- 行内元素：除了p之外，所有的文本级标签，都是行内元素。p是个文本级，但是个块级元素。 +- 块级元素：所有的容器级标签都是块级元素，还有p标签。 + +![](http://img.smyhvae.com/20170729_1545.png) + +## 行内元素和块级元素的相互转换 + +通过`display`属性将块级元素和行内元素进行相互转换。display即“显示模式”。 + +### 块级元素可以转换为行内元素： + +给一个块级元素（比如div）设置： +``` +display: inline; +``` +这个标签将立即变为行内元素，此时它和一个span无异。inline就是“行内”。也就是说： +- 此时这个div不能设置宽度、高度； +- 此时这个div可以和别人并排了。 + +### 行内元素转换为块级元素： + +给一个行内元素（比如span）设置： +``` +display: block; +``` +这个标签将立即变为块级元素，此时它和一个div无异。block”是“块”的意思。也就是说： +- 此时这个span能够设置宽度、高度 +- 此时这个span必须霸占一行了，别人无法和他并排 +- 如果不设置宽度，将撑满父亲 + +css中一共有三种手段，使一个元素脱离标准文档流： +- （1）浮动 +- （2）绝对定位 +- （3）固定定位 + +# 浮动 +## 浮动的性质 + +现在有两个div，分别设置宽高。我们知道，它们的效果如下： + +![](http://img.smyhvae.com/20170729_1722.png) + +此时，如果给这两个div增加一个浮动属性，比如`float: left;`，效果如下： + +![](http://img.smyhvae.com/20170729_1723.png) + +此时，两个元素并排了，并且两个元素都能够设置宽度、高度了 + +### 性质1：浮动的元素脱标(脱离标准流) + +![](http://img.smyhvae.com/20170729_2028.png) + +在默认情况下，两个div标签是上下进行排列的。现在由于float属性让上图中的第一个`
    `标签出现了浮动，于是这个标签在另外一个层面上进行排列。而第二个`
    `还在自己的层面上遵从标准流进行排列。 + + +![](http://img.smyhvae.com/20180111_2320.png) +上图中，span标签在标准流中，是不能设置宽高的（因为是行内元素）。但是，一旦设置为浮动之后，即使不转成块级元素，也能够设置宽高了。 + +>**所有标签，浮动之后，已经不区分行内、块级了。 + + +### 性质2：浮动的元素互相贴靠 + +![](http://img.smyhvae.com/20170730_1910.gif) +上图显示，3号如果有足够空间，那么就会靠着2号。如果没有足够的空间，那么会靠着1号大哥。如果没有足够的空间靠着1号大哥，3号自己去贴左墙。 + +不过3号自己去贴墙的时候 +![](http://img.smyhvae.com/20170730_1928.gif) +上图显示，3号贴左墙的时候，并不会往1号里面挤。 + +### 性质3：浮动的元素有“字围”效果 +让div浮动，p不浮动。 +![](http://img.smyhvae.com/20170730_2005.png) + +上图中，**div挡住了p，但不会挡住p中的文字**，形成“字围”效果。 + +>**标准流中的文字不会被浮动的盒子遮挡住**。 + +浮动原则：不是一个东西单独浮动，浮动都是一起浮动，要浮动，大家都浮动。** + + +### 性质4：收缩 + +收缩：一个浮动的元素，如果没有设置width，那么将自动收缩为内容的宽度（这点非常像行内元素）。 +![](http://img.smyhvae.com/20170801_1720.png) + +div本身是块级元素，如果不设置width，它会单独霸占整行；但是，设置div浮动后，它会收缩 + +## 浮动的补充（做网站时注意） + +![](http://img.smyhvae.com/20170731_2248.png) + + +上图所示，将para1和para2设置为浮动，它们是div的儿子。此时para1+para2的宽度小于div的宽度。效果如上图所示。可如果设置para1+para2的宽度大于div的宽度，我们会发现，para2掉下来了： + +![](http://img.smyhvae.com/20170731_2252_2.png) + + +## 浮动的清除 + +> 这里所说的清除浮动，指的是清除浮动与浮动之间的影响。 + + +有两个块级元素div，div没有任何属性，每个div里有li，效果如下： +![](http://img.smyhvae.com/20170801_2122.png) + +![](http://img.smyhvae.com/20170801_2137.png) +上图中，我们发现：第二组中的第1个li，去贴靠第一组中的最后一个li了（我们本以为这些li会分成两排）。 + +### 方法1：给浮动元素的祖先元素加高度 + +这个现象的根本原因是：li的**父亲div没有设置高度**，导致这两个div的高度均为0px（我们可以通过网页的审查元素进行查看）。div的高度为零，导致不能给自己浮动的孩子，撑起一个容器。 + +给div设置高度，如果div自己的高度小于孩子的高度，也会出现不正常的现象： + +![](http://img.smyhvae.com/20170801_2152.png) + +父亲大于儿子的高度： +![](http://img.smyhvae.com/20170801_2153.png) + +**如果一个元素要浮动，那么它的祖先元素一定要有高度。** + +**有高度的盒子，才能关住浮动**。 + +只要浮动在一个有高度的盒子中，那么这个浮动就不会影响后面的浮动元素。 +![](http://img.smyhvae.com/20170801_2200.png) + +![](http://img.smyhvae.com/20170801_2201.png) + +### 方法2：clear:both;(不设置高度) +使用`clear:both;`属性： +![](http://img.smyhvae.com/20170801_2233.png) +``` +clear:both; +``` + +>clear就是清除，both指的是左浮动、右浮动都要清除。`clear:both`的意思是：**不允许左侧和右侧有浮动对象。** + +>致命的问题，**它所在的标签，margin属性失效了** + +margin失效的本质原因是：上图中的box1和box2，高度为零。 + +### 方法3：隔墙法 +防止第二个div贴靠到第二个div，我们可以在这两个div中间用一个新的div隔开，然后给这个新的div设置`clear: both;`属性；同时，既然这个新的div无法设置margin属性，我们可以给它设置height，以达到margin的效果（曲线救国）。这便是隔墙法。 + +![](http://img.smyhvae.com/20170802_1109.png) + + +**内墙法：** +![](http://img.smyhvae.com/20170802_1123.png) + +>**一个父亲是不能被浮动的儿子撑出高度的**。 + +（1）我们在一个div里放一个有宽高的p，效果如下：（很简单） + +![](http://img.smyhvae.com/20170802_1716.png) + +（2）可如果在此基础之上，给p设置浮动，却发现父亲div没有高度了： + +![](http://img.smyhvae.com/20170802_1730.png) + +（3）此时，我么可以在div的里面放一个div（作为内墙），就可以让父亲div恢复高度： + +![](http://img.smyhvae.com/20170802_1812.png) + +于是，我们采用内墙法解决前言中的问题： + +![](http://img.smyhvae.com/20170802_1834.png) + +与外墙法相比，内墙法的优势（本质区别）在于：内墙法可以给它所在的家撑出宽度（让box1有高）。即：box1的高度可以自适应内容。 + +而外墙法，虽然一道墙可以把两个div隔开，但是这两个div没有高，也就是说，无法wrap_content。 + + +### 清除浮动方法4：overflow:hidden; + +``` +overflow:hidden; +``` + + +overflow即“溢出”， hidden即“隐藏”。这个属性的意思是“溢出隐藏”。顾名思义：所有溢出边框的内容，都要隐藏掉。 + +![](http://img.smyhvae.com/20170804_1449.png) + + +上图显示，`overflow:hidden;`的本意是清除溢出到盒子外面的文字。但是，前端开发工程师发现了，它能做偏方。如下： + +一个父亲不能被自己浮动的儿子，撑出高度。但是，只要给父亲加上`overflow:hidden`; 那么，父亲就能被儿子撑出高了。 +![](http://img.smyhvae.com/20170804_1920.png) + + +那么对于前言中的例子，我们同样可以使用这一属性： + +![](http://img.smyhvae.com/20170804_1934.png) + +## 浮动清除的总结 +浮动的元素，只能被有高度的盒子关住。 也就是说，如果盒子内部有浮动，这个盒子有高，那么妥妥的，浮动不会互相影响。 + +### 1、加高法 + +```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;`。效果如下： + +![](http://img.smyhvae.com/20170805_2026.png) + + + +于是乎，为了解决微型盒子（即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 0000000..a391432 --- /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 + +
    +
    8888
    + +
    + +``` +## 第二题效果图 +[](./定位2.gif) +## 主要代码 +```CSS + +``` +```html + + +
    + 88888 +
    + +
    +

    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 +

    +
    +
    + +``` +## 第三题效果图 +## 主要代码 +[](./定位3.gif) +```CSS + +``` +```html + +

    这是一个带有悬浮提示这是提示内容的文字。

    + + +``` +## 第四题效果图 +## 主要代码 +[](./定位4.png) +```CSS + +``` +```html + +
    付款图标
    +
    存款图标
    +
    删除图标
    +
    粘贴图标
    +
    笑脸图标
    +
    编辑图标
    + +``` + + +## 第五题效果图 +[](./定位5.png) +## 主要代码 +```CSS + +``` +```html + +
    + +
    + +
      +
    • 【海雅缤纷城】万达影城(深圳海雅广场...)
      • +
    • 单人电影票,可观看2D
      • +
    • ￥35
      • +
    • ￥89
      • +
    • 已售
      • +
    • 225
      • +
    +
    +

    广东深圳宝安区建安一路海雅缤纷城4楼

    +
    + +``` +## 第六题效果图 +[](/定位6.png) +## 主要代码 +```CSS + +``` +```html +
    +``` + +# 笔记 +# 定位 +CSS的定位属性有三种，分别是绝对定位、相对定位、固定定位。 +``` + position: absolute; + + position: relative; + + position: fixed; + +``` + +## 相对定位 + +**相对定位**：让元素相对于自己原来的位置，进行位置调整（可用于盒子的位置微调）。 + +之前学习的背景属性中，是通过如下格式： + +``` + background-position:向右偏移量 向下偏移量; +``` + +但这回的定位属性，是通过如下格式： + +``` + position: relative; + left: 50px; + top: 50px; +``` + +```html + + + + + +
    有生之年
    +
    狭路相逢
    + + + + +``` +效果： + +![](http://img.smyhvae.com/2015- 10-03-css-28.png) + +### 相对定位不脱标 + +**相对定位**：不脱标，老家留坑，**别人不会把它的位置挤走**。 + +### 相对定位的用途 + +如果想做“压盖”效果（把一个div放到另一个div之上），我们一般**不用**相对定位来做。相对定位，就两个作用： + +- （1）微调元素 +- （2）做绝对定位的参考，子绝父相 + +### 相对定位的定位值 + +- left：盒子右移 + +- right：盒子左移 + +- top：盒子下移 + +- bottom：盒子上移 + +>负数表示相反的方向。 + +↘： + +``` + position: relative; + left: 40px; + top: 10px; +``` + +↙： + +``` + position: relative; + right: 100px; + top: 100px; +``` + +↖： + +``` + position: relative; + right: 100px; + bottom: 100px; +``` + +↗： + +``` + position: relative; + left: 200px; + bottom: 200px; + +``` + +## 绝对定位 + +**绝对定位**：定义横纵坐标。原点在父容器的左上角或左下角。横坐标用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) + +**工程应用：** + +绝对定位非常适合用来做“压盖”效果。我们来举个lagou.com上的例子。 + +现在有如下两张图片素材： + +![](http://img.smyhvae.com/20180116_1115.png) + +![](http://img.smyhvae.com/20180116_1116.jpg) + +要求作出如下效果： + +![](http://img.smyhvae.com/20180116_1117.png) + +代码实现如下： + +```html + + + + + Document + + + +
    + +
    + +
    +

    广东深圳宝安区建安一路海雅缤纷城4楼

    +
    + + +``` +![](http://img.smyhvae.com/20180116_1335.png) + +代码解释如下： +- 为了显示“多套餐”那个小图，我们需要用到精灵图。 +- “多套餐”下方黑色背景的文字都是通过“子绝父相”的方式的盖在大海报image的上方的。 + + +### 让绝对定位中的盒子在父亲里居中 + +如果想让一个**标准流中的盒子在父亲里居中**（水平方向看），可以将其设置`margin: 0 auto`属性。 + +可如果盒子是绝对定位的，此时已经脱标了，如果还想让其居中（位于父亲的正中间），可以这样做： + +``` + div { + width: 600px; + height: 60px; + position: absolute; 绝对定位的盒子 + left: 50%; 首先，让左边线居中 + top: 0; + margin-left: -300px; 然后，向左移动宽度（600px）的一半 + } +``` +![](http://img.smyhvae.com/20180116_1356.png) + +> left:50%; margin-left:负的宽度的一半 + + + -- Gitee