自适应布局： absolute ，前，后

一 、【自适应布局】

同一个页面自适应不同大小的设备。宽度自适应，高度自适应，实现的方式很多。

1. 高度自适应：注意是absolute+bottom [+top] ,最后一个需要写上bottom：0

//自适应高：
//实现的具体是通过absolute +自适应高:auto设置top【上】 bottom 【下】

2. 宽度自适应

第一种：利用absolute

 然后在通过全都是行内元素，一个左浮动，一个右浮动，中间的是相对定位。高度都是100%

// body 与html默认是没有高度的。  不然会造成高度撑不起来
*{padding:0;margin:0;}
html, body{ height: 100%; }

 第二种：利用float 【都float】+ margin-left[与margin-right]

自适应的div需要用父元素包起来 ， 且需要放在left与right的前面。

需要父元素包起来：因为100%，注意自适应的高度也得写height。

// body html需要设置高度
body,
html{height:100%;}

.aMain{width:100%;height:100%; float:left; }
.zsyDiv{margin:0 200px; height:100%; background-color:#06F; }

.leftDiv,
.rightDiv{height:100%;width:200px;background-color:#90C;float:left;}

.leftDiv{margin-left:-100%;}
.rightDiv{margin-left:-200px;}

　第三种：利用浮动【简单】

注意自适应的div在最后面，且自适应的div不用写100%，其他的写上宽度。

详细的资料：https://www.php.cn/toutiao-410903.html 

参考自：https://m.php.cn/article/410913.html