CSSホーリーグレイルレイアウトとダブル全翼機レイアウト（フロントエンドインタビューフォーカス）
1.ホーリーグレイルのレイアウト：左右に固定、中央で適応（中央で最初に解決）
原則： 1。大きなボックスには3つの小さなボックスがあり、左右のボックスは固定されています。中央のボックスの幅は100％です。最初に中央を分析して、上部に配置する必要があります。
2. 3つの小さなボックスとフロート、左側の小さなボックスセットマージン-左：-100％;右側の小さなボックスセットマージン-左：-自己幅
3.大きなボックスの左右のパディングを設定し、左右の2つの小さなボックスを相対的な位置で両側に配置します。
<!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;
}
/* 清除浮动 */
.clearfix:after {
display: block;
clear: both;
content: '';
}
.wrap {
padding: 0 200px 0 300px;
}
.center {
float: left;
width: 100%;
height: 200px;
background-color: gold;
}
.left {
position: relative;
float: left;
width: 300px;
height: 200px;
background-color: red;
margin-left: -100%;
left: -300px;
}
.right {
position: relative;
float: left;
width: 200px;
height: 200px;
background-color: blue;
margin-left: -200px;
right: -200px;
}
</style>
</head>
<body>
<div class="wrap clearfix">
<div class="center">center</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
2.ダブルウィングレイアウト：左右固定、中央でアダプティブ（中央で最初に解決）
原則： 1。大きなボックスには3つの小さなボックスがあり、左右のボックスは固定されています。中央のボックスの幅は100％です。最初に中央を分析して、上部に配置する必要があります。
2. 3つの小さなボックスとフロート、左側の小さなボックスセットマージン-左：-100％;右側の小さなボックスセットマージン-左：-自己幅
3.サブボックスを中央にネストし、左右の余白を追加します。
短所：聖杯のレイアウトに関連します。構造コードを追加しました。
<!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;
}
.clearfix:after {
display: block;
clear: both;
content: '';
}
.center {
float: left;
width: 100%;
height: 200px;
background-color: gold;
}
.left {
float: left;
width: 300px;
height: 200px;
background-color: red;
margin-left: -100%;
}
.right {
float: left;
width: 200px;
height: 200px;
background-color: blue;
margin-left: -200px;
}
.zi {
margin: 0 200px 0 300px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="center">
<div class="zi">1</div>
</div>
<div class="left">2</div>
<div class="right">3</div>
</div>
</body>
</html>
