标签：bfc https 布局 流式 适应 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

标签：bfc,https,布局,流式,适应,HTML,固定,部分,CSS
来源： https://www.cnblogs.com/zhainverer/p/15798493.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。