CSS布局简要

1.左右布局

上图就是一个典型的左右布局，左图，右content；

1.用一个

包裹住两个

，两个

在其中实现左右布局，一个放图片，一个放文本；

2.主要用到两个style：

    div{ float: left; }

    .clearfix::after{ content: ''; display: block; clear: both; }    /* 为了消除浮动 */

简历demo（检查元素查看）

2.左中右布局

这个勉强也算作左中右布局的一种，两边留白，中间内容居中，主要用到三个style：

        max-width: 940px;

        margin-left: auto;

        margin-right: auto;

max-width是限定了中间内容的最大宽度，由于当前有布局居中需求，所以左右用auto来自适应，如果不需要，可自拟。

3.水平居中

直接给

包裹住的内联文件一个style：

    text-align：center；

所以存在一个问题，如果

中包裹的也是

呢？

这种情况，就需要用到 display：inline-block; 将

元素转变为内联元素，再对其进行居中；

4.垂直居中

    通过verticle-align:middle实现CSS垂直居中。

通过vertical-align:middle实现CSS垂直居中是最常使用的方法，但是有一点需要格外注意，vertical生效的前提是元素的display：inline-block。

    方法有多种，这里取其一；

5.小技巧

    css的布局是否顺利流畅很多时候与选择器class的布局有关；

    遇到问题多往文档流的方面思考。