在一面或者二面中，页面布局是经常问到的点，昨天在慕课网听了老师讲的课，今天自己敲下代码整理下。主要解答三栏布局下面两题目，两栏布局与三栏布局相似。
1.高度已知，左右宽度固定，使中间自适应。
2.上下高度固定，使中间自适应
1.左右宽度固定，中间自适应
-
float解决方案
css实现：
html *{ padding: 0px; margin: 0px; } .box div{ min-height: 200px; } /*<!-- 1.float方法 -->*/ .partone { width: 300px; background: pink; float: left; } .parttwo { background: blue; color: #ffffff; text-align: center; } .partthree { width: 300px; background: orange; float: right; }html实现：
<article class="box"> <div class="partone">partone</div> <div class="partthree">partthree</div> <div class="parttwo"> <h2>页面布局</h2> <p>中间自适应解决方案</p> <p>中间自适应解决方案</p> <p>中间自适应解决方案</p> <p>中间自适应解决方案</p> </div> </article>效果：
-
绝对定位方案
css实现：
/*2.绝对定位*/ html *{ padding: 0px; margin: 0px; } .box div{ min-height: 200px; } .box { position: relative; } .partone { left: 0px; width: 300px; background: pink; position: absolute;; } .parttwo { left: 300px; right: 300px; background: blue; color: #ffffff; text-align: center; position: absolute; } .partthree { right: 0px; width: 300px; background: orange; position: absolute; }html实现：
<article class="box"> <div class="partone">partone</div> <div class="partthree">partthree</div> <div class="parttwo"> <h2>页面布局</h2> <p>中间自适应解决方案</p> <p>中间自适应解决方案</p> <p>中间自适应解决方案</p> <p>中间自适应解决方案</p> </div> </article>效果：
-
flex弹性布局解决方案
css实现：
/*3.弹性布局flex*/ html *{ padding: 0px; margin: 0px; } .box div{ min-height: 200px; } .box { display: flex; } .partone { width: 300px; background: pink; } .parttwo { background: blue; color: #ffffff; text-align: center; flex: 1; } .partthree { width: 300px; background: orange; }html实现：
！！！注意这里partone、parttwo、partthree三部分顺序和前两种的不同！！！
<article class="box"> <div class="partone">partone</div> <div class="parttwo"> <h2>页面布局</h2> <p>中间自适应解决方案</p> <p>中间自适应解决方案</p> <p>中间自适应解决方案</p> <p>中间自适应解决方案</p> </div> <div class="partthree">partthree</div> </article>效果:
-
grid网格布局解决方案
css实现：
/*4.网格grid布局解决方案*/ html *{ padding: 0px; margin: 0px; } .box div{ min-height: 200px; } .box { display: grid; grid-template-columns: 300px auto 300px; } .partone { background: pink; } .parttwo { background: blue; color: #ffffff; text-align: center; } .partthree { background: orange; }html实现：
！！！注意这里partone、parttwo、partthree三部分顺序和前两种的不同！！！
<article class="box"> <div class="partone">partone</div> <div class="parttwo"> <h2>页面布局</h2> <p>中间自适应解决方案</p> <p>中间自适应解决方案</p> <p>中间自适应解决方案</p> <p>中间自适应解决方案</p> </div> <div class="partthree">partthree</div> </article>效果:
-
table表格布局解决方案
css实现：
！这里要给每个部分设置高度height，上面设置的min-height在table布局中不起作用。！！！
/*5..table布局解决方案*/ html *{ padding: 0px; margin: 0px; } .box div{ min-height: 200px; } .box { width: 100%; display: table; } .box div{ display: table-cell; /*给每个表格设置高度*/ height: 200px; } .partone { background: pink; width: 300px; } .parttwo { background: blue; color: #ffffff; text-align: center; } .partthree { background: orange; width: 300px; }html实现：
！！！注意这里partone、parttwo、partthree三部分顺序和前两种的不同！！！
<article class="box"> <div class="partone">partone</div> <div class="parttwo"> <h2>页面布局</h2> <p>中间自适应解决方案</p> <p>中间自适应解决方案</p> <p>中间自适应解决方案</p> <p>中间自适应解决方案</p> </div> <div class="partthree">partthree</div> </article>效果:
各方案优缺点：
1.浮动和绝对定位都脱离了文档流，浮动如果周边处理得当，兼容性就会比较好，绝对定位使用较方便。
2.flex布局是CSS3中新增，就是为了解决浮动和绝对顶对带来的不足，是一种比较完美的解决方案。
3.网格布局是最新特性，就像是栅格系统。代码量少。
4.表格布局一旦有一部分高度发生变化，如当表格中内容较多，超出设定高度后，其余部分都会发生变化，这样会不符合开发要求，用户体检也不好。
5.上述题目，当高度未知时，只有flex布局和table布局通用。
2.上下宽度固定，中间自适应
这种上中下三栏布局在移动端较为多见。
-
绝对定位方案
css实现：
/*1.绝对定位 各部分要设置宽度*/ html *{ padding: 0px; margin: 0px; } .partone { top: 0; height: 100px; width: 100%; background: pink; position: absolute; } .parttwo { bottom: 100px; top: 100px; width: 100%; background: blue; color: #ffffff; text-align: center; position: absolute; } .partthree { bottom: 0; height: 100px; width: 100%; background: orange; position: absolute; }html实现：
<article class="box"> <div class="partone">partone</div> <div class="parttwo"> <h2>页面布局</h2> <p>中间自适应解决方案</p> <p>中间自适应解决方案</p> <p>中间自适应解决方案</p> <p>中间自适应解决方案</p> </div> <div class="partthree">partthree</div> </article>效果:
-
flex弹性布局解决方案
css实现：
/*2.flex方法*/ html *{ padding: 0px; margin: 0px; } html,body{ /*很重要，这步不设置高度，下面box高度100%不会起作用*/ height: 100%; } .box { width: 100%; height: 100%; display: flex; flex-direction: column; } .partone { height: 100px; background: pink; } .parttwo { flex: 1; background: blue; color: #ffffff; text-align: center; } .partthree { height: 100px; background: orange; }html实现：
<article class="box"> <div class="partone">partone</div> <div class="parttwo"> <h2>页面布局</h2> <p>中间自适应解决方案</p> <p>中间自适应解决方案</p> <p>中间自适应解决方案</p> <p>中间自适应解决方案</p> </div> <div class="partthree">partthree</div> </article>效果:
-
grid网格布局解决方案
css实现：
/*3.网格grid方法*/ html *{ padding: 0px; margin: 0px; } html,body{ /*很重要，这步不设置高度，下面box高度100%不会起作用*/ height: 100%; } .box { width: 100%; height: 100%; display: grid; grid-template-rows: 100px auto 100px; } .partone { background: pink; } .parttwo { background: blue; color: #ffffff; text-align: center; } .partthree { background: orange; }html实现：
<article class="box"> <div class="partone">partone</div> <div class="parttwo"> <h2>页面布局</h2> <p>中间自适应解决方案</p> <p>中间自适应解决方案</p> <p>中间自适应解决方案</p> <p>中间自适应解决方案</p> </div> <div class="partthree">partthree</div> </article>效果:
-
table表格布局解决方案
css实现：
/*4.table布局*/ html *{ padding: 0px; margin: 0px; } html,body{ /*很重要，这步不设置高度，下面box高度100%不会起作用*/ height: 100%; } .box { width: 100%; height: 100%; display: table; } .partone { display: table-row; background: pink; height: 100px; } .parttwo { display: table-row; background: blue; color: #ffffff; text-align: center; } .partthree { display: table-row; background: orange; height: 100px; }html实现：
！！特别说明：table布局每部分要有内容背景颜色才会显示。！！！
<article class="box"> <div class="partone">partone</div> <div class="parttwo"> <h2>页面布局</h2> <p>中间自适应解决方案</p> <p>中间自适应解决方案</p> <p>中间自适应解决方案</p> <p>中间自适应解决方案</p> </div> <div class="partthree">partthree</div> </article>效果:
不怕挑战、不怕困难、勇往直前、这些都是成长的机会。
