CSS布局 - 三栏布局

2017-01-07 08:39:56来源:作者:人点击


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子元素的排列顺序,值越小的子元素越排在前面。

  

相关文章

    无相关信息

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台