css 3等分宽度

CSS 3提供了许多新的特性，其中之一是等分宽度。当我们需要将一个容器分成几个等宽区块时，CSS 3提供了以下几种方法：

/*方法1：使用flex布局*/
.container {
  display: flex;
}

.item {
  flex: 1;
}

/*方法2：使用calc()函数*/
.item {
  width: calc(100% / 3);
  Box-sizing: border-Box;
}

/*方法3：使用table布局*/
.table {
  display: table;
  width: 100%;
}

.cell {
  display: table-cell;
  width: 33.33%;
}

以上三种方法各有优劣：

• Flex布局适用于较新的浏览器，但它的语法较为简洁。
• Calc()函数适用于大多数浏览器，但需要注意Box-sizing属性的设置。
• Table布局兼容性最好，但HTML结构容易变得复杂。

无论采用哪种方法，我们都需要考虑容器的padding、border等属性对等分宽度所产生的影响。当容器有padding时，我们可以将容器设置为Box-sizing: border-Box，以使内容区域的宽度不受padding的影响。当容器有border时，我们需要将容器的宽度减去border的宽度，以保证等分宽度的计算正确。