css calc 九宫格

CSS3的出现为前端开发带来了很多便利，其中calc函数便是其中之一。calc函数可以减少我们在CSS中重复书写的代码，特别是对于一些复杂的布局样式。下面我们来看如何用calc函数来实现九宫格。

.container{
  display:flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: calc(100% - 20px);
  padding: 10px;
  background-color: #eee;
}

.Box{
  width: calc(33.33% - 10px);
  height: calc(33.33% - 10px);
  margin-bottom: 10px;
  background-color: #fff;
}

在上述代码中，我们使用了calc函数来计算容器的宽度和每一个小格子的宽高以达到九宫格的效果。其中calc函数中的“%”可以用来表示元素的相对宽度，也可以用来表示元素的相对高度，同时也可以在计算中使用“+”、“-”、“*”和“/”等数学运算符。

上述代码中，我们使用了一个固定的10px的padding和一个20px的总margin来限定外层容器的大小。在计算容器宽度时，我们使用了100%减去20px的总margin的方式，这样我们就可以达到一个响应式的布局样式。而在每一个小格子的样式中，我们使用了33.33%减去10px的margin-bottom，这样可以确保每一列的小格子个数都是相等的。

使用calc函数可以帮助我们轻松地实现多数复杂的布局，减少无效的代码量，极大地提高了代码的可维护性和易读性。