1.圣杯
代码
、css
#hd{
height:50px;
background: #666;
text-align: center;
}
#bd{
/*左右栏通过添加负的margin放到正确的位置了，此段代码是为了摆正中间栏的位置*/
padding:0 200px 0 180px;
height:100px;
}
#middle{
float:left;
width:100%;/*左栏上去到第一行*/
height:100px;
background:blue;
}
#left{
float:left;
width:180px;
height:100px;
margin-left:-100%;
background:#0c9;
/*中间栏的位置摆正之后，左栏的位置也相应右移，通过相对定位的left恢复到正确位置*/
position:relative;
left:-180px;
}
#right{
float:left;
width:200px;
height:100px;
margin-left:-200px;
background:#0c9;
/*中间栏的位置摆正之后，右栏的位置也相应左移，通过相对定位的right恢复到正确位置*/
position:relative;
right:-200px;
}
#footer{
height:50px;
background: #666;
text-align: center;
}
<div id="hd">header</div>
<div id="bd">
<div id="middle">middle</div>
<div id="left">left</div>
<div id="right">right</div>
</div>
<div id="footer">footer</div>
双飞翼
#hd{
height:50px;
background: #666;
text-align: center;
}
#middle{
float:left;
width:100%;/*左栏上去到第一行*/
height:100px;
background:blue;
}
#left{
float:left;
width:180px;
height:100px;
margin-left:-100%;
background:#0c9;
}
#right{
float:left;
width:200px;
height:100px;
margin-left:-200px;
background:#0c9;
}
/*给内部div添加margin，把内容放到中间栏，其实整个背景还是100%*/
#inside{
margin:0 200px 0 180px;
height:100px;
}
#footer{
clear:both; /*记得清楚浮动*/
height:50px;
background: #666;
text-align: center;
}
<div id="middle">
<div id="inside">middle</div>
</div>
<div id="left">left</div>
<div id="right">right</div>
区别：
了解margin和padding和position三者区别，并且对于页面具备的影响margin的100%（父元素的width）以父级为参考,如果没有父级则为body体元素，position不能使得元素换行，只能在同行显示，而margin和padding确可以使得元素换行
1.主要是圣杯的需要把三个标签都包含，而双飞翼确不需要
2.圣杯需要定位，而双飞翼不需要
3.圣杯（主要是margin出现问题）在页面大小切换下会出现样式问题，而双飞翼确不会，只是会使得页面中间的contern越来越小（大）
flex布局居中
只要是使用
display:flex;
justify-content:center;
align-items:center;
定位居中
position：absolute;
left:50%;
top:50%;
translate(-50%，-50%)
网友评论