css实现div等分不受高度影响

CSS实现DIV等分是网页设计中一个非常常见的需求，但在实际应用中，我们经常会遇到高度不同导致等分不成功的情况，下面将介绍如何使用CSS来实现等分不受高度影响。

在这里，我们需要了解一下两个CSS属性：

Box-sizing: border-Box;
display: flex;

Box-sizing可以使元素的大小计算方式发生变化，将元素的宽度、高度计算公式中包括padding和border，这样就不会受到padding和border的影响。而display:flex可以把元素做成flex容器，使内部元素可以更方便的实现对齐和布局。

首先，我们需要一个父元素来装载我们需要等分的子元素。在这个父元素上设置display:flex和flex-wrap: wrap属性，在子元素中设置flex:1，这样就可以做到子元素等分。如果需要给每个元素添加margin，可以在父元素上设置justify-content和align-items属性。代码如下：

.parent {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.child {
  Box-sizing: border-Box;
  flex: 1;
  margin: 0 10px;
}

需要注意的是，上述代码中的child元素必须设置Box-sizing:border-Box属性，否则会因为padding和border的影响而导致等分不成功。

通过上述CSS样式，我们可以轻松地实现等分不受高度影响。如果你在实际开发过程中遇到如此需求，可以考虑使用上述代码进行实现。