CSS布局简述

在CSS中，通过盒模型，利用display+position+float以及margin、padding等属性可以做出传统的横向或纵向布局。

一、左右布局
左右两列的纵向布局较为简单，由于块级元素独占一行，因此在文档流中块级元素是从上至下依次显示，为单列布局，通过设置子元素浮动属性，来让子元素在父元素中浮动起来，通过设置其宽度和margin可以限制其在一行中显示的子元素和个数和其相互之间的距离。子元素浮动时要注意清楚浮动，不然会出现父元素在高度未设定的情况下会出现的高度塌陷的问题，清除浮动的方式较多，一般使用after伪元素的方式，方法为父元素设置clearfix类名，CSS样式为.clearfix::after{content:'';display:block;clear:both;}。

二、左中右布局
左中右三列布局可参考左右两列布局，通过设置子元素的宽度和margin等属性来调整子元素在一行中的显示个数和对齐。
圣杯布局和双飞翼布局是经典的左中右三列布局，两者的实现原理基本类似。以圣杯布局为例，设置左中右三个子元素浮动，中间子元素宽度为100%，左右子元素宽度为定值，然后通过设置左右子元素负边距让其与中间子元素位于一行，然后通过position:relative设置偏移量，并设置父元素左右padding让三个子元素一行显示并不遮挡。圣杯布局在HTML中要先写中间子元素后写左右子元素，中间子元素就可以先加载。由于中间子元素宽度为100%，左右子元素宽度为定值，这样就做出了一个两边定宽、中间自适应的三栏布局（通常会给父元素设置一个min-width属性）。

三、水平居中
块级元素水平居中可通过设置其左右margin为auto来实现，行内元素可设置text-align:center;来实现。

四、垂直居中
垂直居中是CSS中一个比较麻烦的问题，知乎上看到一个凭借八种垂直居中方式找到工作的帖子....垂直居中实现的方式的很多，这里介绍简单的两种。单行文字的垂直居中可以简单的设置line-heigt等于height来显示，多行文字则可以模拟表格，通过设置vertical-align:middle;来实现（代码中两种方式都用了）。
预览链接：https://blamedeng.github.io/CSS/San-greal.html
预览图片：

部分CSS样式：

   .middle {
        width: 100%;
        height: 600px;
        color: red;
        display: table;
        background-color: yellow;
        float: left;
    }

    .middle span {
        display: table-cell;
        vertical-align: middle;
        height: 600px;
        font-size: 25px;
        font-weight: bold;
    }

    .left {
        width: 150px;
        height: 600px;
        color: white;
        background-color: rgb(173, 78, 153);
        text-align: center;
        float: left;
        margin-left: -100%;
        position: relative;
        left: -150px;
    }

    .right {
        width: 150px;
        height: 600px;
        color: white;
        background-color: rgb(85, 131, 42);
        float: left;
        margin-left: -150px;
        position: relative;
        right: -150px;
    }

    .right span {
        display: inline-block;
        height: 600px;
        line-height: 600px;
    }

五、其他布局方式
Flex布局是现在最常用的布局方式。