例子
1、利用定位实现两侧固定中间自适应
1.1）父盒子设置左右 padding 值
1.2）给左右盒子的 width 设置父盒子的 padding 值,然后分别定位到 padding 处.
1.3）中间盒子自适应
其原理是使用padding预留位置，让后使用absolate布局，将左右盒子使用left和right定位到左右面。子盒子的width与父盒子相同。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.father {
height: 400px;
background-color: pink;
position: relative;
padding: 0 200px;
}
.left,.right {
width: 200px;
height: 300px;
background-color: yellow;
position: absolute;
top: 0;
}
.left {
left: 0;
}
.right {
right: 0;
}
.center {
background-color: blue;
height: 350px;
}
</style>
</head>
<body>
<div class="father">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
</html>
2. 利用百分比和relative布局 float
2.1 左盒子 右盒子 中间盒子的布局都设为 relative相对布局
2.2 所有盒子的宽度都设为百分比
2.3 所有盒子都float:left
原理使用float：可以自动飘向一边
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.father {
height: 400px;
background-color: pink;
}
.left,.right {
width: 20%;
height: 300px;
background-color: yellow;
position: relative;
}
.left {
float: left;
display: inline-block;
}
.right {
display: inline-block;
float: left;
}
.center {
background-color: blue;
float: left;
width: 60%;
height: 350px;
}
</style>
</head>
<body>
<div class="father">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
</html>
3. 利用flex进行布局
3.1 将父元素设为flex 布局
3.2 设定左右盒子元素的宽度
3.3 中间盒子 flex:1
原理：flex布局的子元素不会自动换行,和使用flex:1 来占用父元素剩余空间。
flex:1
- flex: 1; === flex: 1 1 0;
- flex:1: === flex-grow: 1; flex-shrink: 1; flex-basis: 0;
flex-basis
CSS 属性 flex-basis 指定了 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing 改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的尺寸。
flex-grow
用来“瓜分”父项的“剩余空间”。（当父元素的宽度大于所有子元素的宽度的和时（即父元素会有剩余空间），子元素如何索取分配父元素的剩余空间。值越大，索取的越厉害。）
flex-shrink
用来“吸收”超出的空间（父元素的宽度小于所有子元素的宽度的和时（即子元素会超出父元素），子元素如何缩小自己的宽度的。值越大，减小的越厉害。）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.father {
height: 400px;
background-color: pink;
display: flex;
}
.left,.right {
width: 20%;
height: 300px;
background-color: yellow;
}
.center {
background-color: blue;
height: 350px;
flex: 1;
}
</style>
</head>
<body>
<div class="father">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
</html>