20231009-学习笔记

使用JS中的fetch函数进行网络请求

const fullUrl = 'http://example.com/api/data';

fetch(fullUrl)
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not OK');
    }
    return response.text();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

发起多个请求

const urls = [
  'http://example.com/api/data1',
  'http://example.com/api/data2',
  'http://example.com/api/data3'
];

const requests = urls.map(url => fetch(url)); // 发起多个fetch请求并获取请求的Promise对象

Promise.all(requests)
  .then(responses => {
    // 在这里处理每个请求的响应
    return Promise.all(responses.map(response => response.text()));
  })
  .then(dataArray => {
    // 在这里处理每个请求的数据
    console.log(dataArray);
    // 执行后续逻辑
  })
  .catch(error => {
    console.error('Error:', error);
  });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

盒子模型

盒子模型
margin：外边距
padding：内边距
border：边框
content：内容

border-width：10px 边框的粗细
border-style：solid 实线 dashed 虚线 dotted 点线 边框的样式
border-color：red 边框的颜色
border：1px solid red 边框的复合写法 没有顺序
border-collapse：collapse 相邻的边框合并在一起

padding：10px 20px 30px 40px 上右下左

display：inline-block 行内块元素
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

外边距典型应用-让块级盒子水平居中

必须满足两个条件：
①盒子必须指定了宽度（width）
②盒子左右的外边距都设置为auto
常用写法：margin:0 auto;

行内元素或者行内块元素水平居中给其父元素添加text-align:center即可
1
2
3
4
5
6

嵌套块元素垂直外边距塌陷问题

对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，
此时父元素会塌陷（合并）较大的外边距值

解决方案：
①可以为父元素定义上边框border:1px solid transparent;
②可以为父元素定义上内边距padding:1px;
③可以为父元素添加overflow:hidden;
1
2
3
4
5
6
7

清除内外边距

*{
	margin: 0;
	padding: 0;
}

注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。
但是转换为块级和行内块元素就可以了
1
2
3
4
5
6
7

PS基本操作

文件->打开：可以打开我们要测量的图片
Ctrl+R：可以打开标尺，或者 视图->标尺
右击标尺，把里面的单位改为像素
Ctrl+加号（+）可以放大视图，Ctrl+减号（-）可以缩小视图
按住空格键，鼠标可以变成小手，拖动PS视图
用选区拖动 可以测量大小 Ctrl+D可以取消选区 或者在旁边空白处点击一下也可以取消选区

圆角、阴影

圆角边框
border-radius:length;

盒子阴影
box-shadow:h-shadow v-shadow blur spread color inset;
h-shadow：必需，水平阴影的位置，允许负值
v-shadow：必需，垂直阴影的位置，允许负值
blur：可选，模糊距离
spread：可选，阴影的尺寸
color：可选，阴影的颜色
inset：可选，将外部阴影（outset）改为内部阴影

文字阴影
text-shadow:h-shadow v-shadow blur color;
1
2
3
4
5
6
7
8
9
10
11
12
13
14

浮动

浮动最典型的应用：可以让多个块级元素在一行内排列显示

网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

float:none|left|right;

浮动特性：
脱离标准普通流的控制（浮）移动到指定位置（动），（俗称脱标）
浮动的盒子不在保留原先的位置
通俗点的意思就是 原本两个div是并列的 当给第一个div加上浮动以后 第二个div就会顶替第一个div 
而第一个div会漂浮在原来位置的上面

注意：
浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行
任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后都具有行内块元素相似的特性
如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定
为了约束浮动元素位置，网页布局一般采取的策略是：先用标准流的父元素排列上下位置，之后内部子元素采取
浮动排列左右位置
浮动的盒子只会影响浮动后面的标准流，不会影响前面的标准流

清除浮动原因：由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，
就会影响下面的标准流盒子。

清除浮动的本质：清除浮动元素脱离标准流造成的影响

清除浮动的策略：闭合浮动，只让浮动在父盒子内部影响，不影响盒子外面的其他盒子

清除浮动方法：
①额外标签法：隔墙法，就是在最后一个浮动的子元素后面添加一个额外标签（必需是块级元素，
比如：<div style="clear:both">div>），不常用
clear:left|right|both;
②给父元素添加overflow属性，overflow:hidden|auto|scroll;
③使用after伪元素
.clearfix:after {
      content: "";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
    }

.clearfix {
  /*IE6、7专有*/
  *zoom: 1;
}
④使用双伪元素
.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  /*IE6、7专有*/
  *zoom: 1;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60