圣杯布局和双飞翼布局圣杯布局和双飞翼布局都是常用的响应式网页布局方式。圣杯布局是一种三列布局，中间列为主要内容，左右两

圣杯布局和双飞翼布局都是常用的响应式网页布局方式。

圣杯布局是一种三列布局，中间列为主要内容，左右两列为侧边栏。这种布局的优点是可以让主要内容在HTML结构中优先加载，有利于搜索引擎优化（SEO），同时也可以使用相对定位和负边距来实现等高的三列布局。但是，圣杯布局也存在一些问题，例如在使用浮动时可能会遇到元素重叠的问题，需要进行一些额外的处理。

屏幕 205719.png 上面就是使用圣杯布局简单的完成的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
		<style>
			* {
				margin: 0;
				padding: 0;
				font-size: 25px;
				text-align: center;
			}

			header,
			footer {
				height: 40px;
				width: 100%;
				background: skyblue;
			}

			footer {
				clear: both;
			}

			.wrapper {
				padding: 0 300px 0 150px;
				height: 100px;
			}

			.center {
				float: left;
				width: 100%;
				height: 500px;
				background: rgb(75, 71, 107);

			}

			.left {
				float: left;
				width: 150px;
				height: 500px;
				margin-left: -100%;
				position: relative;
				left: -150px;
				background: rgb(251, 255, 192);
			}

			.right {
				float: left;
				width: 300px;
				height: 500px;
				margin-left: -300px;
				position: relative;
				right: -300px;
				background: rgb(91, 211, 89);
			}
		</style>
	</head>
	<body>
		<header>header</header>
		<div class="wrapper">
			<div class="center">center</div>
			<div class="left">left</div>
			<div class="right">right</div>
		</div>
		<footer>footer</footer>

</body>
</html>

上面这是代码，为了让中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div。

双飞翼布局可以看作是对圣杯布局的改进，它也是一种三列布局，同样有主要内容和两个侧边栏。与圣杯布局不同的是，双飞翼布局使用了更简单的CSS结构来实现等高的三列布局，同时还能够保证主要内容在HTML结构中的优先加载。这种布局的主要思路是通过负边距和内边距来实现左右两列的定位，并使用外边距来避免元素重叠的问题。

屏幕截图 2023-08-24 231723.png 上面就是使用双飞翼简单的完成的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <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: rgb(0, 255, 51);
          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">content</div>
      </div>
      <div class="left column">left</div>
      <div class="right column">right</div>
    </div>
    <div class="footer">footer</div>

    
</body>
</html>

上面这是代码，为了让中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该div里用margin-left和margin-right为左右两栏div留出位置。

圣杯布局和双飞翼布局实现的效果都是相同的，只是在左右容器覆盖在中间容器中时，处理的容器不同而已。圣杯布局在处理左右容器，用相对定位时要注意左右平移的方向是相反的。双飞翼布局处理中间容器时要注意内层容器的内边距。