目前常用的css布局方式有如下几种：
- 静态布局
- 自适应布局
- 流式布局（别名：百分比布局）
- 响应式布局：媒体查询
- 流式布局（rem/em flex布局）
一.静态布局
最传统的布局方式，给所有的盒子模型都设置具体的px尺寸
优点：布局简单，没有浏览器的兼容问题
缺点：pc端和移动端不能通用，需要重新写一套来针对移动端
二.自适应布局
自适应就是让同一个页面自动适应不同大小的设备，从而解决为不同设备提供不同版本的页面问题。
自适应布局的布局方式：
1.高度自适应
<style>
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.left {
position: absolute;
height: 200px;
width: 100%;
background-color: pink;
}
.main {
position: absolute;
width: 100%;
top: 200px;
bottom: 200px;
background: lightblue;
}
.right {
position: absolute;
height: 200px;
width: 100%;
/* 别忘了设置bottom */
bottom: 0;
background: lightsalmon;
}
</style>
<body>
<!-- 给三个div都设置固定定位，需要自适应的div top和bottom设置为上下两个div的高度 -->
<div class="left">200px</div>
<div class="main">自适应</div>
<div class="right">200px</div>
</body>
image.png
2.宽度自适应
- 利用绝对定位
