标签：圣杯 双飞翼 color 布局 height width background 200px left
直接上代码及注释吧
双飞翼布局
<!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>
标签：圣杯,双飞翼,color,布局,height,width,background,200px,left
来源： https://www.cnblogs.com/huanxiongs02/p/14790812.html
本站声明：
1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。