直接上代码及注释吧
双飞翼布局
<!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>