### DIV+CSS布局基础知识点详解
#### 一、DIV+CSS布局概述
- **定义**：DIV+CSS是一种网页布局方式，其中DIV是指HTML中的`<div>`标签，CSS则是指层叠样式表（Cascading Style Sheets）。这种方式主要用于创建灵活、可维护性强的网页布局。
- **优点**：与传统的表格布局相比，DIV+CSS布局具有更好的灵活性和可扩展性，同时能够提高网页加载速度，简化页面结构，并有助于搜索引擎优化。
#### 二、基础知识
- **XHTML标准下的CSS+DIV布局**
- **DOCTYPE**：文档类型声明，用于告知浏览器文档遵循的HTML或XHTML标准。
- **定义**：文档类型声明位于文档的最开始位置，告诉浏览器这是一个什么样的文档。
- **选择合适的DOCTYPE**：推荐使用XHTML 1.0 Strict或HTML5标准。
- **补充**：正确的DOCTYPE可以帮助浏览器更好地解析文档。
- **命名空间**：在XHTML中使用命名空间可以避免不同文档类型的名称冲突。
- **定义语言编码**：通过`<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">`来指定文档的字符集。
- **调用样式表**
- **外部调用**：通过`<link rel="stylesheet" type="text/css" href="styles.css">`引入外部CSS文件。
- **双表法**：同时引入多个CSS文件，适用于需要兼容多种设备或浏览器的情况。
- **head区的其他设置**
- **收藏夹小图标**：通过`<link rel="shortcut icon" href="favicon.ico">`设置。
- **为搜索引擎准备的内容**：利用`<meta>`标签添加描述信息等。
- **XHTML代码规范**
- 所有标记都需要相应的结束标记。
- 所有标签和属性名必须使用小写字母。
- 标记必须合理嵌套。
- 属性值必须使用引号括起来。
- 特殊字符如`<`和`&`要用实体编码表示。
- 给所有属性赋值。
- 注释中避免使用`--`。
#### 三、CSS基础
- **基本语法**：CSS规则由选择器和声明组成。声明包括属性和值，用分号分隔。
- **颜色值**：可以使用预定义的颜色名称、十六进制表示法、RGB/RGBA、HSL/HSLA等方式定义。
- **定义字体**：使用`font-family`、`font-size`、`font-weight`等属性。
- **选择器**
- **群选择器**：多个选择器用逗号分隔，共用相同的样式规则。
- **派生选择器**：选择某个元素的所有子代元素。
- **ID选择器**：以`#`开头，唯一标识某个元素。
- **类选择器**：以`.`开头，用于同一类元素。
- **定义链接样式**：可以分别定义未访问、已访问、鼠标悬停和活动链接的不同样式。
#### 四、CSS布局入门
- **定义DIV**：`<div>`标签作为容器元素，用于组合文档中的其他元素。
- **CSS2盒模型**：盒子由内容、内边距、边框和外边距四部分组成。理解和掌握盒模型对于布局至关重要。
- **辅助图片的背景处理**：使用CSS的`background-image`属性将图片作为背景图像，而不是直接插入图片元素。
#### 五、CSS布局实例
- **确定布局**：规划页面的整体结构，确定各部分的位置关系。
- **定义body样式**：设置整个页面的基本样式。
- **定义主要的div**：根据页面布局需求定义不同的`<div>`。
- **100%自适应高度**：通过特定的CSS技巧实现div的高度自适应，使其填充可用空间。
#### 六、自适应高度
- **实现方法**：通过设置父元素的高度为100%，并确保所有父级元素也设置了相同高度，可以实现子元素的高度自动调整至100%。
#### 七、菜单设计
- **纵向菜单**：使用垂直排列的`<ul>`和`<li>`元素创建。
- **横向菜单**：通过设置`<ul>`的`display`属性为`inline-block`或`flex`，实现水平布局。
#### 八、校验及常见错误
- **XHTML校验**：使用在线工具检查文档是否符合XHTML标准。
- **CSS2校验**：同样可以通过在线工具验证CSS的正确性。
#### 九、CSS的高级技巧
- **浮动**：使用`float`属性实现元素的左右浮动。
- **定位**：使用`position`属性进行精确定位。
- **弹性布局**：使用Flexbox实现响应式布局。
- **网格布局**：使用CSS Grid进行复杂布局设计。
#### 十、案例分析
- **WEB打印实例教程**：介绍如何利用CSS媒体查询等技术实现网页内容的打印友好版本。
- **Div+CSS布局入门教程**：详细步骤指导如何从零开始构建一个基于Div+CSS的网页布局。
通过以上知识点的学习和实践，读者可以逐步掌握DIV+CSS布局的基础知识和技术细节，为构建高效、美观的网页布局打下坚实的基础。
