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

  

posted @ 2017-01-01 00:26  卷柏的花期  阅读(258)  评论(0编辑  收藏  举报