浅析CSS等高布局的6种方式

CSS等高布局是指在一个网页中多个容器的高度相等，不管其中任何一个容器的高度发生了变化，其他容器也跟随进行调整。这篇文章将会介绍6种常用的CSS等高布局方法。

1. flexbox布局

flexbox是CSS3新增加的一种布局模式，可以很方便的实现网页的等高布局。其主要特点是元素可以沿着容器的主轴（main axis）或交叉轴（cross axis）进行排列。通过设置元素的flex属性，可以实现等高布局。

.container {
  display: flex;
  flex-wrap: wrap;
}

.box {
  flex: 1;
}

在这个例子中，我们设置了一个父容器container，它的display属性被设置为flex，表示采用了flexbox布局。我们还设置了flex-wrap属性为wrap，这样子元素会被分到多行中。子元素的flex属性被设置为1，表示等分父容器的空间。

2. table布局

table布局是CSS2推出的一种布局模式，通过设置display属性为table及其相关的属性，可以实现等高布局。

.container {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.box {
  display: table-cell;
}

这个例子中，我们将父容器的display属性设置为table，子元素设置为table-cell。这样子元素就会像table中的单元格一样排列，保持等高。

3. inline-block布局

inline-block布局表示元素的display属性被设置为inline-block，此时元素会按照块级元素的方式排列并保持等高。

.container {
  font-size: 0;/*解决inline-block间距问题*/
  letter-spacing: -4px;/*同上*/
}

.box {
  display: inline-block;
  width: 33.333333%;
  vertical-align: top;/*对齐方式*/
}

在这个例子中，我们需要给父容器设置font-size为0以及letter-spacing为-4px，以解决行内块级元素之间的留白问题。box元素设置为inline-block，width设置为33.333333%以实现等分布局。

4. float布局

在float布局中，元素首先被浮动到指定的位置，其父容器也会随之发生重叠, 然后通过设置clear属性使父容器撑起高度。

.container {
  overflow: hidden;
}

.box {
  float: left;
  width: 33.333%
}
.box:last-child {
  float: right;
}

在这个例子中，我们给父容器设置了overflow:hidden，以防止子元素浮动造成的溢出问题。我们将box设置成浮动元素，width设置为33.333%以实现等分布局。同时，我们对最后一个元素进行了特殊处理，将其设置为float:right，使其出现在父容器的最右边。

5. Grid布局

CSS Grid布局是CSS3新增加的一种二维布局模式，可以非常方便的实现网页的等高布局。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.box {
  border: 1px solid #ccc;
}

这个例子中，我们设置了一个父容器container，它的display属性被设置为grid，表示使用grid布局。我们使用grid-template-columns属性将父容器分成了三列，让子元素分别占据每一列。子元素的高度会自动与最高元素保持一致。

6. CSS Calc

calc是CSS3的一个函数，可以进行简单的数学计算。通过结合百分比和calc()函数，可以实现网页等高布局。

.container {
  font-size: 0;
  letter-spacing: -4px;
}

.box {
  display: inline-block;
  width: calc(33.333333% - 4px);
  vertical-align: top;
}

在这个例子中，我们同样需要对父容器进行font-size和letter-spacing的设置来解决行内块间距的问题。然后使用calc函数计算出每个子元素的宽度，这里减4px是为了弥补行内块间距。

以上就是6种常用的CSS等高布局方式。通过灵活运用，可以实现网页的高效布局。