圣杯布局和双飞翼三栏布局
Posted 浣熊sky
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了圣杯布局和双飞翼三栏布局相关的知识，希望对你有一定的参考价值。
直接上代码及注释吧
双飞翼布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>双飞翼布局</title>
<style>
* {
padding: 0;
margin: 0;
}
header,
footer {
text-align: center;
width: 100%;
background-color: #bbbbbb;
}
.text {
text-align: center;
line-height: 200px;
font-size: 40px;
color: #fff;
}
.bd {
overflow: hidden;
}
.main {
float: left;
width: 100%;
height: 200px;
background-color: #ddd;
}
.main-content {
margin: 0 200px;
}
.left {
float: left;
width: 200px;
height: 200px;
background-color: #da4242;
/* 产生布局效果的属性 */
margin-left: -100%;
}
.right {
float: left;
width: 200px;
height: 200px;
background-color: #4ddef1;
/* 产生布局效果的属性 */
margin-left: -200px;
}
</style>
</head>
<!-- 上述代码与圣杯布局相比HTML的结构不一样，在中间栏多了一个内容栏，根据盒子模型，我们就不能在main栏设置margin，因为之前设置了width：100%，若再设置margin会
超过所设宽度，我们用内容栏存放内容，并设置margin。
逐步解析
双飞翼布局与圣杯布局前几步是一样的,
1.给中间栏main设置width：100%，让它始终占满窗口，这样才有自适应的效果。设置背景颜色
2.给左右两个栏固定width和height。设置背景颜色 -->
<body>
<header>双飞翼布局</header>
<div class="bd">
<div class="main text">
<div class="main-content">main</div>
</div>
<div class="left text">
left
</div>
<div class="right text">
right
</div>
</div>
<footer style:"clear：both">footer</footer>
</body>
</html>
圣杯布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<style>
body {
min-width: 550px; /* 2x leftContent width + rightContent width */
font-weight: bold;
font-size: 20px;
}
#header, #footer {
background: rgba(29, 27, 27, 0.726);
text-align: center;
height: 60px;
line-height: 60px;
clear: both;
}
#container{
padding: 0 200px;
overflow: hidden;
}
.column{
height: 200px;
float: left;
position: relative;
}
#left{
width: 200px;
margin-left: -100%;
left: -200px;
background-color: aqua;
}
#right{
width: 200px;
margin-left: -200px;
right: -200px;
background-color: wheat;
}
#center{
width: 100%;
background-color: tomato;
}
</style>
<!-- 实现原理
html代码中，middle部分首先要放在container的最前部分，然后是left，right
1.将三者都设置 float:left, position:relative (因为相对定位后面会用到）
2.middle设置 width:100% 占满一行
3.此时middle占满一行，所以要把left拉到middle所在行的最左边，使用 margin-left:-100%
4.这时left拉回到middle所在行的最左边，但会覆盖middle内容的左端，要把middle内容拉出来，所以在外围container加上 padding:0 210px
5.middle内容拉出来了，但left也跟着出来了，所以要还原，就对left使用相对定位 left:-210px
6.同理，right要拉到middle所在行的最右边，使用 margin-left:-210px，right:-210px -->
<!--
1.让左边的盒子上去
需要设置其左边距为负的中间盒子的宽度，也就是.left {margin-left:-100%;}。这样左盒子才可以往最左边移动。
2.让右边的盒子上去
需要设置其左边距为负的自己的宽度，也就是.right {margin-left：-200px;}。这样右盒子才可以在一行的最右边显示出自己。
3.现在的问题就是左右两边的元素覆盖了center元素的内容，我们可以给容器盒子container加上两边padding，对子盒子都加上
相对定位，左子盒子用负left，右盒子用负right,消除父盒子padding的影响
-->
<body>
<div id="header">#header</div>
<div id="container">
<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>
</html>
以上是关于圣杯布局和双飞翼三栏布局的主要内容，如果未能解决你的问题，请参考以下文章