页面布局-等分 2.16

<div class="parent">
    <div class="column"><p>1</p></div>
    <div class="column"><p>2</p></div>
    <div class="column"><p>3</p></div>
    <div class="column"><p>4</p></div>
</div>

1.float

.parent{margin:-20px;} <!--父容器增加G-->
.column{
           float:left; 
           width:25%;
           padding-left:20px;
           box-sizing:border-box; <!--让宽度包含padding-left-->
}

box-sizing:border-box; 为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

缺点：
IE6/7兼容性不太好，IE8以上兼容完全没问题；
结构和样式耦合性（列数变化，CSS样式中width也需要修改）

2.table

<div class="parent-fix">
  <div class="parent">
    <div class="column"><p>1</p></div>
    <div class="column"><p>2</p></div>
    <div class="column"><p>3</p></div>
    <div class="column"><p>4</p></div>
  </div>
</div>

.parent-fix{margin-left:-20px;}
.parent{display:table; width:100%;table-layout:fixed;}
.column{display:table-cell;padding-left:20px;}

tableLayout 属性用来显示表格单元格、行、列的算法规则。
automatic 默认。列宽度由单元格内容设定。
fixed 列宽由表格宽度和列宽度设定。
inherit 规定应该从父元素继承 table-layout 属性的值
固定表格布局：固定表格布局与自动表格布局相比，允许浏览器更快地对表格进行布局。在固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关。通过使用固定表格布局，用户代理在接收到第一行后就可以显示表格。
自动表格布局：在自动表格布局中，列的宽度是由列单元格中没有折行的最宽的内容设定的。此算法有时会较慢，这是由于它需要在确定最终的布局之前访问表格中所有的内容.

①单元格不能设置margin，padding有效
②table-layout:fixed; a、布局优先，加速渲染；b、没设单元格宽度，则平分
结构和样式已解耦

3.flex

    .parent{display:flex;}
    .column{flex:1;}<!--分配的是剩余空间t-->
    .column+.column{margin-left:20px;} <!--表示一个column下面的column-->

已解耦