双飞翼布局和圣杯布局
一、两种布局的目的：
使得左右两边的宽度不随着浏览器窗口的变化而变化，是固定的，只有中间的部分才可以随着窗口变化而变化。
二、两种布局的区别：
圣杯布局是通过父元素padding来设置左右，不遮挡中间内容
双飞翼布局时通过设置margin来限制内部区域从而是中间内容不受影响
圣杯布局代码：
<body>
<!--圣杯布局重点结构就是中间的部分 顺序是center排在最前面 方面后面调整left right位置
因为left right都排在center后面 这样很容易调整上去 如果left right排在center前面 很难调整位置
-->
<div id="header">header</div>
<div id="container" class="clearfix">
<div id="center" class="column">center</div>
<div id="left" class="column">left</div>
<div id="right" class="column">right</div>
</div>
<div id="footer">footer</div>
</body>
<style>
#container{
padding-left: 200px;
padding-right: 190px;
margin: auto;
}
#center{
width: 100%;
background-color: aqua;
}
.column{
float: left;
}
#left{
width: 200px;
background-color: bisque;
margin-left: -100%;
position: relative;
left: -200px;
}
#right{
width: 190px;
background-color: coral;
margin-right: -190px;
}
#header,#footer{
width: 100%;
margin: auto;
background-color: darkgray;
text-align: center;
}
.clearfix::after{
display: table;
content: "";
clear: both;
}
</style>
双飞翼代码：
<body>
<div id="header">header</div>
<div id="center" class="column">
<div id="center-warp">
center
</div>
</div>
<div id="left" class="column">left</div>
<div id="right" class="column">right</div>
<div id="footer">footer</div>
</body>
<style>
#container{
padding-left: 200px;
padding-right: 190px;
margin: auto;
}
#center{
width: 100%;
height: 200px;
background-color: aqua;
}
.column{
float: left;
text-align: center;
}
#center-warp{
/*用margin隐性的扩展自己的边界*/
margin :0 190px 0 200px;
}
#left{
width: 200px;
height: 200px;
background-color: bisque;
margin-left: -100%;
}
#right{
width: 190px;
height: 200px;
background-color: coral;
margin-left: -190px;
}
#header,#footer{
width: 100%;
margin: auto;
background-color: darkgray;
text-align: center;
}
</style>