相同点和不同点
两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局,并且中间部分在HTML代码中要写在前边,这样它就会被优先加载渲染。
主要的不同之处就是在解决中间部分被挡住的问题时,采取的解决办法不一样。圣杯布局是在父元素上设置了padding-left和padding-right,在给左右两边的内容设置position为relative,通过左移和右移来使得左右两边的内容得以很好的展现,而双飞翼布局则是在中间这个div的外层又套了一个div来放置内容,在给这个中间的div设置margin-left和margin-right 。
- 两种布局方式都是把主列放在文档流最前面,使主列优先加载。
- 两种布局方式在实现上也有相同之处,都是让三列浮动,然后通过负外边距形成三列布局。
- 两种布局方式的不同之处在于如何处理中间主列的位置:
- 圣杯布局是利用父容器的左、右内边距+两个列的相对定位;
- 双飞翼布局是把主列嵌套在一个新的父级块中并利用主列的左、右外边距进行布局调整。
效果图:
圣杯布局代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>11.圣杯布局</title>
<style>
* {
margin: 0;
padding: 0;
}
.header {
background-color: cyan;
height: 10vh;
text-align: center;
}
.container {
background-color: gray;
overflow: hidden;
padding: 0 200px 0 300px;
}
.container div {
float: left;
height: 80vh;
}
.middle {
width: 100%;
background-color: red;
text-align: center;
}
.left {
width: 300px;
background-color: #ff4d4f;
margin-left: -100%;
position: relative;
left: -300px;
}
.right {
width: 200px;
background-color: #2e6da4;
margin-left: -200px;
position: relative;
right: -200px;
}
.footer {
background-color: green;
height: 10vh;
text-align: center;
}
</style>
</head>
<body>
<div class="header">header</div>
<div class="container">
<div class="middle">middle</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</body>
</html>
双飞翼布局代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>10.双飞翼布局</title>
<style>
* {
margin: 0;
padding: 0;
}
.header {
background-color: cyan;
height: 10vh;
text-align: center;
}
.container {
background-color: gray;
overflow: hidden;
}
.container .column {
float: left;
height: 80vh;
}
.center {
width: 100%;
background-color: red;
text-align: center;
}
.left {
width: 300px;
background-color: #ff4d4f;
margin-left: -100%;
}
.right {
width: 200px;
background-color: #2e6da4;
margin-left: -200px;
}
.content {
margin-left: 300px;
margin-right: 200px;
}
.footer {
background-color: green;
height: 10vh;
text-align: center;
}
</style>
</head>
<body>
<div class="header">header</div>
<div class="container">
<div class="center column">
<div class="content">middle</div>
</div>
<div class="left column">left</div>
<div class="right column">right</div>
</div>
<div class="footer">footer</div>
</body>
</html>
本文没有介绍详细的实现过程,如果需要,请阅读:
前端学习交流QQ群,群内学习讨论的氛围很好,大佬云集,期待您的加入:862748629 点击加入