圣杯布局

聊聊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>

效果

布局二：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;}

主内容宽度自适应

侧边栏宽度固定

效果布局

布局三：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;}

左侧边栏固定

主内容栏宽度自适应

右侧边栏宽度固定

效果

布局四：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;}

第一个侧边栏宽度固定

第2个侧边栏宽度固定

主内容栏宽度自适应

效果

布局五：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;}

主内容栏宽度自适应

<第一个侧边栏宽度固定

第2个侧边栏宽度固定

效果

参考文献：圣杯布局