介绍
1、双飞翼布局的middle、left、right的父元素是body,圣杯布局的middle、left、right的父元素是container,因此双飞翼布局需要在middle中内嵌一个inside,方便在middle中写内容,而圣杯布局可以直接在middle中写内容;
2、双飞翼布局中的inside,其样式应包含左右外边距margin,为了给left和right留出位置;
3、双飞翼和圣杯布局中的left元素所包含的margin-left:-100%样式的含义是使left元素在最左侧浮动。对于双飞翼布局,100%是针对middle而言的,而圣杯布局是针对container而言的;
4、圣杯布局为了实现left和right元素在padding的留白中,需要使用position:relative相对定位,通过设置left/right移动,双飞翼布局不需要使用相对定位;
5、对于两种布局,middle的width都是100%,左右的width是定值;
6、本人在实际编写style时,习惯都用left或者margin-left定位;
7、对于圣杯布局来说,为了保证浏览器页面宽度缩小到一定距离时,元素不会窜到下一行,需要增加body的样式min-width,大小为两个left元素的宽度+一个right元素的宽度,双飞翼布局不用考虑这一问题;
8、footer一定要清除浮动,即clear:both,保证footer元素两边没有浮动元素,这样就可以使footer以块级元素一直在待在下面;
9、相比较而言,我觉得双飞翼布局在灵活性上要高于圣杯布局。
圣杯布局
<div>
<div class="header">
<h3>header</h3>
</div>
<div class="container">
<div class="middle">
<h3>middle</h3>
</div>
<div class="left">
<h3>left</h3>
</div>
<div class="right">
<h3>right</h3>
</div>
</div>
<div class="footer">
<h3>footer</h3>
</div>
</div>
* {
margin: 0;
padding: 0;
}
body {
min-width: 630px;
text-align: center;
}
.header,
.footer {
height: 10vh;
}
.header {
background-color: #eeeeee;
}
.footer {
clear: both;
background-color: pink;
}
.container {
padding: 0 200px 0 200px;
}
.container>div {
float: left;
height: 80vh;
}
.middle {
width: 100%;
background-color: yellow;
}
.left,
.right {
width: 200px;
position: relative;
}
.left {
background-color: red;
margin-left: -100%;
left: -200px;
}
.right {
background-color: green;
margin-left: -200px;
left: 200px;
}
双飞翼布局
<div>
<div class="header">header</div>
<div class='container'>
<div class='center'>
<div class='main'>center</div>
</div>
<div class='left'>left</div>
<div class='right'>right</div>
</div>
<div class="footer">footer</div>
</div>
* {
margin: 0;
padding: 0;
}
body {
min-width: 500px;
height: 100vh;
font-weight: 700;
text-align: center;
}
.header,
.footer {
background-color: #999999;
width: 100%;
height: 10vh;
}
.footer {
clear: both;
}
.container {
width: 100%;
}
.center,
.left,
.right {
float: left;
height: 80vh;
}
.center {
width: 100vw;
background-color: pink;
}
.center .main {
margin: 0 200px 0 200px;
}
.left,
.right {
width: 200px;
}
.left {
margin-left: -100%;
background-color: #ff0000;
}
.right {
margin-left: -200px;
background-color: yellow;
}