HTML & CSS 部分

1、流式布局：百分比自适应布局

pc端可以通过设置版心来,完成不同屏幕的适配？

移动端一般采用流式布局(百分比布局)

1. 高度定死,宽度自适应

2. 对于大的轮播图等,宽度100%自适应

3. 对于小图标挥着文本,一般都是固定宽高大小

流式布局的缺点: 对于大屏幕来说,用户体验并不是特别好,有些布局元素会显得很长

解决方案: rem布局(宽高自适应)

经典的流式布局

//1. 左侧固定,右侧自适应

//2. 右侧固定左侧自适应

//3. 两侧固定,中间自适应(圣杯布局)

//4. 等分布局

1和2左侧固定,右侧自适应和右侧固定左侧自适应

　　方法1：flex布局
　　方法2：position绝对定位
　　方法3：bft

　　　　代码解释：overflow: hidden; 触发了bfc，触发了bfc的盒子不与浮动的盒子重叠

　　　　 两边固定中间自适应(圣杯布局)-bfc实现

　　方法4：等分布局

参考链接：https://www.jianshu.com/p/4a6e5162e4ee

2、怪异盒模型

盒模型分为标准盒模型和怪异盒模型，他们的区别在于计算内容区的不同。

参考链接：https://www.cnblogs.com/yky-iris/p/7719895.html

https://blog.csdn.net/weixin_42577379/article/details/104447957