### DIV与CSS布局知识点
#### 一、基础知识
**DIV**是一种HTML标签，全称是division，用于将页面划分为不同的部分。通过合理地利用DIV，可以更好地组织和定位页面内容，实现更复杂的布局。
**CSS**即层叠样式表（Cascading Style Sheets），是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地格式化网页元素。在网页布局方面，CSS提供了强大的工具，使得设计者能够精确地控制网页元素的位置、大小和外观。
#### 二、DIV与CSS布局的重要性
DIV与CSS布局是现代Web开发中不可或缺的一部分，它们能够帮助开发者创建响应式、灵活且易于维护的网页布局。随着移动设备的普及以及用户对网站美观度要求的提高，掌握DIV与CSS布局技巧变得尤为重要。
#### 三、固定宽度布局
**固定宽度布局**是指网页的宽度是固定的，不会随着浏览器窗口大小的变化而变化。这种布局方式适用于页面结构相对稳定的情况，比如新闻网站、博客等。下面介绍几种常见的固定宽度布局：
1. **1-2-1布局**：这种布局由一个头部(header)、两个主要内容区域(content)和一个侧边栏(sidebar)组成，最后是一个页脚(footer)。通常情况下，两个主要内容区域会并排放置。
- **实现方法**：
1. 定义一个容器(container)，设置宽度为整个页面的固定宽度。
2. 在容器内定义头部、主要内容区域、侧边栏和页脚，分别设置宽度和浮动属性来控制位置。
3. 使用适当的外边距(margin)或内边距(padding)调整各个元素之间的间距。
2. **1-3-1布局**：与1-2-1布局类似，但中间有三个主要内容区域。
- **实现方法**：
1. 定义容器，设置固定宽度。
2. 在容器内定义头部、三个主要内容区域和页脚，并设置宽度及浮动属性。
3. 调整间距，确保布局整洁。
3. **1-((1-2)+1)-1布局**：这是一种较为复杂的布局形式，中间包含了一个嵌套的1-2-1布局。
- **实现方法**：
1. 定义容器，设置固定宽度。
2. 在容器内定义头部、一个主要内容区域(包含内部的1-2-1布局)和页脚。
3. 内部的1-2-1布局使用嵌套的方法实现，即在主要内容区域内再定义一个子容器，并按照1-2-1布局的方式进行设置。
#### 四、示例代码分析
以下是一段简单的1-2-1布局的HTML和CSS代码示例：
**HTML代码**:
```html
<div class="container">
<div class="header">Header</div>
<div class="content">
<div class="main-content">Main Content</div>
<div class="sidebar">Sidebar</div>
</div>
<div class="footer">Footer</div>
</div>
```
**CSS代码**:
```css
.container {
width: 960px;
margin: 0 auto;
}
.header, .footer {
height: 50px;
background-color: #f2f2f2;
}
.content {
display: flex;
justify-content: space-between;
}
.main-content {
width: 600px;
background-color: #e6e6e6;
}
.sidebar {
width: 300px;
background-color: #cccccc;
}
```
这段代码展示了如何使用DIV和CSS实现一个基本的1-2-1布局。通过设置`.container`的宽度和居中对齐(`margin: 0 auto;`)，使得整个布局具有固定的宽度并居中显示。同时，通过使用`display: flex;`和`justify-content: space-between;`，可以方便地实现主内容区和侧边栏的并排显示。
DIV与CSS布局是现代网页设计的基础之一，熟练掌握这些技术可以帮助开发者创建出既美观又实用的网站。
