Web前端中的几种流行布局

2019-01-26 本文已影响0人这里王工头

欢迎访问我的博客https://qqqww.com/，祝码农同胞们早日走上人生巅峰，迎娶白富美~~~

圣杯布局

圣杯布局是一种三列布局，两边定宽，中间宽度自适应

圣杯布局可以将整个div.container看做一个奖杯，div.left和div.right看做奖杯的两个耳朵

圣杯布局的原理就是当子元素处于浮动状态时，设置负margin，子元素会叠盖到兄弟元素之上

方法一：利用 BFC 元素与浮动元素不会相互覆盖的特性，实现圣杯布局

三个盒子都加上背景色，方便观察，两边固定宽度，左边左浮动，右边右浮动，中间创建 BFC

    <div class="left">left</div>
    <div class="middle">middle</div>
    <div class="right">right</div>

        html, body { margin: 0; padding: 0; }
        .left {
        background: yellow;
            float: left;
            width: 180px;
        }
        .middle {
            background: blue;
            overflow: hidden;    
        }
        .right {
            background: red;
            width: 180px;
            float: right;
        }

BFC实现圣杯布局1

此时发现div.right这个盒子掉下来了，为什么呢？是因为由于div.middle这个盒子是自适应宽度并且在结构中先渲染，此时会提前挤占剩余宽度，所以会将div.right盒子挤下来，而解决办法就是让div.right盒子先渲染，原理是浮动元素脱离文档流，并提前浮动到右边，且 BFC 元素与浮动元素不会相互覆盖，此时div.middle再去占有剩余宽度就可以了

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        html, body { margin: 0; padding: 0; }
        .left {
        background: yellow;
            float: left;
            width: 180px;
        }
        .middle {
            background: blue;
            overflow: hidden;    
        }
        .right {
            background: red;
            width: 180px;
            float: right;
        }
    </style>
</head>
<body>
    <div class="left">left</div>
    
    <div class="right">right</div>
    <div class="middle">middle</div>    
</body>
</html>

此时再去浏览器，拉伸一下浏览器或者缩小浏览器，看看效果就两边宽度固定中间自适应了

[图片上传失败...(image-b331fa-1548491213508)]

方法二：margin的应用

先把三个盒子呈现出来

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

        * {
            margin: 0;
            padding: 0;
        }
        html, body {
            width: 100%;
        }
        .left, .middle, .right {
            min-height: 150px;
        }
        .left, .right {
            width: 220px;
        }
        .left {
            background-color: yellow;
        }
        .middle {
            background-color: blue;
        }
        .right {
            background-color: red;
        }

圣杯布局之呈现盒子

此时三者是垂直排列，需要将他们横向排列，所以给三者都添加浮动

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

圣杯布局之浮动

这时候只是达到了三个盒子在一行的效果，并不能达到前面自适应的需求，而且整个页面不正常了，不着急，继续下一步，设置div.container的盒模型，使得父元素两边留白，留够div.left和div.right的空间

        .container {
            padding: 0 220px;
        }

给div.middle设置100%宽度，使其自适应

        .middle {
            width: 100%;
        }

设置div.left和div.right的负外边距，让其到div.container留白位置

        .left {
            margin-left: -220px;
        }
        .right {
            margin-right: -220px;
        }

此时惊奇的发现，这三列已经排列正常，且能自适应了

[图片上传失败...(image-429de0-1548491213508)]

但是发现，div.footer上去了，很简单，这是因为三个浮动元素会脱离标准文档流，所以div.footer会上去占有他们的文档流，解决办法是将div.footer设置一个BFC区域就行，BFC区域详细文档可以看BFC

.footer {
    overflow: hidden;
}

[图片上传失败...(image-97b930-1548491213508)]

完整代码看这里：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        html, body { width: 100%; margin: 0; padding: 0; }
        .header,
        .footer {
            overflow: hidden;
            width: 100%;
            background-color: #ccc;
            text-align: center;
        }
        .container {
            padding: 0 220px;
        }
        .left,
        .middle,
        .right {
            position: relative;
            float: left;
            min-height: 150px;
        }
        .left,
        .right {
            width: 220px;
        }
        .left {
            margin-left: -220px;
            background-color: yellow;
        }
        .middle {
            width: 100%;
            background-color: blue;
        }
        .right {
            margin-right: -220px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="header">header</div>
    <div class="container">
        <div class="left">left</div>
        <div class="middle">middle</div>
        <div class="right">right</div>
    </div>  
    <div class="footer">footer</div>
</body>
</html>

双飞翼布局

看完了圣杯布局，来看双飞翼布局，其实和圣杯布局差不多，可以将div.container看做一只大鸟，将div.middle看做鸟的身体，将div.left和div.right看做鸟的两个翅膀

实现方式与圣杯布局差不多，但在解决中间栏div.middle部分的思路不一致

直接上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        html, body { width: 100%; margin: 0; padding: 0; }
        .header,
        .footer {
            clear: both;
            width: 100%;
            background-color: #ccc;
            text-align: center;
        }
        .left,
        .main,
        .right {
            float: left;
            height: 150px;
            text-align: center;
        }
        .left,
        .right {            
            width: 220px;
        }
        .left {
            margin-left: -100%;
            background-color: yellow;
        }
        .main {
            width: 100%;
        }
        .middle {
            min-height: 150px;
            margin: 0 220px;
            background-color: blue;
        }
        .right {
            margin-left: -220px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="header">header</div>
    <div class="container">
        <div class="main">
            <div class="middle">middle</div>
        </div>
        <div class="left">left</div>
        
        <div class="right">right</div>
    </div>  
    <div class="footer">footer</div>
</body>
</html>

圣杯布局 VS 双飞翼布局

主要是针对于中间div.middle的处理思路不一样

圣杯布局是先留白，在用margin让两边过去，利用了相对布局

双飞翼布局多创建一个div，包裹middle，利用margin为负值来布局

相比较而言，双飞翼布局比圣杯布局多用了个div，container的padding不需要加了，相对布局position: relative，双飞翼布局的子div用margin布局

注意：两种布局一般都需要将div.middle这一栏提到结构div.left的上面先渲染

前面分析了圣杯布局和双飞翼布局，了解到他们的原理实际上都是是当子元素处于浮动状态时，设置负margin，子元素会叠盖到兄弟元素之上

那么将中间是三个盒子的代码再复制一份，嵌套在div.middle中，看看效果

圣杯嵌套

此时会发现，中间div.middle部分多一部分盒子，且依然满足两边固定，中间宽度自适应，这个很像Bootstrap里的栅格嵌套

栅格布局

Bootstrap的栅格布局提供了一套响应式的解决方案，其实把这套布局拆分来看，分为这几部分：

container的设计

响应式布局实现

行

列

其中行和列的布局原理和圣杯布局原理一样

container设计

[图片上传失败...(image-bea590-1548491213508)]

响应式布局实现

@media媒体查询

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {/*当宽度大于768px时触发*/
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {/*当宽度大于992px时触发*/
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {/*当宽度大于1200px时触发*/
  .container {
    width: 1170px;
  }
}
.container-fluid { /*这个是宽度默认*/
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

行（row）

row实现

.row {
  margin-right: -15px;
  margin-left: -15px;
}

列（col）

Bootstrap分别将他们分割成12份，意思是你可以随意使用者12份，加起来要正好12，并能自己调整分配数字

column

Bootstrap实现了更好的响应式布局，列的种类是有很多种的

.col-xs-* 针对超小屏幕手机（<768px）

.col-sm-* 小屏幕平板 (≥768px)

.col-md-* 中等屏幕桌面显示器 (≥992px)(栅格参数)

.col-lg-* 针对特大的（≥1200px）

例子：

表示小屏幕手机采用col-sm-6布局，中屏幕手机采用col-md-4布局

<div class="col-sm-6 col-md-4"></div>

Bootsrap中关于栅格布局的代码实现，很多，这里不粘贴了，原理就是前面所说的，可以去官网看

当然，Bootstrap远不止实现了上面那点东西，例如 .col-md-offset-* .col-md-push-* 能够实现很好的细节的排版等等很多，这个神奇的东西还是需要慢慢领悟的~~，下面不能废话了，继续回归正题，说布局

Flex布局

参考文档：Flex布局

绝对定位布局

绝对定位布局很多地方都有应用，依靠绝对定位，想定到哪，定到那，这里不细说