圣杯布局
聊聊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>
参考文献:圣杯布局