CSS布局

１.左中右布局

一行内有三块，左右固定，中间内容随着宽度收缩而进行变化
思路：左浮动，右浮动，中间内容padding 左右

<div>
    <div style={{ float: 'left', width: '100px' }}>左边</div>
    <div style={{ float: 'right', width: '100px' }}>右边</div>
    <div style={{ paddingLeft: '100px', paddingRight: '100px' }}>这是content</div>
</div>

2:单列布局水平居中

行内一块，水平居中，多出现于标题，以及内容区域的组织形式，下面介绍四种实现水平居中的方法（注：下面各个实例中实现的是child元素的对齐操作，child元素的父容器是parent元素）

a: 使用inline-block 和 text-align实现

.parent{text-align: center;}
.child{display: inline-block;}

优点：兼容性好；
缺点：需要同时设置子元素和父元素

b: 使用margin:0 auto来实现

.child{width:200px;margin:0 auto;}

优点：兼容性好；
缺点：需要指定宽度,并且是块元素

c.使用table实现

.child{display:table;margin:0 auto;}

优点:只需要对自身进行设置
缺点:IE6,7需要调整结构

d.使用绝对定位实现

.parent{position:relative;}
/*或者实用margin-left的负值为盒子宽度的一半也可以实现，不过这样就必须知道盒子的宽度，但兼容性好*/
.child{position:absolute;left:50%;transform:translate(-50%);}

缺点：兼容性差,IE9及以上可用

e.使用flex布局实现

/*第一种方法*/
.parent{display:flex;justify-content:center;}
/*第二种方法*/
.parent{display:flex;}
.child{margin:0 auto;display:block}

缺点：兼容性差，如果进行大面积的布局可能会影响效率

3.垂直居中

a.inline-block实现

“inline-block依赖型元素”,只有一个元素属于inline或是inline-block（table-cell也可以理解为inline-block水平）水平，其身上的vertical-align属性才会起作用。我对css-vertical-align的一些理解与认识.

在使用vertical-align的时候，由于对齐的基线是用行高的基线作为标记，
故需要设置line-height或设置display:table-cell;

/*第一种方法*/
.parent{display:table-cell;vertical-align:middle;height:20px;}
/*第二种方法*/
.parent{display:inline-block;vertical-align:middle;line-height:20px;}

b.使用绝对定位

.parent{position:relative;}
.child{positon:absolute;top:50%;transform:translate(0,-50%);}

c.使用flex实现

.parent{display:flex;align-items:center;}

4.水平垂直全部居中

a.利用flex实现

.parent{display:flex;justify-content:center;align-items:center;}

b.利用vertical-align和height实现

.child{height:200px;line-height:200px}

c.利用绝对布局

 .child{
    width: 200px;
    height:200px;/*元素的高度*/
    position: absolute;
    left: 50%;/*配合margin-left的负值实现水平居中*/
    margin-left: -100px;/*值的大小等于元素宽度的一半*/
    top:50%;/*配合margin-top的负值实现垂直居中*/
    margin-top: -100px;/*值的大小等于元素高度的一半*/
}

缺点：宽高必须已知

d.利用table属性

.parent {
    height: 300px;
    display: table;/*让元素以表格形式渲染*/
}
.child {
    display:table-cell;/*让元素以表格的单元素格形式渲染*/
    vertical-align: middle;/*使用元素的垂直对齐*/
}

优点：
这种方法不会像前面的两种方法一样，有高度的限制，此方法可以要据元素内容动态的改变高度，从而也就没有空间的限制，元素的内容不会因为没足够的空间而被切断或者出现难看的滚动条。
缺点：
不足之处呢？这种方法只适合现代浏览器，在IE6-7下无法正常运行；而且较前两者而言，结构也更复杂。

5.多列布局左列定宽，右列自适应

该布局方式非常常见，适用于定宽的一侧常为导航，自适应的一侧为内容的布局

a.利用float+margin实现

.left{float:left;width:100px;}
.right{margin-right:10px}

b.使用flex布局实现

.parent{display:flex;}
.left{width:100px;}
.right{flex:1;}

6.右列定宽，左列自适应

a.使用flex布局

.parent{display:flex;}
.left{flex:1;}
.right{width:100px;}

7.两列定宽，一列自适应

a.利用flex实现

.parent{display:flex;}
.left,.center{width:100px;}
.right{flex:1}

8.两侧定宽，中栏自适应

a.利用flex实现

.parent{display:flex;}
.left{width:100px;}
.center{flex:1;}
.right{width:100px;}

b.利用float+margin实现

.left{width:100px;float:left;}
.center{width:100%;margin-left:100px;margin-right:100px;}
.right{width:100px;float:right;}

9.一列不定宽，一列自适应

a.利用flex实现

.parent{display:flex;}
.right{flex:1;}

10.多列等分布局

html结构

<div class="parent">
    <div class="column">1</div>
    <div class="column">1</div>
    <div class="column">1</div>
    <div class="column">1</div>
</div>

a.利用flex实现

.parent{display:flex;}
.column{flex:1;}

b.使用float实现

.column{float:left;width:25%;box-sizing:border-box;}

11.九宫格布局

html结构

        <div className="parent">
          <div className="row">
            <div className="item" />
            <div className="item" />
            <div className="item" />
          </div>
          <div className="row">
            <div className="item" />
            <div className="item" />
            <div className="item" />
          </div>
          <div className="row">
            <div className="item" />
            <div className="item" />
            <div className="item" />
          </div>
        </div>

a.使用flex布局实现

.parent{display:flex;flex-direction:column;}
.row{height:100px;display:flex;}
.item{width:100px;background:red;}

b.使用table布局实现

    .parent {
      display: table;
      table-layout: fixed;
      width: 100%;
    }
    .row {
      display: table-row;
    }
    .item {
      display: table-cell;
      width: 33.3%;
      height: 200px;
    }