实现效果： 左右栏定宽，中间栏自适应 (有时候是固定高度)
1 . 绝对定位布局：position + margin
<div class="container">
<div class="left">左</div>
<div class="right">右</div>
<div class="main">中</div>
</div>
body,html{
height: 100%;
padding:;
margin:;
overflow: hidden;
}
/*左右进行绝对定位*/
.left,.right{
position: absolute;
height:100%;
top:;
}
.left{
left:;
width: 100px;
background: red;
}
.right{
right:;
width: 100px;
background: blue;
}
/*中间用margin空出左右元素所占的空间*/
.main{
height:100%;
margin: 0 100px 100px 0; /* 也可让 position的 left和right分别为100px;*/
background: yellow;
}
缺点: 如果中间栏含有最小宽度限制，或是含有宽度的内部元素，当浏览器宽度小到一定程度，会发生层重叠的情况
2 . 浮动布局： float + margin
方法类似 position, 改成 float: left 和 float: right即可
.left {
float: left;
}
.right {
float: right;
}
.main {
margin: 0 100px; // 如不设置margin, main部分将会占满整个父容器
}
3 . flex布局
.container {
display: flex;
}
.main {
flex:;
}
4 . table 布局
原理： 将父容器当作表格，子容器当作表格的单元格。
.container {
display: table;
}
.container > div {
display: table-cell;
}
5 . grid网格布局
父容器设置为网格，网格的子元素行高rows为100px; 网格子元素列宽分别为 100px auto 100px;
.container {
display: grid;
grid-template-rows: 100px;
grid-template-columns: 100px auto 100px;
}
6. 圣杯布局 （想象成圣杯的主体和两只耳朵）
圣杯布局是2006年提出的布局模型概念，在国内由淘宝UED工程师改进并传播， 布局要求：
1 ） 三列布局， 中间宽度自适应，两边定宽
2 ） 中间栏要在浏览器中优先渲染
3 ） 允许任意列的高度最高
<div class="container">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
.container {
padding: 0 150px 0 100px;
}
.left, .main, .right {
position: relative;
min-height: 100px;
float: left;
}
.left {
left: -100px;
margin-left: -100%;
background: green;
width: 100px;
}
.right {
right: -150px;
margin-left: -150px;
background-color: red;
width: 100px;
}
.main {
background-color: blue;
width: 100%;
}
思路： 圣杯布局用到了浮动float、负边距、相对定位relative，不添加额外标签
1 . 父容器设置内边距，供两边子容器占位 padding: 0 100px 0 150px;
2 . 所有子容器向左浮动 float: left
3 . 设置左右子容器的负外边距，使所有子容器同一行 .left { margin-left: -100%} .right {margin-left: -150px;} , 此时会有部分重叠
4 . 使用相对定位分别移动左右子容器到父容器的左右内边距留白部分 position: relative; left: -100px; / position: relative; right: -150px;
7. 双飞翼布局(想象成鸟的身体和两只翅膀)
1 ) 双飞翼布局是对圣杯布局基础上进行修改 ， 将原本的内边距padding 留白改成在自适应栏内部新增DOM节点， 并设置其外边距margin
2 ) 然后再对左右栏的左外边距设置为负值。比圣杯布局少了position相对定位
3 ) 相比圣杯布局， 中间栏内容不会被“遮挡”, 圣杯布局使用中间栏的padding给左右栏占位，双飞翼布局使用中间栏子元素的margin给左右栏占位
<div class="container">
<div class="main">
<div class="content">main</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
.left, .main, .right {
float: left;
min-height: 100px;
text-align: center;
}
.left {
margin-left: -100%;
background: green;
width: 100px;
}
.right {
margin-left: -150px;
background-color: red;
width: 150px;
}
.main {
background-color: blue;
width: 100%;
}
.content{
margin: 0 150px 0 100px;
}
基本思路已经理清楚，可以在实践中看效果。