CSS+DIV布局是指使用CSS（层叠样式表）与DIV元素（HTML中的块级元素）来组织网页布局的方式。这种方法逐渐取代了传统的表格布局，成为Web标准布局中推荐的技术之一。CSS+DIV布局的优势在于其结构与表现相分离的特性，这使得网页代码更加简洁，更易于搜索引擎优化（SEO），也方便后期的维护和修改。
在CSS+DIV布局中，基本布局的种类主要包括固定宽度布局和宽度自适应布局这两种主要方式。
固定宽度布局，顾名思义，指的是布局宽度固定不变，不随浏览器窗口大小变化而自动调整。这种布局通常用于需要精确控制页面布局和元素位置的情况。实现这种布局的原理是通过在CSS样式中为DIV元素指定固定的宽度和高度值。例如，指定宽度为400px，高度为300px，则无论浏览器窗口如何变化，该DIV元素始终占据400px宽度和300px高度的空间。
制作固定宽度布局的实例步骤包括：编写XHTML代码，使用DIV元素定义布局区域；然后，在CSS样式中为该DIV元素添加样式，定义背景颜色、边框样式、字体大小、内边距、字体类型及加粗等属性。例如，以下代码展示了如何创建一个具有固定宽度和高度的DIV布局：
```css
#layout {
height: 300px; /* 设置高度 */
width: 400px; /* 设置宽度 */
background-color: #FFFF00; /* 设置背景颜色 */
border: 1px solid #000000; /* 设置边框样式 */
text-align: center; /* 设置文本居中对齐 */
padding-top: 40px; /* 设置上内边距 */
font-size: 14px; /* 设置字体大小 */
font-family: "宋体"; /* 设置字体类型 */
font-weight: bold; /* 设置为粗体 */
}
```
接下来是宽度自适应布局。自适应布局与固定宽度布局相反，其特点是布局宽度可以随着浏览器窗口大小的改变而自动调整。这种布局能够保证在不同分辨率的显示器上都有良好的显示效果，适应性强，适合于响应式设计。自适应布局的实现原理是使用百分比作为宽度和高度的值，这样布局的尺寸就会根据浏览器窗口的大小自动伸缩。例如，设置宽度为80%，则布局宽度将始终保持在浏览器宽度的80%。
创建自适应布局实例的步骤同样包括编写XHTML代码和添加CSS样式。在XHTML代码中，可以使用与固定宽度布局相同的DIV元素结构。在CSS样式中，将宽度设置为百分比形式，例如80%，来实现宽度的自适应：
```css
#layout {
height: 300px; /* 设置高度 */
width: 80%; /* 设置宽度为浏览器宽度的80% */
background-color: #FFFF00; /* 设置背景颜色 */
border: 1px solid #000000; /* 设置边框样式 */
text-align: center; /* 设置文本居中对齐 */
padding-top: 40px; /* 设置上内边距 */
font-size: 14px; /* 设置字体大小 */
font-family: "宋体"; /* 设置字体类型 */
font-weight: bold; /* 设置为粗体 */
}
```
自适应布局的灵活性使其成为设计响应式网站时的首选方案。通过这种方式，网页的布局和元素可以更好地适应不同设备和屏幕尺寸，从而提供更好的用户体验。
在实际应用中，很多网站的布局都是基于这两种基本布局类型的衍生。例如，一个结构简单的网站可能首先采用一列固定宽度的布局，然后在此基础上进行细致的划分和设计。更复杂的网站则可能在自适应布局的基础上增加更多的列和元素，实现更为丰富和动态的页面效果。
CSS+DIV布局是前端开发者必须掌握的技能之一，对于创造高效、美观且功能强大的网页至关重要。通过理解并应用固定宽度和宽度自适应这两种基本布局，可以构建出既能满足功能需求又能提升用户体验的网页设计。
