CSS是网页开发中不可或缺的一部分，使用CSS能够让网页的样式变得更加美观和灵活，div布局也是CSS中的一大亮点，下面我们来学习一下如何使用CSS中的div布局。

首先我们需要在HTML文件中添加一个div元素，代码如下：

<div id="container"><div ></div><div ></div><div ></div></div>

上面的代码中，我们创建了一个id为container的div元素和三个class为box的div元素，其中container是我们用来包裹box元素的容器。

接下来我们需要使用CSS来定义这些元素的样式，代码如下：

#container {width: 960px;margin: 0 auto;}.box {width: 300px;height: 200px;float: left;margin-right: 20px;background-color: #ccc;}.box:last-child {margin-right: 0;}

上面的代码中，我们为container元素设置了一个宽度，居中显示。然后我们为box元素设置了固定的宽度和高度，并使用float属性将它们按照从左到右的顺序排列。最后我们使用margin-right属性在每个box元素之间添加了20px的间距，同时使用:last-child选择器为最后一个box元素去掉了右边的间距。

这样在浏览器中预览我们的页面时，就会看到一个宽度为960px的带有三个相同宽度的box元素的容器了。

总的来说，我们可以利用CSS中的div布局实现非常灵活的布局，通过不同的选择器和属性，我们可以轻松地控制元素的位置、大小和样式，使得网页呈现出更加美观和丰富的效果。