css盒子分成3份

使用CSS将一个盒子分成3份是非常实用的技巧。比如在制作导航栏或者网站布局时，经常需要将网页宽度分成若干列，这样可以更好地组织页面结构和展示内容。

html:
<div class="container">
  
 <div class="left"></div>
  
 <div class="middle"></div>
  
 <div class="right"></div>
</div>
css:
.container{
  display: flex;
  justify-content: space-between;
}
.left{
  width: 30%;
}
.middle{
  width: 40%;
}
.right{
  width: 30%;
}
 

以上的代码中，我们创建了一个名为.container的div盒子，并在其中创建了三个子盒子，分别是左边栏(left)、中间区域(middle)、右边栏(right)。我们使用了flex布局，并通过justify-content属性设置了它们的间距。其中左边栏的宽度为30%，中间区域的宽度为40%，右边栏的宽度为30%。

需要注意的是，我们这里使用了相对宽度（百分比）而非绝对宽度（像素值），这样可以使得网页在不同设备或者不同屏幕尺寸下都能够表现良好。

在实际应用中，我们还可以对三个子盒子进行自由排列、定位、样式设计等操作，实现更加丰富多样的布局效果。