本文主要是介绍《Dreamweaver CS6 完全自学教程》笔记 第十六章：使用 Div+CSS 灵活布局网页，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
文章目录
- 第十六章：使用 Div+CSS 灵活布局网页
- 16.1 Web 标准概述
- 16.1.1 什么是 Web 标准
- 16.1.2 Web 标准的构成
- 16.2 认识 Div
- 16.2.1 Div 简介
- 16.2.2 创建 Div
- 16.2.3 选择 Div
- 16.3 关于 Div + CSS 盒模型
- 16.3.1 盒模型的概念
- 16.3.2 margin（边界）
- 16.3.3 border（边框）
- 16.3.4 padding（填充）
- 16.4 Div + CSS 布局定位
- 16.4.1 relative（相对定位）
- 16.4.2 absolute（绝对定位）
- 16.4.3 float（浮动定位）
- 16.5 Div+CSS 布局理念
- 16.5.1 将页面用 Div 分块
- 16.5.2 设计各块的位置
- 技术专题：指定插入的 Div 标签的位置。
- 16.5.3 用 CSS 定位
- 16.6 常用的布局方式
- 16.6.1 居中布局设计
- 16.6.2 浮动布局设计
第十六章：使用 Div+CSS 灵活布局网页
16.1 Web 标准概述
16.1.1 什么是 Web 标准
Web 标准是由 W3C（World Wide Web Consortium）和其他标准化组织指定的一套规范集合，包含一系列标准，如 HTML、XHTML、JavaScript、CSS 等。
Web 标准，即网站标准。目前通常听说的 Web 标准一般指进行网站建设所采用的基于 XHTML 的网站设计语言。其中典型的应用模式是 Div + CSS 。
Web 标准由一系列的规范组成。由于 Web 设计越来越趋向于整体与结构化，对于网页设计者来说，理解 Web 标准 首先要理解结构和表现分离的意义。 刚开始时理解这一点可能会很难，但是理解这点是非常重要的，因为当结构和表现分离后，用 CSS 样式表来控制表现就很容易了。
16.1.2 Web 标准的构成
结构：
结构技术用于对网页中用到的信息（文本、图像等）进行分类和整理，用于结构化设计的 Web 标准技术主要是 HTML。
表现：
表现技术用于对已被结构化的信息进行显示上的控制，包括位置、颜色、字体、大小等形式控制，目前用于结构化设计的 Web 标准技术主要是 CSS。
W3C 创建 CSS 的目的是用 CSS 来控制整个网页的布局，与 HTML 所实现的结构完全分离。简单来说就是表现与内容完全分离，使站点维护更加容易。
行为：
行为指对整个文档的一个模型定义和交互行为的编写，用于行为设计的 Web 标准技术主要有两个：
- DOM（Document Object Model）： 文档对象模型，相当于浏览器与内容结构之间的一个接口。它定义了访问和处理 HTML 文档的标准方法，把网页和脚本以及其他编程语言联系了起来。
- ECMAScript（JavaScript 的扩展脚本语言）： 由 CMA（Computer Manufacturers Association）指定的脚本语言（JavaScript），用于实现网页对象的交互操作。
16.2 认识 Div
16.2.1 Div 简介
<div> ··· </div>
Div 全称 Division，意为 “区分” 。是用来定义网页内容中的逻辑区域的标签，用于为 HTML 文档中的块内容设置结构和背景属性的元素。
Div 是 HTML 中指定的，专门用于布局设计的容器对象。在传统的表格式的布局当中，之所以能进行排版布局，完全依赖于表格对象。而现在的 CSS 布局中，<div> 是核心对象，不需要依赖表格，一个简单的布局只需要依赖 Div 与 CSS ，所以也称为 Div + CSS 布局。
16.2.2 创建 Div
只需创建 <div> 标签即可。将内容放置其中就可以应用 <div> 标签。
然而在一个没有应用 CSS 样式的页面中，<div> 没有任何实际效果，所以 <div> 从本质上实现了与样式的分离。这样做的好处是，由于 <div> 与样式分离，最终样式由 CSS 来完成，使得 <div> 在设计中拥有巨大的可伸缩性，可以根据自己的想法改变 <div> 的样式，不拘泥于单元格固定模式的束缚。
在 CSS 布局中所需要的工作可简单分为两步：用 <div> 将内容标记出来，然后编写 CSS 样式。
16.2.3 选择 Div
- 用鼠标点。
- 选择状态栏上的
<div>标签。
16.3 关于 Div + CSS 盒模型
16.3.1 盒模型的概念
传统的排版是通过大小不一的表格和表格嵌套来定位内容。而 CSS 排版中，是通过由 CSS 定义的大小不一的盒子和盒子嵌套来排版，这种方式代码简洁，维护方便。
盒模型有以下属性：内容（content）、填充（padding）、边框（border）、边界（margin）。
16.3.2 margin（边界）
两个行内元素相邻时，它们之间的距离为两个元素的边界值相加。但如果是产生换行效果的块级元素，它们之间的距离是取 margin 中的较大值。
设置边界的方式如下：
<html>
<head><title>margin</title>
</head>
<body><div style=" margin-bottom:40px;"><img src="第一个图片.jpg"></div><div><img src="第二个图片.jpg"></div>
</body>
</html>
这样两幅图中间就会有 40 像素的间隔。
其中 margin-bottom 是设置底部边界宽度，还有 margin-left / right / top ，或直接用 margin 设置四条边。
16.3.3 border（边框）
一般用于分离元素，border 的外围即为元素的最外围，因此计算元素实际的宽和高时，就要将 border 纳入。
border 的属性主要有：color（颜色）、width（粗细）、style（样式）
或者可以单独设置某一边：
<p style="border-bottom:3px dotted #FF0000"> ··· </p>
16.3.4 padding（填充）
用于控制 content 和 border 之间的距离。操作与 margin、border 类似。
16.4 Div + CSS 布局定位
16.4.1 relative（相对定位）
在 CSS 中的写法是 position:relative; ，其表达的意思是以父级对象（它所在的容器）的坐标原点为原点，无父级则以 body 的坐标原点为原点，配合 top、right、bottom、left 值来定位元素。 当父级有 padding 等 CSS 属性时，当前级的坐标原点则参照父级内容区的坐标原点进行定位。
使用相对定位时，无论是否进行移动，元素仍占据原来的空间，因此移动元素会导致它覆盖其他元素。
16.4.2 absolute（绝对定位）
在 CSS 中的写法是 position:absolute; ，参照浏览器左上角，配合 top、right、bottom、left 值来定位元素。
绝对定位可以使对象的位置与其他元素无关，可以使元素从它的包含块向上下左右移动。
16.4.3 float（浮动定位）
当 float 值为 none 时，对象不浮动；为 left 时，向左浮动；为 inherit 时，继承父级元素的浮动属性。
float 会使元素脱离文档流，一直向左或右移动，同时覆盖在文档流中的内容。若包含框宽度不够，会向下移动，寻找空间足够的地方再向左或右移动。
16.5 Div+CSS 布局理念
16.5.1 将页面用 Div 分块
在用 CSS 布局页面时，首先要有一个整体规划，包括要分成哪些模块，各模块间的父子关系等。
点击 插入 -> 布局对象 -> Div 标签 ，打开 “插入 Div 标签” 对话框即可。
16.5.2 设计各块的位置
根据内容考虑整体的页面布局类型，如单栏、双栏、三栏等。
技术专题：指定插入的 Div 标签的位置。
在 “插入 Div 标签” 对话框中，通过 “插入” 下拉列表，可以指定插入的 Div 标签位置，包括 5 个选项：
- 在插入点： 将 Div 插入到光标所在位置。
- 在标签之前： 插入到所选标签前面。
- 在开始标签之后： 插入在所选标签的开始标签之后。
- 在结束标签之前： 插入在所选标签的结束标签之前。
- 在标签之后： 插入到所选标签后面。
16.5.3 用 CSS 定位
整理好框架后，就可以利用 CSS 对各板块进行定位，实现整体规划，然后再添加内容。
16.6 常用的布局方式
16.6.1 居中布局设计
使用自动空白边让设计居中：
将水平空白边设置为 auto：
<body>
<div id="box"></div>
</body>
#box {Width: 80px;Height: 500px;background-color: #F36;margin: 0 auto;
}
使用定位和负值空白边让设计居中：
先定义容器的宽度，将 left 属性设置为 50%，就会把容器的左边缘定位在页面中间。
#box {width: 720px;position: relative;left: 50%;
}
如果不希望左边缘居中，而是容器中间居中，只要对容器的左边应用一个负值的空白边，宽度等于容器的一半即可。
#box {width: 720px;position: relative;left: 50%;margin-left: -360px;
}
16.6.2 浮动布局设计
利用了 float 属性来并排定位元素。
两列固定宽度布局：
<div id="left">左列</div>
<div id="right">右列</div>
#left {width: 400px;height: 300px;background-color: #0CF;border: 2px solid #06F;float: left;
}
#right {width: 400px;height: 300px;background-color: #0CF;border: 2px solid #06F;float: left;
}
两列固定宽度居中布局：
可以使用 div 嵌套的方式来完成。
<div id="box"><div id="left">左列</div><div id="right">右列</div>
</div>
#box {width: 808px;margin: 0px auto;
}
两列宽度自适应布局：
自适应布局主要通过宽度的百分比值进行设置。
#left {width: 20%;height: 300px;background-color: #0CF;border: 2px solid #06F;float: left;
}
#right {width: 70%;height: 300px;background-color: #0CF;border: 2px solid #06F;float: left;
}
两列右列宽度自适应布局：
左栏固定宽度，右栏根据窗口大小自适应。
#left {width: 200px;height: 300px;background-color: #0CF;border: 2px solid #06F;float: left;
}
#right {height: 300px;background-color: #0CF;border: 2px solid #06F;
}
此时右栏不设置宽度，不浮动。
三列浮动中间宽度自适应布局：
这种布局单纯使用 float 与百分比不能实现，此时就需要绝对定位来实现了。
<div id="left">左列</div>
<div id="main">中列</div>
<div id="right">右列</div>
* {margin: 0px;padding: 0px;border: 0px;
}
#left {width: 200px;height: 300px;background-color: #0CF;border: 2px solid #06F;position: absolute;
}
#left {width: 200px;height: 300px;background-color: #0CF;border: 2px solid #06F;position: absolute;top: 8px;right: 8px;
}
#main {height: 300px;background-color: #0CF;border: 2px solid #06F;margin: 0px 204px 0px 204px
}
这篇关于《Dreamweaver CS6 完全自学教程》笔记 第十六章：使用 Div+CSS 灵活布局网页的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
