web知识学习
flex布局
flex布局是一个弹性布局，为盒状模型提供最大的灵活性。
自己在使用的时候，就本次的开发的过程来说，每一个content都是一个describe和一个img，将两者都是用盒子包起来，【注意有时候就不要使用div包装img，因为会造成img的div被其他的样式污染】，img和describe是水平在content中且在垂直方向上居中的，所以我们就可以使用flex布局，然后设置flex-direction属性决定主轴的方向属性决定主轴的方向为水平row，（默认其实就是row，而且是起点是在左端，所以如果想要内部的img和describe离左边一定的距离，就要设置最左边元素的的padding-left
或者是margin-left，具体的情况按照实际来，因为有时候margin会造成凹陷。）又因为img和describe是在垂直方向上是居中的，使用align-items属性定义在主轴方向的交叉轴上是如何对齐的。
属性有：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZAzNWMJ0-1635734239029)(C:\Users\l50019093\AppData\Roaming\Typora\typora-user-images\image-20211030102553013.png)]
因为我的主轴是水平方向的，所以我需要设值aline-items是center，来保证水平排列的items在content中是垂直方向上居中的。此时就要思考一个问题，就是水平的item如果没有设置height时，是如何进行垂直方向上居中的，是按照内容的大小吗?
将网页中格式统一的使用一个相同的格式div封装起来，统一设置样式
在不同的大的div中如果有自己特殊的样式，就用.xxxdiv .yy来实现，统一的样式在.yy中统一设置，每一个content自己的使用.xxxdiv .yy单独进行设置，
使用定位实现图片的叠加
相对定位 relatived
开启相对定位后，只会改变自身的位置，并不影响他周围的div，如果我们使用的margin属性，比如改变了div2，div3的位置也会进行改变。
注意：使用相对定位会使得这个元素的层级提升，【也就是说我想实现的图片的叠加就会实现，层级提升可以覆盖其他元素】
【【这里就可以确定将二维码图片的修饰图片用一个div包，将这个大的div设置为相对定位，这样层级提升了，不会影响下面二维码的位置，二维码的margin-top设置好了，位置就会固定，无论修饰图片的div的高度是多少，不会影响二维码图片的margin-top。】】
相对定位的特点
-
当元素开启相对定位以后，如果不设置偏移量元素，则元素不会发生任何变化（这里注意，不仅仅是位置）
-
相对定位是参照于元素在文档流中的位置进行定位的（可以理解为相对于自身原始位置）
-
相对定位会提升元素的层级（表现为可以覆盖其他元素）后面设置的相对定位的元素会覆盖前面设置相对定位的元素。
-
相对定位不会改变元素的性质：块还是块，行内还是行内
绝对定位
绝对定位是相对于其包含块【这个包含块是离当前元素最近的开启了定位的祖先快，如果没有开启定位的，则是以根元素html进行定位的】进行定位的，相对定位是相对于原来在文本流中自身的位置进行定位的。
设置了绝对定位会从文档流中进行脱离
绝对定位的特点
- 开启绝对定位后，如果不设置偏移量，元素的位置不会发生变化
- 开启绝对定位后，元素会从文档流中脱离
- 绝对定位会改变元素的性质：行内变成块，块的宽高被内容撑开（与相对定位相反）
- 绝对定位会使元素提升一个层级
- 绝对定位元素是相对于其包含块进行定位的（与相对定位不同）
实现网页内容大小随浏览器窗口大小改变
响应和自适应
方法： html 使用单位：vw ； 页面宽高、字体 使用单位：rem
提示：如果页面原来定义时定义的是px，我们并不想手动进行px转换rem，可以定义函数进行， 使用scss编译， 此时需要安装支持scss的插件，【具体scss使用查阅资料】
$base_width: 1920;
$base_fontSize: 96;
@function rem($px){
@return $px / $base_fontSize * 1rem;
}
本次的开发需求是： 在1920 宽的浏览器 所以base_width是1920 ，尝试得fontsize是96， 所以1rem = 96 px ，那么其他的px的函数转换就是 ：$px / $base_fontSize * 1rem 。
因为html的大小是vw，我们来计算一下： 1920 是100vw 96 就是5vw 所以：
html {
font-size: 5vw;
}
