CSS布局 - 三栏布局
CSS布局技术可谓是前端技术中最基础的技术,就是因为基础,所以我认为要更加熟练,深入的去掌握,去梳理。
一、 传统 ---> 浮动实现的三栏布局
采用浮动实现的三栏布局有以下特点及注意事项:
· 注意DOM结构的排列顺序。
因为左右两侧的DOM都是浮动布局,而中间的DOM则是普通的文档流,所以为了规避浏览器正常的页面渲染,即先解析左侧DOM(浮动),再解析中间的DOM(普通文档流,宽度100%)而导致解析最后的右侧DOM(浮动)时因为宽度的问题,而掉到下一行的情况。
· 因为DOM结构顺序实际内容反而最后渲染出来。
· 左右两栏高度无法做到100%,除非设置body, html高度为100%。
具体代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; min-width: 320px; } .left { float: left; width: 150px; height: 100%; background: #aaa; } .right { float: right; width: 150px; height: 100%; background: #aaa; } .main { background: #eee; } </style> </head> <body> <div class="left">This is Left</div> <div class="right">This is Right</div> <div class="main"> This is Main </div> </body> </html>
二、传统 ---> 定位实现的三栏布局
通过定位实现的三栏布局,其实现方式与浮动相类似,与浮动相比,它具有以下特点:
· 无需手动更改DOM结构的顺序
· 左右两栏可以实现100%高度,无需手动定高,但只支持IE7+
定位方式也有它的缺点,比如当给中间DOM定义了最小宽度时,左右两栏会盖在中间的DOM上。
具体代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; } .left { position: absolute; left: 0; top: 0; bottom: 0; width: 150px; background: #eee; } .right { position: absolute; right: 0; top: 0; bottom: 0; width: 150px; background: #eee; } .main { background: #aaa; padding: 0 150px; min-width: 300px; } </style> </head> <body> <div class="left">This is Left</div> <div class="main"> This is Main </div> <div class="right">This is Right</div> </body> </html>
三、 传说 ---> 圣杯布局
圣杯布局【Holy Grail of Layouts】是Kevin Cornell在2006年提出的一种布局模型概念,在国内最早是由淘宝UED的工程师传播开来。
圣杯布局的特点是:
1、三列布局,中间宽度自适应,两边定宽;
2、中间栏要在浏览器中优先展示渲染;
3、允许任意列的高度最高;
4、要求只用一个额外的DIV标签;
5、要求用最简单的CSS、最少的HACK语句;
实现圣杯布局的核心技术就是浮动与定位相结合使用。
从最简单的圣杯布局开始着手:
3.1 两栏-左侧定宽
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { margin: 0px; padding: 0px; } .wrap { padding-left:150px; overflow: hidden; } .main { float: left; width: 100%; height: 500px; background: #eee; } .left { float: left; position: relative; width: 150px; height: 500px; margin-left: -100%; left: -150px; _left: 150px;/* 解决IE6下的兼容性问题 */ background: #aaa; } </style> </head> <body> <div class="wrap"> <div class="main"></div> <div class="left"></div> </div> </body> </html>
仔细看代码,我可以得出一个结论,圣杯布局的HTML结构就是一个包裹层(.wrap),然后里面是我们所要放的结构:左侧栏(.left) 和 主栏(.main) 。为了能让主栏优先解析渲染,所以将其HTML结构放在最前面。
在CSS上,结构相关的HTML标记都要进行浮动,使他们进行一行并排开来,但由于主栏的宽度已经是最外包裹层最大的宽度(去除padding),所以左侧栏会掉到第二行,因此需要为其设置:
margin-left:-100% position:relative; left:-150px;
通过margin负值浏览器会将侧栏从第二行拉向第一行,而这里的-100%,指的就是侧栏所在父容器的宽度,所以最终侧栏会被拉向父容器第一行的最左侧。接着再进行相对定位(不会脱离文档流),最后通过左侧偏移值(left)将其拉回到浏览器的最左边。
3.2 两栏-右侧定宽
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { margin: 0px; padding: 0px; } .wrap { padding-right: 150px; overflow: hidden; } .main { float: left; width: 100%; height: 500px; background: #eee; } .right { float: right; position: relative; width: 150px; height: 500px; margin-right: -150px; _left: -150px;/* 解决IE6下的兼容性问题 */ background: #aaa; } </style> </head> <body> <div class="wrap"> <div class="main"></div> <div class="right"></div> </div> </body> </html>
左侧定宽与右侧定宽最大的不同就是右侧栏可以有浮动,然后设置margin-right:-150px便可以实现。
为什么可以这么做呢?其实很简单因为我们的包裹成(.wrap)设置了右间距,而当我们的右侧栏向右偏移了150px时,便已经脱离了.wrap包裹层。相当于脱离了BFC的环境,此时右侧栏由于浮动便会自动上浮。
3.3 圣杯布局 - 侧边栏都在左边
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { margin: 0px; padding: 0px; } .wrap { padding-left: 300px; overflow: hidden; } .main { float: left; width: 100%; height: 500px; background: #eee; } .left { float: left; position: relative; width: 150px; height: 500px; margin-left: -100%; left: -300px; _left: 0px; /* 解决IE6下的兼容性问题 */ background: red; } .right { float: left; position: relative; width: 150px; height: 500px; margin-left: -100%; left: -150px; _left: 150px;/* 解决IE6下的兼容性问题 */ background: green; } </style> </head> <body> <div class="wrap"> <div class="main"></div> <div class="left"></div> <div class="right"></div> </div> </body> </html>
3.4 圣杯布局-侧边栏都在右边
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { margin: 0px; padding: 0px; } .wrap { padding-right: 300px; overflow: hidden; } .main { float: left; width: 100%; height: 500px; background: #eee; } .left { float: left; position: relative; width: 150px; height: 500px; margin-left: -150px; right: -150px; /* 解决IE6下的兼容性问题 */ background: red; } .right { float: left; position: relative; width: 150px; height: 500px; margin-left: -150px; right: -300px; background: green; } </style> </head> <body> <div class="wrap"> <div class="main"></div> <div class="left"></div> <div class="right"></div> </div> </body> </html>
3.5 圣杯布局-两侧定宽
由以上的基础认识后,我们就可以很容易的写出两栏定宽,共计3栏的“圣杯布局”。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { padding: 0; margin: 0 } .wrap { padding: 0 150px; overflow: hidden } .main { float: left; width: 100%; height: 500px; background: #eee; } .left { float: left; position: relative; width: 150px; height: 500px; background: #aaa; margin-left: -100%; left: -150px; } .right { float: right; width: 150px; height: 500px; background: #aaa; margin-right: -150px; } </style> </head> <body> <div class="wrap"> <div class="main"></div> <div class="left"></div> <div class="right"></div> </div> </body> </html>
四、传说 --> 双飞翼布局
双飞翼布局实际上是对圣杯布局的改进版,相比于圣杯布局,它减少了相对定位,控制偏移值等CSS控制,而相应的双飞翼布局也则增加了html结构。
双飞翼的核心思路就是为主栏增加一个包裹成,然后让这个包裹成与左右两个侧栏同时进行浮动,最后通过设置与圣杯布局相似的负边距值(margin),便可以实现三栏布局,从而实现不需要定位进行辅助。
详细代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { margin: 0px; padding: 0 } .wrap { overflow: hidden; } .box { float: left; width: 100%; background: #eee; } .main { height: 500px; margin: 0 160px; } .left { float: left; height: 500px; background: #aaa; width: 160px; margin-left: -100% } .right { float: left; height: 500px; width: 160px; background: #bbb; margin-left: -160px; } </style> </head> <body> <div class="wrap"> <!-- 为主栏再包裹一层 --> <div class="box"> <div class="main"></div> </div> <div class="left"></div> <div class="right"></div> </div> </body> </html>
五、 新时代 ---> Flex布局
Flex 布局是CSS3推出的一种可塑布局方案,其功能强大且灵活。
flex盒子默认情况下会将其内部的子元素按照HTML结构的顺序并排一行来排列展示。如果所有子元素的宽度之和大于当前的flex盒子的宽度时,flex盒子会自动调整每个子盒子的宽度。
也是利用这个特性,我们可以很方便的实现通过Flex进行的三列布局。
PS:Flex 再PC端上只有IE10+ Chrome21+ Firefox 22+ 才被支持,但是在手机端上目前基本已经可以被全部支持
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { margin: 0px; padding: 0 } .wrap { display: flex; } .main { width:100%; height: 400px; background: #eee; order:2; } .left { width: 150px; height: 400px; background: #aaa; order:1; } .right { width: 150px; height: 400px; background: #ddd; order:3; } </style> </head> <body> <div class="wrap"> <div class="main"></div> <div class="left"></div> <div class="right"></div> </div> </body> </html>
说明:order 是CSS3的一个新属性,其值为整数值,用于设置flex子元素的排列顺序,值越小的子元素越排在前面。