在CSS中，div和span是两种最基本的元素。它们的主要作用是对HTML文档进行布局和样式设置。通过对div和span的合理运用，能够帮助实现页面结构的优化和样式的美化。

div是块级元素，它的特点是会独占一行空间，并且可以设置宽度、高度、边框、背景等样式。div通常用于布局，可以将一组相关的元素划分到一个div中，方便进行样式统一和组件复用。例如，我们可以将头部、内容区域、底部三个部分分别放到不同的div中，然后对每个div进行样式设置。

<div id="header">
<h1>这是头部</h1>
</div>
<div id="content">
<p>这是内容区域</p>
</div>
<div id="footer">
<p>这是底部</p>
</div>

span是行内元素，它的特点是不会独占一行空间，而是紧贴着其前面或后面的元素显示。span主要用于文本样式的设置，可以改变字体、颜色、大小等，同时也可以作为包装元素，将一组相关的元素放到不同的span中进行样式设置。例如，我们可以将一段文字的不同部分（如关键字、日期等）分别放到不同的span中，然后对每个span进行样式设置。

<p>今天<span class="date">2022年10月1日</span>是国庆节，大家一起庆祝吧！</p>

综上，div和span有着不同的应用场景和使用方法。如果需要对一个独立的组件进行样式设置，应该使用div；如果需要对一段文本进行样式设置，应该使用span。