没有弹性盒，如何玩转移动端？

没有弹性盒，如何玩转移动端？
一说到移动端布局，大部分同学会想到用rem，不错rem确实可以解决各种问题，哪怕宽度你都写固定值都没有问题，但是宽度的适配使用大量的数值，是不是算起来有点头疼呢？还有一部分同学会大面积使用弹性盒，宽度的适配用弹性盒真的是太香了，可是弹性盒它并不能兼容所有的设备，那没有弹性盒是不是就没有办法了呢？其实并不是的，我这里提供几个常用布局方式，就算是没有弹性盒，也可以轻松玩转移动端！

1、上下固定，中间弹性

上下固定中间弹性的布局在移动端随处可见，因为手机端大多数都会存在上下两个导航栏。用弹性盒的方法我在此就不多说了，我们看看使用定位的方式如何进行布局？我们可以把头部和脚部的板块都固定定位在内容区的内边距上面，因为固定定位不占位，所以内容区占满了整个屏幕。这里需要注意的是，头部和脚部一定记得给宽度，因为固定定位的盒子宽度是自适应内容状态，如果没有内容他就是零了。
```
<style>  
*{padding: 0;margin: 0;}
html,body{height: 100%;}
header{height: 44px;background: pink;position: fixed;top: 0;width: 100%;}
main{height: 100%;box-sizing: border-box;padding-top: 44px;padding-bottom: 44px;background: #ffc;overflow:auto;}
footer{height: 44px;background: pink;position: fixed;bottom: 0;width: 100%;}
style>

<body>
   <header>header>
   <main>main>
   <footer>footer>
body>
1
2
3
4
5
6
7
8
9
10
11
12
13
```
2、左固定，右弹性

左固定右弹性在移动端展示内容部分也会经常遇到，如下图均是。我们可以使用浮动或者定位来实现：

浮动：

左边固定只需要把固定宽度写好就好，右边弹性宽度一定不要写，然后加上溢出隐藏，利用BFC的原理可以实现弹性效果，而且不被左边的盒子覆盖，简直不要太完美。
```
<style> 
.left{width: 200px;height: 200px;background: #f6c;float: left;}
 .right{overflow: hidden;height: 200px;background: yellow;}
style>
1
2
3
4
```
```
<div class="left">div>
<div class="right">div>
1
2
```
定位：

利用定位的方式也是不错的可以把左边定位到右边的内边距上面，

右边的盒子可以不写宽度，添加左内边距，

如果右边的盒子书写宽度百分百，那你一定要记得转换怪异盒模型。
```
<style>
.left{width: 200px;height: 200px;background: #f6c;position: absolute;}
.right{height: 200px;background: yellow;padding-left: 200px;}
style>
1
2
3
4
```
```
<div class="left">div>
<div class="right">div>
1
2
```
3、左右固定，中间弹性

左右固定中间弹性的布局方式，一般会在头部使用的比较多一点。

浮动：

左右固定，如果选用浮动的方法，一定要注意html结构的书写顺序，需要先写左右，后写中间，如果把中间写在了右的前面，那你右面的盒子就浮不上去了，因为中间的盒子还在标准流里，他是独占一行的，所以一定要记得把右放在前面。
```
<style>
.left{width: 200px;height: 200px;background: #f6c;float: left;}
.right{width:200px;height: 200px;background: #f60;float: right;}
.center{height: 200px; background: yellow; overflow: hidden;}
style>

1
2
3
4
5
6
```
```
  <div class="left">div>
  <div class="right">div> 
  <div class="center">div> 
1
2
3
```
定位：

用定位的方法实现左右固定，中间弹性就比较简单了，思路是一样的，把他俩分别定位到中间盒子的左右内边距上面就可以了，记得添加坐标哦，不然他们会脱标留原位的！
```
<style>
.left{width: 200px;height: 200px;background: #f6c;position: absolute; top: 0;left: 0;}
.right{width:200px;height: 200px;background: #f60;position: absolute;top: 0;right: 0;}
.center{height: 200px; background: yellow;  padding-left: 200px;padding-right: 200px;}
style>

1
2
3
4
5
6
```
```
  <div class="left">div>
  <div class="right">div>
  <div class="center">div>
1
2
3
```
相关阅读:
torch.cuda.is_available() 解决方案
 使用 Python 创建您自己的NFT集合（一）自己动手制作中秋月饼上链送给亲朋好友
 架构设计流程：架构到底是指什么？
2022牛客暑期多校训练营3(总结+补题)
23-职位分类展示平台响应式网页模板{HTML JS CSS）
海量数据存储ClickHouse
绿肥红瘦专栏数据的爬取
 湖北大学计算机考研资料汇总
 c++ 继承
 Android中单例模式正确实现方式
原文地址：https://blog.csdn.net/sdasadasds/article/details/127984901

1、上下固定，中间弹性

2、左固定，右弹性

浮动：

定位：

3、左右固定，中间弹性

浮动：

定位：