圣杯模型和比翼双飞模型主要的特指

1.首先加载的是中间部分，其次是左边，然后是右边  

2.中间是自适应，二边是定宽

实现方法

1.grid
2.margin float position:releative父亲加padding 挤进去
3.margin float box-size:border-box  

1.grid
html:

 <div class="wrap"><div class="header">header</div><div class="middle">middle</div><div class="left">left</div><div class="right">right</div><div class="footer">footer</div></div>

css：

.middle {grid-area: middle;background-color: pink;}.left {grid-area: left;background-color: red;}.right {grid-area: right;background-color: blue;}.header {grid-area: header;background-color: yellow;}.footer {grid-area: footer;background-color: gray;}.wrap {display: grid;grid-template-areas: "header header header" "left middle right" "footer footer footer";grid-template-columns: 150px 1fr 150px;grid-template-rows: 150px 1fr 150px;text-align: center;height: 500px;width: 500px;}

实现效果：

2.margin float position:releative父亲加padding 挤进去
 html:

<div class="header">header</div><div class="wrap"><div class="middle">middle</div><div class="left">left</div><div class="right">right</div></div><div class="footer">footer</div>

css:

 .header,.footer {height: 30px;text-align: center;background: gray;}.wrap {overflow: hidden;padding: 0 200px;}.middle,.left,.right {float: left;min-height: 130px;position: relative;}.middle {width: 100%;background: pink;}.left {margin-left: -100%;background: blue;width: 200px;left: -200px;}.right {background: yellow;margin-left: -200px;width: 200px;right: -200px;}.footer {clear: both;}

效果：

3.  margin float box-size:border-box  
html:

 <div class="header">header</div><div class="wrap"><div class="middle">middle</div><div class="left">left</div><div class="right">right</div></div><div class="footer">footer</div>

css:

 .header,.footer {height: 30px;text-align: center;background: gray;}.wrap {overflow: hidden;}.middle,.left,.right {float: left;min-height: 130px;}.middle {width: 100%;background: pink;box-sizing: border-box;padding: 0 200px;}.left {margin-left: -100%;background: blue;width: 200px;}.right {background: yellow;margin-left: -200px;width: 200px;}.footer {clear: both;}

效果：

分析：
1.grid 兼容性的的问题，面试只能作为一个亮点来吸引面试官，gird 很多新属性可以查文旦了解更多。
2.方法2最大亮点在于父容器的padding: 0 200px; 以及margin:-100%;
3.方法3和方法2很像，处理不同的就是main加上box-sizing:boeder-box;在用padding:0 200px;从而到达效果。