方法一--float浮动
HTML代码：
<div class="big">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>
CSS代码：
.big{
clear: both;
}
.left{
width: 20%;
height: 300px;
background-color: #ffe4e1;
float: left;
}
.right{
width: 30%;
height: 300px;
background-color: #e6e6fa;
float: right;
}
.center{
margin-left: 20%;
margin-right: 30%;
height: 300px;
background-color: #f0fff0;
}
左右盒子定宽，中间自适应
注意事项：
为了实现三栏布局，使左右两个盒子脱离了标准流，所以在html中要先写左右两个盒子的代码。由于左右两个盒子脱离了标准流，所以要为父元素清除浮动，方式对其兄弟元素产生影响。
方法二--position
HTML代码：
<div class="big">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>
CSS代码：
.big{
position: relative;
}
.left{
width: 20%;
height: 300px;
background-color: #ffe4e1;
position: absolute;
left: 0;
}
.right{
width: 30%;
height: 300px;
background-color: #e6e6fa;
position: absolute;
right: 0;
}
.center{
height: 300px;
background-color: #f0fff0;
position: absolute;
left: 20%;
right: 30%;
}
注意事项：
使用position进行定位时，先对父元素设置relative相对定位，再对三个子元素设置absolute绝对定位，配合left right确定盒子的具体位置。
方法三--圣杯布局
HTML代码：
<div class="big">
<div class="center"></div>
<div class="left"></div>
<div class="right"></div>
</div>
CSS代码：
.big{
clear: both;
padding: 0 500px 0 400px;
}
.left{
position: relative;
float: left;
margin-left: -100%;
left: -400px;
width: 400px;
height: 300px;
background-color: #ffe4e1;
}
.right{
position: relative;
float: left;
margin-left: -500px;
width: 500px;
right:-500px;
height: 300px;
background-color: #e6e6fa;
}
.center{
position: relative;
float: left;
width: 100%;
height: 300px;
background-color: #f0fff0;
}
注意事项：
-
使用圣杯布局由于首先渲染中间部分，所以要将center部分代码放于最前。
-
由于在父元素预先预留了左右两个盒子的位置，所以左右两个盒子的宽度不可以设置为百分比，这样设置出来的百分比值并不是整个页面的百分之多少。
-
由于对于三个子元素都设置了float属性，所以要对父元素清除浮动。
-
圣杯布局的思想是：对于父元素设置内边距，使父元素的主体部分只包含center部分的内容，由于提前使用padding属性预留了左右盒子的位置，所以通过对左右盒子的相对定位和负边距的设置，使其位于页面的左右两边。
方法四--双飞翼布局
HTML代码：
<div class="big">
<div class="center">
<div class="content"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</div>
CSS代码：
.big{
clear: both;
}
.left{
float: left;
height: 300px;
width: 400px;
margin-left: -100%;
background-color: #ffe4e1;
}
.right{
float: left;
height: 300px;
width: 500px;
margin-left: -500px;
background-color: #e6e6fa;
}
.center{
float: left;
height: 300px;
width: 100%;
background-color: #f0fff0;
}
.content{
margin: 0 500px 0 400px;
}
注意事项：
- 双飞翼布局对于中间部分内容多添加了一个盒子，简化了代码
- 由于子元素都设置了浮动属性，所以父元素要进行浮动的清除
方法五--flex布局
HTML代码：
<div class="big">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
CSS代码：
.big{
display: flex;
}
.left{
width: 20%;
height: 300px;
background-color:#ffe4e1;
}
.center{
height: 300px;
background-color: #f0fff0;
flex: 1;
}
.right{
width: 30%;
height: 300px;
background-color: #e6e6fa;
}
注意事项：
- 由于是flex布局，所以在html当中要将想要摆放的盒子顺序按从左到右顺序放置
- 由于两边定宽，中间自适应，所以要将中间盒子的flex值设为1
方法六--table-cell布局
HTML代码：
<div class="big">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
CSS代码：
.big{
display: table;
width: 100%;
}
.big div{
display: table-cell;
}
.left{
width: 20%;
height: 300px;
background-color: #ffe4e1;
}
.right{
width: 30%;
height: 300px;
background-color: #e6e6fa;
}
.center{
height: 300px;
background-color: #f0fff0;
}
注意事项：
- 伪表格布局，将父元素盒子display设置为table，这就使父元素相当于一个表格
- 将三个子元素的div设置为table-cell，相当于一个单元格
方法七--grid布局
HTML代码：
<div class="big">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
CSS代码：
.big{
display: grid;
width: 100%;
grid-template-rows: 300px;
grid-template-columns: 400px auto 500px;
}
.left{
background-color: #ffe4e1;
}
.right{
background-color: #e6e6fa;
}
.center{
background-color: #f0fff0;
}
注意事项：
- grid网格布局，要使用px方式对两边两栏进行定宽
- grid布局要对父元素设置display属性为grid
- grid网格布局要在父元素的CSS样式中添加网格的行高以及列宽
- grid布局的兼容性差，虽然好用，但有的浏览器不支持
