CSS布局（五）之圣杯布局和双飞翼布局

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"往期推荐：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"「","attrs":{}},{"type":"link","attrs":{"href":"https://juejin.cn/post/7028214235083571237","title":"","type":null},"content":[{"type":"text","text":"CSS布局之全屏布局","attrs":{}}]},{"type":"text","text":"」","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"「","attrs":{}},{"type":"link","attrs":{"href":"https://juejin.cn/post/7028594112873889800","title":"","type":null},"content":[{"type":"text","text":"CSS布局（二）之多列布局","attrs":{}}]},{"type":"text","text":"」","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"「","attrs":{}},{"type":"link","attrs":{"href":"https://juejin.cn/post/7028929502994513928","title":"","type":null},"content":[{"type":"text","text":"CSS布局（三）之等分布局","attrs":{}}]},{"type":"text","text":"」","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"「","attrs":{}},{"type":"link","attrs":{"href":"https://juejin.cn/post/7029296320233897991","title":"","type":null},"content":[{"type":"text","text":"CSS布局（四）之文本布局","attrs":{}}]},{"type":"text","text":"」","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":"前言","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":"圣杯布局和双飞翼布局","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"圣杯布局和双飞翼布局和布局也算是一种很经典的布局了吧，都是有左中右三列组成的，左右两列固定，中间自适应，高度固定且相等。接下来让我们看看是怎么实现的把。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/b2/b2d25332a2dc20cc7f3b2a129a81de27.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"\n","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"通过float和margin/pading 实现","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"大体上圣杯布局和双飞翼布局是一样的，但细节上还是有不一样的地方。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"相同点：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"通过中间列自适应，来完成。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"通过float来使左右两列向左向右浮动。","attrs":{}}]}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"不同点：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"圣杯布局：父节点通过padding为左右列位置。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"双飞翼布局：中间列通过margin来为左右两列留出位置。","attrs":{}}]}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"注意：因为浮动节点如果高于前面或平级的非浮动节点，会导致浮动节点下沉。所以在编写HTML的时候，要把中间列挪到右列节点后面。","attrs":{}}]}],"attrs":{}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"圣杯布局","attrs":{}}]},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":".layout {\n width: 1000px;\n height: 800px;\n padding: 0 200px;\n .layout-left {\n float: left;\n width: 200px;\n height: 100%;\n margin-left: -200px;\n background-color: crimson;\n }\n .layout-right {\n float: right;\n width: 200px;\n height: 100%;\n margin-right: -200px;\n background-color: yellow;\n }\n .layout-center {\n height: 100%;\n background-color: blue;\n }\n}\n","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"双飞翼布局","attrs":{}}]},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":".layout {\n width: 1000px;\n height: 800px;\n .layout-left {\n float: left;\n width: 200px;\n height: 100%;\n background-color: crimson;\n }\n .layout-right {\n float: right;\n width: 200px;\n height: 100%;\n background-color: yellow;\n }\n .layout-center {\n margin: 0 200px;\n height: 100%;\n background-color: blue;\n }\n}\n","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"通过flex实现","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"通过flex实现还是非常简单的，中间列设置flex：1即可自适应。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":".layout {\n display: flex;\n width: 1000px;\n height: 800px;\n .layout-left {\n width: 200px;\n background-color: crimson;\n }\n .layout-right {\n width: 200px;\n background-color: yellow;\n }\n .layout-center {\n flex: 1;\n background-color: blue;\n }\n}\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"好，今天就到这里了，今天努力的你依然是最棒的。加油，加油，你最棒！加油，加油，你最强！哦豁，Bye Bye！！！","attrs":{}}]}]}