CSS之分栏布局

时间 2019-11-17

标签 css 分栏布局栏目 CSS 繁體版

原文原文链接

分栏属于CSS布局中的一种，现将常见的分栏方式拆出来单独整理供本身和别人参考html

一、圣杯布局与双飞翼布局

圣杯布局和双飞翼布局都是实现三栏布局的方法，左右定宽，中间自适应，是很古老的布局方式，可是仍是常见的他们存在的影子。提出的缘由是因为硬件不足，首先渲染（main）主体部分，其次渲染（left/right）两边区域，合理利用资源。前端

圣杯布局：

所谓圣杯布局，通俗来说就是布局以后的三栏像一个圣杯结构，中间是圣杯主体，两边是把手。
圣杯布局原理：
（1）html结构中首先是渲染main主体部分，而后在渲染left/right部分，这也是圣杯布局和双飞翼布局提出的主要内容，代码段以下：ios

<body>
    <div class="content clearfix">
        <div class="middle">main</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>   
复制代码

（2）设置父级元素的宽高边距等,为三个子元素设置浮动和相对定位；web

.content{
    display: block;
    box-sizing: border-box;
    margin: 0 auto;
    width:400px;
    height:400px;
    background: green;
    padding: 0 100px;
}
.middle,
.left,
.right {
    float: left;
    overflow: hidden;
    position: relative;
    height: 400px;
    text-align: center;
}  
复制代码

（3）首先将main部分占据整行，就是width设置为100%；如今就要将left/right放到指定位置；核心操做是对margin-left赋予负值。设置left其margin-left:-100%;将此部分上移一行，此时，而且用相对定位将其固定在父级元素的padding-left区域中；一样对于right来讲，设置margin-left:-100px;便可左移100像素进入到main后面，而后用相对定位定位到padding-right中。代码以下：bash

.middle {
    width: 100%;
    background: red;
}
.left {
    margin-left: -100%;
    width: 100px;
    background: blue;
    left: -100px;
    }
.right {
    margin-left: -100px;
    width: 100px;
    background: yellow;
    right: -100px;
    height: 400px;
    }
.clearfix:after {
    display: block;
    content: " ";
    clear: both;
    }      
复制代码

此时，圣杯布局已完成，结果以下图前端性能

双飞翼布局

双飞翼布局与圣杯布局不同的是：圣杯布局经过父元素的padding值给left/right留出空间，经过定位将其放到留的空间内；而双飞翼模型与此不一样的是，经过为main主体嵌入一个子元素设置margin: 0 100px;来给left/right留出空间，其他与圣杯布局一致。效果与上图是一致的。布局

个人理解

经过设置float和设置父元素宽度100%后，left/right应该在都与main在一排，可是因为宽度不够，无奈被挤下来了，可是如今我只要给margin-right一个负值（这个值大小要超过自身的宽度）他就会上去，继续被接纳，可是这样呢会覆盖main元素，因此须要留出空间，而留空间方式有两种，因此产生了这两种布局。
这两种方式，先渲染main主体部分，优化了前端性能，可是因为硬件的发展，我认为这种方式提高性能已经不明显了，还不如直接写呢，或者flex布局等。性能

二、flex三栏布局

flex布局就是弹性布局，它是一种自适应布局方式，根据屏幕尺寸自适应空间，闲话不说，扯代码flex

.content {
      display: flex;
      line-height: 600px;
    }
    .left {
      width: 200px;
      height: 600px;
      background-color: lime;
      order: 0;
    }
    .middle{
      order: 1;
      width: 100%;
      background-color: purple;
    }
    .right {
      width: 200px;
      height: 600px;
      background-color: blue;
      order: 2;
    }    
复制代码

flex三栏布局整体思想是为left/right设置固宽，而后让main区域充满其他宽度区间。上面代码首先将父元素空间设置为flex；而后为left/right设置宽度，而后为main元素width:100%;这样便定义了三栏布局。这个order属性意为在主轴方向的排列中显示的优先级，值越小，优先级越高，因此能够达到HTML结构中content最早渲染，却又能让其在中间部分显示的效果。优化

三、两栏布局

两栏布局是最为常见的，说一下我在实习时怎么进行双栏和多栏布局的，需求是PC端主页面是固宽，left/和right是左右的，一大一小。在双栏布局时，刚开始我用left区域浮动+right区域定位的方式，这样有可能出现高度坍塌的局面。后来经过给左边的div设置左浮动，而后right区域的div元素经过margin-left往右移动。两栏布局的方式不少，可自行查阅资料

四、CSS3分栏

CSS3提供一种很是方便的分栏方式。有不少属性能够用，不必定三栏，我在渲染课程数据时，用了这个渲染出来相似九宫格，很方便。

.content {
    width: 400px;

    column-count: 3; /*栏数*/
    column-gap: 24px;  /*栏间距*/
    column-rule: solid 0px gainsboro; /* 定义列边框*/

    -moz-column-count: 3;
    -moz-column-gap: 24px;
    -moz-column-rule: solid 0px gainsboro;

    -webkit-column-count: 3;
    -webkit-column-gap: 24px;
    -webkit-column-rule: solid 0px gainsboro;
    }
.left {
    background-color: lime;
    height: 100px;
    }
.middle {
    background-color: purple;
    height: 100px;
    }
.right {
    background-color: blue;
    height: 100px;
    }   
复制代码

五、多栏布局

说一下需求页面状况：

这是我实习作的项目部分，不规则三栏布局，这个项目是用Vue作的，数据是Axios获取的。说一下个人思路，就不贴代码了。
（1）首先经过 v-for渲染数据，而后经过判断表达式为子元素设置类选择器 class="index === 0 ? 'big-item':'lit-item lit-item'+index" 用过Vue的知道index是什么。图片用 <el-image>饿了么UI渲染。（2）这五个元素有一个父元素，给他相对定位，占满所在区域宽度，overflow: hidden;等等；（3）大小图标用绝对定位，父相对子绝对的方式改变默认的定位left/right：0的位置，到此布局结束。可设置细节行样式如宽高、鼠标触碰动画等等。写这个布局不要一个一个的写5次布局，代码冗余，同样的样式写一次就够了。固然也能够float+margin+overflow达到视觉的分列，这个是硬凑，感受很差就没用。就到这吧，嘿嘿