css三个盒子并列

在CSS中，盒子模型是非常重要的一个概念，它指的是HTML元素在页面中占据的空间大小，由content、padding、border和margin四部分组成。在此基础上，我们可以通过CSS的布局来实现不同的页面效果，其中，三个盒子并列是一种常见的布局方式。

.box{
  width: 300px;
  height: 200px;
  background-color: #ccc;
  margin-right: 20px;
  float: left;
  box-sizing: border-box;
  padding: 20px;
  border: 1px solid #666;
} 

代码中，我们定义了一个类名为“box”的元素，并设置它的宽度为300px，高度为200px，背景颜色为灰色，右侧距离为20px，使用了浮动布局，并开启了“盒子模型/box-sizing”属性，这样我们设置的padding和border值就不会再撑大盒子。

.container{
  width: 660px;
  margin: 0 auto;
} 

为了让三个盒子在页面中居中显示，我们还需要设置它们的容器元素。在代码中，我们定义了一个类名为“container”的元素，并设置它的宽度为660px，外部距离为auto，也就是自动居中。

通过以上代码，我们就可以实现三个盒子并列的页面效果了。当然，在实际开发中还需要考虑不同分辨率设备的显示效果等因素，这需要更加细致的调整和优化。