html网页标准化技术,DIV+CSS网页标准化布局(一）(示例代码)

1、DIV+CSS定义及优势

Div+css 是什么?

Div+css 是一种目前比较流行的网页布局技术

Div 来存放需要显示的数据(文字，图表..) , css 就是用来指定怎样显示， 从而做到数据和显示相互的效果

Div+css 优势

采用DIV+CSS模式的网站具有以下优势：

表现和内容相分离

代码简洁，提高页面浏览速度

易于维护和改版

提高搜索引擎对网页的索引效率

我们可以简单的这样理解div+css:

div是用于存放内容(文字,图片,元素)的容器。

css是用于指定放在div中的内容如何显示,包括这些内容的位置和外观.

2、“无意义”的HTML元素div和span

HTML只是赋予内容的手段，大部分HTML标签都有其意义(例如，标签p创建段落，h1标签创建标题等等)的，然而div和span标签似乎没有任何内容上的意义，听起来就像一个泡沫做成的锤子一样无用。但实际上，与CSS结合起来后，它们被用得十分广泛。你所需要记住的是span和div是“无意义”的标签。它们的存在纯粹是应用样式，所以当样式表失效时它就没有任何的作用

它们被用来组合成一大块的HTML代码并赋予一定的信息，大部分用类属性class和标识属性id与元素联系起来。span和div的不同之处在于span是内联的，用在一小块的内联HTML中。而div(division)元素是块级的(简单地说，它等同于其前后有断行)，用于组合一大块的代码，为HTML 文档内大块的内容提供结构和背景的元素，可以包含段落、标题、表格甚至其他部分，这使div便于建立不同集成的类。

div的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由div标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制

3、页面布局的盒子模型

(1)盒子模型的相关属性

margin(外边距/边界)

border(边框)

padding(内边距/填充 )

我们看图理解一下各属性作用：

以上属性又分为上、右、下、左四个方向

问题：页面元素的宽度width、高度height如何计算？

答案：元素的实际占位尺寸 = 元素尺寸 + padding + 边框宽度

比如：元素实际占位高度 = height属性 + 上下padding + 上下边框宽度

(2)盒模型的层次关系

我们通过一个经典的盒模型3D立体结构图来理解，如图：

从上往下看，层次关系如下：

第1层：盒子的边框(border)，

第2层：元素的内容(content)、内边距(padding)

第3层：背景图(background-image)

第4层：背景色(background-color)

第5层：盒子的外边距(margin)

从这个层次关系中可以看出，当同时设置背景图和背景色时，背景

图将在背景色的上方显示

4、声明盒子模型的CSS属性

例如：

1

2

3

盒子模型

4

5 #box{ /*ID为box的盒子模型*/

6 width:200px; /*盒子的宽度为200px*/

7 height:200px; /*盒子的高度为200px*/

8 border:5px solid #ccc; /*盒子边框实线各边宽5px*/

9 padding:10px; /*盒子的4个内填充为10px*/

10 margin:20px; /*盒子的4个外边距为10px*/

11 }

12

13

14

15

16 内容区

17