css精髓：这些布局你都学废了吗？

前言

最近忙里偷闲，给本身加油充电的时候，发现本身脑海中布局这块很是的凌乱混杂，因而花了一些时间将一些经常使用的布局及其实现方法整理梳理了出来，在这里，分享给你们。

单列布局

单列布局是最经常使用的一种布局，通常是将一个元素做为容器，设置一个固定的宽度，水平居中对齐。

单列布局通常有两种形式：

(图片来源：https://blog.csdn.net/Ace_Arm/article/details/81036129)

一栏布局

一栏布局头部、内容、底部宽度一致

效果图

代码实现

html

<header></header>
<main></main>
<footer></footer>

css

header,footer{
    width: 1200px;
    height: 100px;
    margin: 0 auto;
    background: black;
}
main{
    width: 1200px;
    height: 600px;
    background: red;
    margin: 0 auto;
}

一栏布局（通栏）

一栏布局（通栏）头部和底部宽度一致，占满整个页面，中间内容区域宽度较小不占满屏幕。

效果图

代码实现

html

<header></header>
<main></main>
<footer></footer>

css

header,footer{
    width: 100%;
    height: 100px;
    background: black;
}
main{
    width: 1200px;
    height: 600px;
    background: red;
    margin: 0 auto;
}

单列布局是最为基础和简单的一种，实现方法并不局限于以上两种，你们可自由发挥，找到更多的方法来实现。

2列布局

2列布局的使用频率也很是高，其实现效果主要就是将页面分割成左右宽度不等的两列。通常宽度较小的一列会设置为固定宽度，做为侧边栏之类的，而另外一列则充满剩余宽度，做为内容区。

在后台管理系统及api文档中使用较为普遍。

效果图

先来看看效果：

代码实现

实现两列布局的方法有不少，这里主要介绍两种方法。

calc函数

calc() 函数用于动态计算长度值。实现思路很简单，侧边栏宽度固定，设置绝对定位，使其脱离文档流，内容区域经过calc()函数计算剩余宽度并设置宽度，再加一个margin-left，值为侧边栏的宽度。

代码以下：

html

<div class="slider"></div>
<div class="main"></div>

css

*{
    margin: 0;
    padding: 0;
}
body,html{
    width: 100%;
    height: 100%;
}
.slider,.main{
    height: 100%;
}
.slider{
    position: absolute;
    left: 0;
    top: 0;
    width: 100px;
    background: black;
}
.main{
    width: calc(100% - 100px);
    background: red;
    margin-left: 100px;
}

flex属性

经过flex属性实现思路也很简单，将父元素设置为flex，侧边栏宽度固定，内容区域设置flex:1便可充满剩余区域。

代码以下：

html

<div class="slider"></div>
<div class="main"></div>

css

*{
    margin: 0;
    padding: 0;
}
body,html{
    width: 100%;
    height: 100%;
}
body{
    display: flex;
}
.slider,.main{
    height: 100%;
}
.slider{
    width: 100px;
    background: black;
}
.main{
    flex: 1;   
    background: red;
}

3列布局

3 列布局在平常开发中使用频率也是很高的，其按照左中右的顺序进行排列，一般中间列最宽，左右两列次之。左右两边定宽，中间自适应，能根据屏幕大小作响应。

效果图

仍是先来看看效果图

代码实现

三列布局的实现方法也不少，这里主要介绍两种（双飞翼布局、圣杯布局、flex布局）

在介绍双飞翼布局和圣杯布局以前要先说一下margin设置负值的做用：

当margin的值设为负值的时候，元素会对应的像那个放向移动，好比margin-left为负值，元素则会左移

双飞翼布局

代码以下：

html

<div class="main">
    <div class="middle">
        <div class="content">
            中间
        </div>
    </div>
    <div class="left">
        左边
    </div>
    <div class="right">
        右边
    </div>
</div>

css

* {
    margin: 0;
    padding: 0;
}

body,
html {
    width: 100%;
    height: 100%;
}
div{
    height: 100%;
}
.main>div {
    float: left;
}

.left {
    width: 200px;
    background: red;
    margin-left: -100%;
}

.right {
    width: 200px;
    background: blue;
    margin-left: -200px;
}

.middle {
    width: 100%;
    background: yellow;

}

.content {
    margin-left: 200px;
    margin-right: 200px;
}

圣杯布局

代码以下:
html

<div class="main">
    <div class="center">中间中间中间中间中间中间中间后</div>
    <div class="left">左边</div>
    <div class="right">右边</div>
</div>

css

* {
    margin: 0;
    padding: 0;
}

.main {
    height: 200px;
    padding: 0 150px 0 200px;
    background: greenyellow;
    *zoom: 1;
}

.left,
.center,
.right {
    float: left;
}

.center {
    width: 100%;
    height: 200px;
    background: red;
}

.left {
    width: 200px;
    height: 200px;
    background: yellow;
    margin-left: -100%;
    position: relative;
    left: -200px;
}

.right {
    width: 150px;
    height: 200px;
    background: gainsboro;
    margin-left: -150px;
    position: relative;
    left: 150px;
}

双飞翼布局其实和圣杯布局的精髓是同样的，都是经过设置负margin来实现元素的排布，不一样的就是html结构，双飞翼是在center元素内部又设置了一层inner-center的元素并设置它的左右margin，而非圣杯布局的padding，来排除两边元素的覆盖。因此这两种布局原理基本同样，关键就是在于设置负margin的技巧，和元素浮动的相对定位技巧来实现。

flex布局

代码以下:
html

<div class="main">
    <div id="left">左边定宽</div>
    <div id="main">中间自适应</div>
    <div id="right">右边定宽</div>
</div>

css

* {
    padding: 0px;
    margin: 0px;
}
body,html{
    width: 100%;
    height: 100%;
}
body{
    display: flex;
}

#left,
#right {
    width: 100px;
    background-color: #0FC;
}
#main {
    flex: 1;
    background-color: #999;
}

若是不考虑浏览器兼容问题的话，运用flex布局是最简单的方式。

垂直方向的布局（sticky footer）

这种布局将页面分红上、中、下三个部分，上、下部分都为固定高度，中间部分高度不定。当页面高度小于浏览器高度时，下部分应固定在屏幕底部；当页面高度超出浏览器高度时，下部分应该随中间部分被撑开，显示在页面最底部。

这种布局也称之为sticky footer，意思是下部分粘黏在屏幕底部。

代码实现

首先咱们先构建简单的HTML代码

<body>
　　<div class="content"></div>
　　<div class="footer"></div>
</body>

其中content为咱们的内容区。下面开始介绍解决方法。

为内容区域添加最小的高度

这种方法重要用vh(viewpoint height)来计算总体视窗的高度(1vh等于视窗高度的1%),而后减去底部footer的高度，从而求得内容区域的最小高度。例如咱们能够添加以下样式：

.content{
     min-height:calc(100vh-footer的高度);
     box-sizing:border-box;
}

从而这个问题就解决了，可是若是页面的footer高度不一样怎么办?每个页面都要从新计算一次，这是很麻烦的，因此这种方法虽然简单但倒是不推荐的。

使用flex布局

这种方法就是利用flex布局对视窗高度进行分割。footer的flex设为0，这样footer得到其固有的高度;content的flex设为1，这样它会充满除去footer的其余部分。

代码以下：

body { 
    display: flex; 
    flex-flow: column; 
    min-height: 100vh;
 }
 .content {
    flex: 1; 
}
.footer{
    flex: 0;      
}

这样的布局简单使用，比较推荐。

在content的外面能够添加一个wrapper

这种方法就是在content的外面添加一个包裹容易，将html代码改为这样：

<body>
    <div class="wrapper">
        <div class="content"></div>
    </div>　
　　<div class="footer"></div>
</body>

而后添加如下样式：

html, body, .wrapper {
     height: 100%;
}
body > .wrapper {
     height: auto; 
     min-height: 100%;
}
.content {
    padding-bottom: 150px; /* 必须使用和footer相同的高度 */
}  
.footer {
    position: relative;
    margin-top: -150px; /* footer高度的负值 */
    height: 150px;
    clear:both;
}

另外，为了保证兼容性，须要在wrapper上添加clearfix类。其代码以下：

<body>
    <div class="wrapper clearfix">
        <div class="content"></div>
    </div>　
　　<div class="footer"></div>
</body>

.clearfix{
     display: inline-block;
}
.clearfix:after {
     content: ".";
     display: block;
     height: 0;
     clear: both;
     visibility: hidden;
}

ok,好，完成了，这种方法也比较推荐，但就是加入的代码比较多，也改变了html的文档结构。

粘性布局（sticky）

粘性布局是什么呢？咱们先来看看效果演示

没错，其实就是在页面滚动的时候保持元素（这里的是标题）在页面视图上方，也就是咱们经常看到的 吸附效果。

标题行设置了背景色。若是不设置背景色（背景透明），正常文档流的文字就会和标题行文字重叠在一块儿显示。

sticky定位的元素会遮住滚动而来的“正常”的文档流；后面的sticky元素会覆盖前面的sticky元素，就好像一层层的便利贴，是否是很酷~~。

代码实现

实现粘性布局主要依靠position的sticky属性。

position: sticky;

先来看看兼容性：

从Can I use上查询能够看出，sticky的兼容性并非太好，因此你们使用的时候要慎重考虑，若是不要求兼容的状况，用这个仍是至关的舒服了。

下面给出一个简单的示例。

html:

<main>
    <header>标题一</header>
    <div class="content">
    </div>
    <header>标题二</header>
    <div class="content">
    </div>
    <header>标题三</header>
    <div class="content">
    </div>
    <header>标题四</header>
    <div class="content">
    </div>
</main>

js(不想写太多p标签，因此用js生成，偷个懒):

let num = 20
let html = ''
for (var i = 0; i < num; i++) {
    html += `<p>${i + 1}</p>`
}
Array.prototype.slice.call(document.getElementsByClassName('content')).forEach(item=>{
    item.innerHTML = html
})

css:

main {
    width: 400px;
    height: 300px;
    margin: 200px auto;
    overflow: auto;
}
header {
    position: sticky;
    top: 0;
    height: 30px;
    background-color: blanchedalmond;
}