### CSS+DIV布局大全知识点详解
#### 一、CSS+DIV布局概述
- **CSS（Cascading Style Sheets）**是一种用于控制Web页面外观样式的样式表语言，它与HTML一起构成了网页的基本构建块。
- **DIV**是HTML文档中的容器元素，常用于组合文档中的其他元素，并对它们应用样式或定位。
#### 二、XHTML下的CSS+DIV布局
- **XHTML**是HTML的一个更严格的版本，强调文档的结构清晰性和语法正确性。
- **CSS+DIV布局**是现代Web设计中常用的一种布局方法，相比于传统的表格布局，这种方法具有更好的灵活性、可维护性和可访问性。
#### 三、DOCTYPE选择
- **DOCTYPE**（Document Type Declaration）是HTML文档的一部分，用来指定文档的类型。
- **重要性**：正确的DOCTYPE声明有助于浏览器正确解析文档，避免出现布局错乱等问题。
- **选择**：通常推荐使用XHTML 1.0 Strict或HTML5作为DOCTYPE。
- XHTML 1.0 Strict适用于需要遵循严格XHTML标准的情况。
- HTML5则更为现代，支持更多的新特性。
#### 四、命名空间
- **命名空间**：在XML文档中使用命名空间可以帮助避免元素名冲突的问题。
- **作用**：在XHTML文档中，命名空间不是必需的，但在某些情况下使用它可以提供额外的好处。
#### 五、语言编码
- **定义语言编码**：通过`<meta charset="UTF-8">`这样的元数据标签来定义文档的字符集。
- **重要性**：确保文档能在各种设备和平台上正确显示。
#### 六、调用样式表
- **外部调用样式表**：将CSS规则放在单独的.css文件中，通过`<link rel="stylesheet" href="styles.css">`链接到HTML文档。
- **双表法调用样式表**：同时使用多个样式表文件，每个文件负责一部分样式，增强页面的灵活性和可维护性。
#### 七、Head区的其他设置
- **收藏夹小图标**：通过`<link rel="icon" href="favicon.ico">`定义网站的收藏夹图标。
- **为搜索引擎准备的内容**：使用`<meta name="description" content="...">`和`<meta name="keywords" content="...">`等元数据标签来提高SEO效果。
#### 八、XHTML代码规范
- **所有标记都需要有结束标记**：如`<p>`需对应`</p>`。
- **所有标签使用小写字母**：如`<div>`而非`<DIV>`。
- **合理嵌套**：确保标签的嵌套关系正确。
- **属性用引号括起**：如`<a href="index.html">`。
- **特殊符号编码**：如`<`代表`<`，`&`代表`&`。
- **所有属性赋值**：如`<img src="image.jpg" alt="示例图片">`。
- **注释中避免使用“--”**：注释应使用`<!-- 注释内容 -->`。
#### 九、CSS入门
- **基本语法规范**：选择器 { 属性: 值; }。
- **颜色值**：如#ff0000代表红色。
- **定义字体**：如`font-family: "宋体", sans-serif;`。
- **群选择器**：多个选择器共享一组样式，如`h1, h2 { color: red; }`。
- **派生选择器**：基于父元素的选择器，如`div p { font-size: 14px; }`。
- **id选择器**：唯一标识符的选择器，如`#header { background-color: #f0f0f0; }`。
- **类别选择器**：类名选择器，如`.footer { text-align: center; }`。
- **定义链接样式**：如`a:visited { color: purple; }`。
#### 十、CSS布局入门
- **定义DIV**：使用`<div>`元素作为布局容器。
- **CSS2盒模型**：由内容、内边距（padding）、边框（border）和外边距（margin）四部分组成。
- **辅助图片用背景处理**：通过`background-image`属性来代替直接插入图片。
#### 十一、CSS布局实例
- **确定布局**：规划页面的结构和布局方式。
- **定义body样式**：如设置背景色、字体大小等。
- **定义主要的div**：为不同的内容区域分配div，并应用样式。
- **100%自适应高度**：通过设置div的高度为100%，并确保其父级容器也具有相应高度，实现自适应高度的效果。
#### 十二、自适应高度
- **解决方案**：通常涉及使用百分比单位、min-height属性等来实现div的高度随着内容的变化而自动调整。
#### 十三、不用表格的菜单
- **纵向菜单**：通过垂直排列的一系列链接来实现。
- **横向菜单**：通过水平排列的一系列链接来实现，常使用浮动（float）属性来实现。
#### 十四、校验及常见错误
- **XHTML校验**：通过W3C提供的在线工具检查文档是否符合XHTML标准。
- **CSS2校验**：同样使用W3C提供的CSS验证服务检查CSS语法的正确性。
- **常见错误**：如缺少结束标签、未关闭的标签、非法的属性值等。
#### 十五、CSS技巧
- **技巧概述**：列举了一系列常见的CSS技巧，如响应式布局、伪类的应用、动画效果等。
- **示例**：包括但不限于使用CSS3的flexbox和grid布局、过渡效果、阴影效果等。
#### 十六、Web打印实例教程
- **Web打印**：指通过Web页面直接生成打印友好的版本。
- **实现方式**：可以通过媒体查询（@media print）来专门定义打印时的样式规则。
#### 十七、Div+CSS布局入门教程
- **教程内容**：包含了从基础知识到实际案例的详细讲解，适合初学者系统学习CSS+DIV布局技术。
#### 十八、结构化HTML
- **概念**：强调在编写HTML时首先关注内容的语义和结构，而非其外观。
- **实践**：建议在设计之初就考虑好文档的逻辑结构，然后再添加CSS样式。
- **例子**：如使用适当的语义标签（header、footer、article等），而不是仅依赖于`<div>`元素。
通过以上详尽的讲解，我们可以看出CSS+DIV布局不仅是一门技术，更是现代Web开发中不可或缺的一部分。掌握了这些知识点，对于初学者来说将会有很大的帮助，无论是从理论知识还是实践经验上都将更加扎实。
