圣杯布局

聊聊css的圣杯布局，一般面试中面试官也问得比较多。

圣杯布局

圣杯布局针对的是左右栏固定，中间栏自适应的网页布局，也叫双飞翼布局。它的布局有以下几点：

1、三列布局，中间宽度自适应，左右定宽

2、中间栏要在浏览器中优先展示渲染

3、允许任意列的高度最高

布局一：2栏布局，侧边栏固定在左边，右侧是主体内容栏：

.layout:after {clear: both;content: " ";display: table;}

 .layout__aside, .layout__main {float: left;}

  .layout {padding-left: 210px;}

  .layout__main {width: 100%;background-color: #ec2;}

 .layout__aside {width: 200px;margin-left: -210px;background-color:#fec;}

<div class="layout"><aside class="layout_aside">侧边栏宽度固定</aside><div class="layout_main">主内容宽度自适应</div><.div>

效果

布局二：2栏布局，侧边栏固定在右边，左侧是主体内容栏：

.layout:after {clear: both;content: " ";display: table;}

.layout {padding-right: 210px;}

.layout__main {width: 100%;background-color: #ec2;float:left;}

.layout__aside {width: 200px;margin-right: -210px;background-color:#fec;float:right;}

<div class="layout"><div class="layout_main">主内容宽度自适应</div><aside class="layout_aside">侧边栏宽度固定</aside></div>

效果布局

布局三：3栏布局，2个侧边栏分别固定在左边和右边，中间是主体内容栏：

.layout:after {clear: both;content: " ";display: table;}

.layout__aside, .layout__main {float: left;}

.layout {padding:0 210px;}

.layout__main {width: 100%;background-color:#a2c;}

.layout__aside { width: 200px;}

.layout__aside_left { margin-left: -210px;background-color:#e2a;}

.layout__aside_right {margin-right: -210px;float: right;background-color:#fec;}

<div class="layout"><aside class="layout_side layout_side_left">左侧边栏固定</aside><div class="layout_main">主内容栏宽度自适应</div><aside class="layout_side layout_side_right">右侧边栏宽度固定</aside></div>

效果

布局四：3栏布局，2个侧边栏同时固定在左边，右边是主体内容栏：

.layout:after {        clear: both;        content: " ";        display: table;} 

 .layout__aside, .layout__main {        float: left;} 

 .layout {        padding-left: 420px;} 

 .layout__main {        width: 100%;background-color:#fa3;} 

.layout__aside {        width: 200px;} 

 .layout__aside_first {        margin-left: -420px;background-color:#aee;} 

 .layout__aside_second {        margin-left: -210px;background-color:#e2c;}

<div class="layout"><aside class="layout_aise layout_side_first">第一个侧边栏宽度固定</aside><aside class="layout_aise layout_side_second">第2个侧边栏宽度固定</aside><div class="layout_main">主内容栏宽度自适应</div></div>

效果

布局五：3栏布局，2个侧边栏同时固定在右边，左边是主体内容栏：

.layout:after { clear: both; content: " "; display: table;} 

 .layout { padding-right: 420px;} 

 .layout__main { width: 100%;float:left;background-color:#fa3;} 

.layout__aside { width: 200px;float:right} 

 .layout__aside_first { margin-right: -210px;background-color:#aee;} 

 .layout__aside_second { margin-right: -420px;background-color:#e2c;}

<div class="layout"><div class="layout_main">主内容栏宽度自适应</div><aside class="layout_aside layout_aside_first"><第一个侧边栏宽度固定</aside><aside class="layout_aside layout_aside_second">第2个侧边栏宽度固定</aside>

效果

作者：超爱吃小龙虾
链接：https://www.jianshu.com/p/5feb8c39f151