一、圣杯布局
使中间的内容先渲染使用了float,relative 相对定位和负值margin;
header,footer{height:50px;}
.wrapper{padding:0 100px;
overflow:hidden;}
.main,.left,.right{float:left;position:relative;}
.main{width:100%;}
.left{width:100px;margin-left:-100%;}
.right{width:100px;margin-left:-100px;}
将left和right两部分装到wrapper 两侧,故名圣杯
<header> Header </header>
<section class='main'>main</section>
<aside class='left'>left<aside>
<aside class='right'>right<aside>
</section>
<footer>footer</footer>
缺陷:如果将浏览器无限变窄,[圣杯]将会[破碎]掉,当main部分的宽度小于left部分就会发生布局混乱
二、双飞翼布局
使中间的内容先渲染,同样使用了float和负值margin,增加了一个层级,并没有使用relative相对定位,而是增加了一个dom结构
header,footer{height:50px;}
.wrapper{padding:0 100px;
overflow:hidden;}
.main,.left,.right{float:left;}
.main{width:100%;}
.main-wrap{margin:0 100px;height:200px;}
.left{width:100px;margin-left:-100%;}
.right{width:100px;margin-left:-100px;}
<header> Header </header>
<section class='main-wrap'>
<section class='main'>main</section>
</section>
<aside class='left'>left<aside>
<aside class='right'>right<aside>
</section>
<footer>footer</footer>
解决了圣杯布局的缺陷,但是增加了一层dom树节点,同时增加了CSS样式规则表和dom树合并成布局树的计算量
三、弹性和模型
header,footer{height:50px;}
.wrapper{display:flex;}
.main{flex:1;}//让中间占据全部位置
.left{flex:0 1 100px;order:-1;}//order控制显示顺序
.right{flex:0 1 120px;order:1;}
flex-grow:放大比例,默认为0-如果存在剩余空间也不放大
flex-shrink:缩小比例,默认为1-如果空间不足项目将缩小
flex-basis:在分配多余空间之前,项目占据的主轴空间
<header> Header </header>
<section class='wrapper'>
<section class='main'>main</section>
<aside class='left'>left<aside>
<aside class='right'>right<aside>
</section>
<footer>footer</footer>
有兼容性问题