大家好，欢迎来到IT知识分享网。
相同点和不同点
两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局，并且中间部分在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> 本文没有介绍详细的实现过程，如果需要，请阅读：
圣杯布局的原理
css经典布局——双飞翼布局
CSS 圣杯布局和双飞翼布局的理解与思考 – 知乎
前端学习交流，群内学习讨论的氛围很好，大佬云集，期待您的加入： 点击加入
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/132996.html
