PHP.3-DIV+CSS标准网页布局准备工作（上）

DIV+CSS标准网页布局准备工作（上）

概述

使用“ DIV+CSS” 对网站进行布局符合 W3C 标准，采用这种方式布局通常是为了说明与 HTML 表格定位方式的区别。因为现在的网站设计标准中，已经不再使用表格定位技术，而是采用 DIV+CSS 的方式实现各种定位。通过使用 div 盒子模型结构将各部分内容划分到不同的区块，然后用 css 来定义盒子模型的位置、大小、边框、内外边距、排列方式等。简单地说， div 用于搭建网站结构（框架）、 css 用于创建网站表现（样式 / 美化）。该标准简化了 HTML 页面代码，获得一个较优秀的网站结构，有利于日后网站维护、协同工作和便于搜索引擎抓取。当然并不是所有的网页都需要用 div 布局，例如数据页面、报表之类的页面，还是使用 HTML 的表格会比较方便， web 标准里并没有说要抛弃 table 。 

【w3C： http://baike.baidu.com/view/459077.htm】

网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等

DIV+CSS标准的优点

·变现和内容分离

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

·易于维护和改版，降低维护成本

·提高搜索引擎对网面的索引效率

布局网站注意的问题

各个浏览器之间的差异，就算在不同的浏览器中效果不完全一至，也要做到大概一至

安装多种浏览器，对比差异进行调试，主要分为微软（IE）与非微软（firefox）。

对于不同的IE版本，可以通过安装ietester【ie浏览器多版本测试工具】，进行测试

Firefox浏览器：在firefox中安装Firebug【组件，用于调试页面】。Firebug 为你的 Firefox 集成了浏览网页的同时随手可得的丰富开发工具。你可以对任何网页的 CSS、HTML 和 JavaScript 进行实时编辑、调试和监控

“无意义”的元素div和span 

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

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

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

盒子模型

每个 HTML 元素都可以看作一个装了东西的盒子，盒子具有 宽度（ width ） 和 高度（ height ） ，盒子里面的内容到盒子的边框之间的距离即 填充（ padding ） ，盒子本身有 边框（ border ） ，而盒子边框外和其他盒子之间，还有 边界（ margin ）【外边距】 。

布局中的主要样式

• font

• line-height

• color

• margin

• padding

• border

• text-align

• background

• width:

• height

• float:

• clear

•display

定位属性 

属 性	描 述
Position	用于定义一个元素是否absolute（绝对），relative（相对），static（静态），或者fixed（固定）
Top	层距离顶点纵坐标的距离
Left	层距离顶点横坐标的距离
Width	层的宽度，可以用一个长度或“auto”值来指定其宽度，不允许使用负值
Height	层的高度，可以用一个长度或“auto”值来指定其高度，不允许使用负值
z-index	决定层的先后顺序和覆盖关系，值高的元素会覆盖值比较低的元素
Display	是一个显示属性，设定block值是以块状显示，在元素后面添加换行符，既其他元素不能在其后面并列显示。如果设定inline值则内联显示，在元素后面删除换行符，多个元素可以在一行内并列显示。使用值none将关闭指定元素及其子元素的显示
Visibility	这个属性是针对嵌套层的设置，如果存在嵌套的层（子层）和被嵌套的层（父层）时，可以使用inherit值设置子层继承父层的可见性，如果父层可见，子层也可见。当使用visible值时，无论父层是否可见，子层都可见。而值为hidden时，无论父层是否可见，子层都隐藏
Overflow	用于设置层内的内容超出层所能容纳的范围处理方式，为该属性设置visible值时，无论层的大小，内容都会显示出来。当设置hidden值时，会隐藏超出层大小的内容。当设置值为scroll时，不管内容是否超出层的范围，选中此项都会为层添加滚动条。而值使用auto值时，只在内容超出层的范围时才显示滚动条