css盒子之间的宽度

CSS盒子模型是网页设计中非常重要的一部分，它包括了盒子的宽度、高度、内边距和边框等属性。在盒子模型中，有时需要处理多个盒子之间的宽度，这样才能让网页的排版更加美观和合理。

.box {
  width: 200px;
  height: 200px;
  background-color: #f2f2f2;
  border: 1px solid #ccc;
  padding: 10px;
  margin: 10px;
}
.inner-box {
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  background-color: #e6e6e6;
  border: 1px solid #999;
  padding: 10px;
  margin: 10px;
}
 

在上面的代码中，我们定义了两个盒子，一个是.box，另一个是.inner-box。.box是外层的盒子，它有10px的内边距和外边距，所以实际上它的宽度是222px（200px + 10px * 2 + 1px * 2）。

我们希望.inner-box能够占据.box的全部空间，同时内边距和边框的宽度为10px。这时就需要使用calc()函数，它可以让我们在CSS中进行简单的数学运算。在这里，我们使用calc(100% - 20px)来计算.inner-box的宽度，它会自动减去两边的边框和内边距。

通过这个方法，我们可以轻松地处理多个盒子之间的宽度问题，实现更加灵活的网页布局。