浅谈css三栏布局(包括双飞翼布局和圣杯布局)

时间 2019-11-17

标签浅谈 css 布局包括双飞栏目 CSS 繁體版

原文原文链接

三栏布局

在写正文以前css

ps :真想说一句，写博客，真香！(虽然我知道根本没人愿意看)
ok ,不说了进入正题

三栏布局的概念

三栏布局的概念听起来，很简单，就是让三列从左到右，依次排列，左边区域和右边区域固定宽，而中间内容区域宽度自适应，就像下面这样

固然要注意：咱们这里所说的中间部分宽度自适应就是随着屏幕大小的改变而本身适应的过程。这也是三栏布局产生的缘由所在html

三栏布局的具体实现以及原理

第一种：浮动三栏布局

HTML代码浏览器

<div class="werppar">
        <div class="left"></div>
        <div class="right"></div>
        <div class="container"></div>
    </div>

下面是 css 代码部分dom

.werppar{
            /* 造成bfc块级做用域上下文 ，目的为了清除浮动*/
            overflow: hidden;
            border: 5px solid red;
        }
        .left{
            float: left;
            width: 200px;
            height: 200px;
            background-color: lawngreen;
        }
        .right{
            float: right;
            width: 200px;
            height: 200px;
            background-color: lightcoral;
        }
        .container{
            margin: 0 200px;
            height: 200px;
            background-color: rebeccapurple;
        }

效果以下

那么这种方法是很简单的，相信各位瞬间就能看懂，不过也有一些须要注意的细节:
这种办法中 dom节点中，left,right,container,这三个块是不能换顺序的，也就是说这种方法的缺点很明显:浏览器是自上而下解析代码渲染dom树，那么container内容区域不能被优先渲染出来
至于为何不能换顺序，你们也很清楚:由于咱们要让他们在一行内展现，那么就必须让左右这两个块漂浮起来不占原来的位置了，才能让container区域跻身而入，

第二种定位三栏布局

html布局

<div class="werppar">
        <div class="container"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>

下面是cssflex

.werppar{
            position: relative;
        }
        .left{
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
            background-color: lawngreen;
        }
        .right{
            position: absolute;
            top: 0;
            right: 0;
            width: 200px;
            height: 200px;
            background-color: lightcoral;
        }
        .container{
            margin: 0 200px;
            height: 200px;
            background-color: rebeccapurple;
        }

效果以下：

看起来，与上面的效果是一摸同样的，方法也相对来讲比较简单，实现原理也和前面的浮动差很少，不过它的盒子高度是靠 container 去撑开的，而它的有点就是 container 此次是能够被优先渲染出来了，由于它排在第一位
惟一的缺点就是这种方法没法实现等高布局

第三种：用bfc原理作三栏布局

bfc特性有一点是触发了bfc的盒子不会和浮动的盒子发生重叠，也就是说触发bfc的盒子不会被浮动的盒子盖住，那么问题就解决一半了。来看一下具体实现
HTML

<div class="werppar">
        <div class="left"></div>
        <div class="right"></div>
        <div class="container"></div>
   </div>

下面是css代码3d

.werppar{
           width: 100%;
        }
        .left{
            float: left;
            width: 200px;
            height: 200px;
            background-color: gold;
        }
        .right{
           float: right;
            width: 200px;
            height: 200px;
            background-color: greenyellow;
        }
        .container{
            /*这里造成bfc区域，不会与浮动的元素发生重叠*/
            overflow: hidden;
            height: 200px;
            background-color: palevioletred;
        }

效果以下:
code

效果仍是同样，此时的container区域就是一个bfc区域了，那么它就不会被浮动元素盖住，container的宽度就是减去left的宽度 + right的宽度，剩下的就是本身的区域，这样不用像margin : 0 200px;左右撑开边距，因此也就造成的宽度自适应，不过它的缺点也是显而易见的，不能优先渲染container区域htm

圣杯布局(重点)

所谓圣杯布局只不过比起三栏布局多了一个需求:要求container区域优先渲染，那为啥叫作圣杯布局?由于长得像圣杯啊，看下图:

圣杯的两只手就像布局的左边蓝和右边栏同样，被子的主体就像container内容区域同样，具体的实现以下
HTML：

<div class="werppar">
        <div class="container"></div>
        <div class="left"></div>
        <div class="right"></div>
   </div>

cssblog

*{
            margin: 0;
            padding: 0;
        }
        .werppar{
            background-color: pink;
            /*左右栏经过添加负的margin放到正确的位置了，此段代码是为了摆正中间栏的位置*/
            padding:0 200px;
        }

        .container,.left,.right{
            float: left;
            height: 200px;
        }
        .container{
            width:100%;
            height:200px;
            background:blue;
        }
        .left{
            width:200px;
            height:200px;
            /*margin负值，让移动父级容器的宽度*/
            margin-left:-100%;
            background:#f40;
            /*中间栏的位置摆正以后，左栏的位置也相应右移，经过相对定位的left恢复到正确位置*/
            position:relative;
            left:-200px;
        }
        .right{
            width:200px;
            height:200px;
            margin-left:-200px;
            background:#0c9;
            /*中间栏的位置摆正以后，右栏的位置也相应左移，经过相对定位的right恢复到正确位置*/
            position:relative;
            right:-200px;
        }

能够看下效果图:

这就是所谓的圣杯布局，那么这个原理是什么呢? 其实就是基于两条 1.浮动2.margin负值，我来解释解释

首先给他们的父级元素，padding || margin 留出左右边栏的位置，而且此段代码是为了摆正中间栏的位置
在给咱们的三个元素浮动起来，而后直接给 container 元素宽度100%,宽度全给了container 了，哪left和right天然会掉下去了
哪怎么把left和right弄到正确的位置呢? 这里就要用到 magin 的负值了，结合浮动使用，那咱们知道浮动起来的几个元素会拍成一行内，而宽度不够才会掉下去，这里就是这种状况，可是我给left元素一个margin-left负值到一个界限，它就会贴回到上一行，由于他们是一块儿浮动的，因此咱们须要负一个它父容器的总宽度，这时候它回到的上一行，此时咱们还须要，使用定位将这个left元素，位移到正确的位置，这样就很简单left:-自身宽度便可,
right同理，你能够看做是，原本他就应该在上面的，无奈由于宽度不够，被挤下来了，此时我在给margin一个负的自身宽度，在使用定位right:-200px将其回归到正确的位置，🆗这样就搞定了

方法五:双飞翼布局(重点)

双飞翼布局实际上是根据圣杯布局演化出来的一种布局，具体代码实现以下:
HTML

<div class="werppar">
        <div class="box">
            <div class="container"></div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
        <p style="clear: both;"></p>
    </div>

css

.werppar{
           width:100%;
        }

        .box,.left,.right{
            float: left;
            height: 200px;
        }
        .box{
            width:100%;
            height:200px;
        }
        .container{
            margin : 0 200px;
            height: 200px;
            background:blue;
        }
        .left{
            width:200px;
            height:200px;
            margin-left:-100%;
            background:#f40;
        }
        .right{
            width:200px;
            height:200px;
            margin-left:-200px;
            background:#0c9;
        }

效果以下:

这里咱们能够看出，这里面和圣杯布局其实差异不是很大，

在这里咱们能够看出结构发生了改变，咱们的内容区域使用一个.box的元素包裹起来了，并且浮动的不再是.container元素了，这也就是说，container元素不会被外面的浮动元素所影响了
其次咱们能够发现，这里的left:-100%就能回到想要的位置?这是为何呢，须要注意的一点是，在这里。left父级盒子是宽度100%的，再也不是圣杯布局中留出来左右padding值的父级自适应宽度的盒子
那么同理了，right盒子也是由于这样，因此直接margin-left:-200px正好贴到父级盒子最右边，就能获得想要的位置了

方法六：flex三栏布局

利用flex弹性盒子能够很轻松的完成三栏布局，而且可以达到content优先渲染的要求
html

<div class="flex-box">
        <div class="flex-content flex-item">我是内容</div>
        <div class="flex-left flex-item">我是左边栏</div>
        <div class="flex-right flex-item">我是右边栏</div>
   </div>

css

.flex-box{
           display: flex;
       }
       .flex-left{
           width: 200px;
           height: 200px;
           background-color: lime;
           order: 0;
       }
       .flex-content{
           order: 1;
           width: 100%;
           background-color: aquamarine;
       }
       .flex-right{
           width: 200px;
           height: 200px;
           background-color: gold;
           order: 2;
       }

这里就很简单了，利用弹性盒子的手法，给子元素添加的属性order，这个属性意思为在主轴方向的排列中显示的优先级，值越小，优先级越高，放在最前的container最早渲染

笔记总结 🆗，就到这里了，我还要继续奋战