CSS圣杯布局，双飞翼布局
2019-01-08 本文已影响0人
饮杯梦回酒
导读：
- 主要是最近在简书上看到了相关文章觉得确实比较重要，就分出来写一下，主要说明见代码注释。
1.圣杯布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
text-align: center;
}
.header, .footer {
background-color: skyblue;
height: 60px;
line-height: 60px;
}
.container {
overflow: hidden;
padding: 0 100px;
}
.main {
width: 100%;
background-color: rgba(255,0,0,0.5);
height: 100px;
line-height: 100px;
float: left;
}
.left {
background-color: rgba(0,255,0,0.5);
width: 100px;
height: 100px;
line-height: 100px;
float: left;
margin-left: -100%;
position: relative;
left: -100px;
}
.right {
background-color: pink;
width: 100px;
height: 100px;
line-height: 100px;
float: left;
margin-left: -100px;
position: relative;
right: -100px;
}
</style>
</head>
<body>
<!-- 圣杯布局 -->
<div class="header">header</div>
<div class="container"> <!-- 利用左右内边距给左右两个盒子留位置，overflow清浮动 -->
<div class="main">main</div> <!-- 左浮，宽度100%，实现中间盒子自适应宽度 -->
<div class="left">left</div> <!-- 左浮，宽度100px，通过margin-left:-100%使自己处于跟main盒子一行，相对定位占据container内边距留出的左边位置 -->
<div class="right">right</div> <!-- 左浮，宽度100px，通过margin-left:-100px使自己处于跟main盒子一行，相对定位占据container内边距留出的右边位置 -->
</div>
<div class="footer">footer</div>
</body>
</html>
-
整体效果：
圣杯布局
2.双飞翼布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
text-align: center;
}
.header, .footer {
background-color: skyblue;
height: 60px;
line-height: 60px;
}
.container {
overflow: hidden;
}
.main {
width: 100%;
background-color: rgba(255,0,0,0.5);
height: 100px;
line-height: 100px;
float: left;
}
.inner-main {
margin-left: 100px;
margin-right: 100px;
}
.left {
background-color: rgba(0,255,0,0.5);
width: 100px;
height: 100px;
line-height: 100px;
float: left;
margin-left: -100%;
}
.right {
background-color: pink;
width: 100px;
height: 100px;
line-height: 100px;
float: left;
margin-left: -100px;
}
</style>
</head>
<body>
<!-- 双飞翼布局 -->
<div class="header">header</div>
<div class="container"> <!-- overflow清浮动 -->
<div class="main"> <!-- 左浮，宽度100%，实现中间盒子自适应宽度 -->
<div class="inner-main">main</div> <!-- 使用margin来取消左右盒子移上来覆盖的地方 -->
</div>
<div class="left">left</div> <!-- 左浮，宽度100px，通过margin-left:-100%使自己处于跟main盒子一行 -->
<div class="right">right</div> <!-- 左浮，宽度100px，通过margin-left:-100px使自己处于跟main盒子一行 -->
</div>
<div class="footer">footer</div>
</body>
</html>
-
整体效果：
双飞翼布局
总结：
其实两种布局最终实现的效果是差不多的，主要是实现的思路有所不同：
- 圣杯布局通过设置 container 的 padding 来为左右栏留出位置，而双飞翼布局是在中间栏增加子元素，通过内层子元素的 margin 来为左右栏留出位置（注意： 双飞翼布局中 width 和 float 属性都是设置在外层 div 上的）。
- 圣杯布局中为了使得左右栏分布在最左和最右需要同时使用负 margin 和相对定位实现，而双飞翼布局中不需要使用相对定位。
