### DIV+CSS完美布局知识点详解
#### 一、DIV+CSS布局基础概念
**DIV+CSS**是一种网页设计布局方式，其中**DIV**是HTML中的一个标签，用于定义文档中的独立区域；**CSS**（Cascading Style Sheets）即层叠样式表，用来控制网页的样式并允许将样式信息与网页内容分离的一种标记性语言。
#### 二、XHTML下的CSS+DIV布局总结
- **XHTML**（可扩展超文本标记语言）是HTML的一个更加严格的版本，强调文档的正确性和结构化。
- 在XHTML中使用**CSS+DIV**布局时，需注意以下几点：
- 所有的标记都必须有相应的结束标记。
- 标签和属性名称必须使用小写。
- 所有的XML标记都必须合理嵌套。
- 所有的属性必须用引号括起来。
- 特殊符号如`<`和`&`需要用HTML实体编码表示。
- 给所有属性赋一个值。
- 注释内容中避免使用“--”。
#### 三、DOCTYPE的重要性及其选择
- **DOCTYPE**定义了文档类型，告诉浏览器当前文档遵循哪种HTML或XHTML标准。
- **选择合适的DOCTYPE**：
- 对于XHTML，推荐使用`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">`。
- 对于HTML5，则使用`<!DOCTYPE html>`。
- **补充说明**：正确的DOCTYPE有助于确保浏览器以标准模式渲染页面，避免出现兼容性问题。
#### 四、CSS基础知识
- **CSS基本语法**：
- 选择器 { 属性: 值; }
- 示例：`p { color: red; }`
- **颜色值**：可以通过RGB、十六进制、预定义颜色名等方式指定。
- **定义字体**：`font-family`, `font-size`, `font-weight`等属性。
- **群选择器**：同时为多个元素应用样式，如`p, h1 { color: blue; }`。
- **派生选择器**：选择子元素或特定元素的后续元素，如`div p { font-size: 16px; }`。
- **ID选择器**：以`#`开头，如`#header { background-color: #f2f2f2; }`。
- **类别选择器**：以`.`开头，如`.highlight { color: orange; }`。
- **定义链接样式**：`a:link`, `a:visited`, `a:hover`, `a:active`。
#### 五、CSS布局入门
- **定义DIV**：`<div class="container"></div>`。
- **CSS2盒模型**：
- 包括内容(content)、内边距(padding)、边框(border)和外边距(margin)四个部分。
- 盒模型计算公式：总宽度 = 内容宽度 + 左右内边距 + 左右边框 + 左右外边距。
- **辅助图片背景处理**：使用CSS背景属性代替图片标签，如`background-image`, `background-repeat`, `background-position`。
#### 六、CSS布局实例
- **确定布局**：根据页面需求确定布局结构。
- **定义body样式**：设置全局字体、背景色等。
- **定义主要的div**：
- 使用类或ID选择器为各个部分定义样式。
- 示例：`.main { width: 80%; margin: 0 auto; }`。
- **100%自适应高度**：
- 通过设置`height: 100%;`使得元素的高度随父元素变化。
- 注意需要在HTML和body元素上也设置`height: 100%;`。
#### 七、自适应高度的实现
- **自适应高度**：让某个容器的高度根据其内容自动调整。
- 实现方法：
- 使用`min-height`设置最小高度，结合`overflow: auto;`。
- 或者使用Flexbox或Grid布局来实现更简洁的方法。
#### 八、不用表格的菜单设计
- **纵向菜单**：
- 使用无序列表`<ul>`，每个菜单项作为列表项`<li>`。
- 示例：`ul.menu { list-style-type: none; } ul.menu li { display: block; }`。
- **横向菜单**：
- 同样使用无序列表`<ul>`，但通过设置`display: inline-block;`使菜单项水平排列。
- 示例：`ul.menu li { display: inline-block; }`。
#### 九、校验及常见错误
- **XHTML校验**：使用W3C的在线验证工具检查XHTML文档是否符合标准。
- **CSS2校验**：同样使用W3C提供的CSS验证服务来检查CSS文件的有效性。
- **常见错误**：
- 忘记关闭标签。
- 属性值未用引号括起。
- CSS选择器拼写错误或语法错误。
#### 十、CSS的高级技巧
- **选择器的组合**：通过复合选择器和伪类实现复杂的选择逻辑。
- **CSS动画和过渡**：利用`transition`和`animation`属性创建动态效果。
- **响应式设计**：使用媒体查询`@media`来根据不同设备尺寸调整布局。
- **Flexbox布局**：提供了一种更加灵活的方式来排列、对齐和分布项目空间。
- **Grid布局**：适用于复杂的二维网格布局，允许同时控制行和列。
DIV+CSS布局不仅能够实现网页的美观布局，还能提高页面的加载速度和维护效率。了解和掌握这些基础知识对于前端开发者来说至关重要。
