divcss网页标准化布局

《divcss网页标准化布局》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、DIV+CSS网页标准化布局讲师：张涛网址：www.lampbrother.net电话：4007001307QQ/Email:zhangtao@lampbrother.netDIV+CSS网页标准化布局1.概述2.DIV+CSS的优势3.无意义的元素div和span4.盒子模型5.定位属性6.区块属性(区块模型)7.区块框浮动8.行框和清理9.使用区块框设计页面布局1、概述v使用“DIV+CSS”对网站进行布局符合W3C标准，采用这种方式布局通常是为了说明与HTML表格定位方式的区别。因为现在的网站设计标准中，已经不再使用表格定位技术，而是采用DIV+CSS的方式实现各种

2、定位。通过使用div盒子模型结构将各部分内容划分到不同的区块，然后用css来定义盒子模型的位置、大小、边框、内外边距、排列方式等。简单地说，div用于搭建网站结构（框架）、css用于创建网站表现（样式/美化）。该标准简化了HTML页面代码，获得一个较优秀的网站结构，有利于日后网站维护、协同工作和便于搜索引擎抓取。当然并不是所有的网页都需要用div布局，例如数据页面、报表之类的页面，还是使用HTML的表格会比较方便，web标准里并没有说要抛弃table。2、DIV+CSS的优势v采用DIV+CSS模式的网站具有以下优势：Ø表现和内容相分离Ø代码简洁，提高页面浏览速度Ø易于维

3、护和改版Ø提高搜索引擎对网页的索引效率3、无意义的元素div和spanvHTML只是赋予内容的手段，大部分HTML标签都有其意义（例如，标签p创建段落，h1标签创建标题等等）的，然而div和span标签似乎没有任何内容上的意义，听起来就像一个泡沫做成的锤子一样无用。但实际上，与CSS结合起来后，它们被用得十分广泛。你所需要记住的是span和div是“无意义”的标签。它们的存在纯粹是应用样式，所以当样式表失效时它就没有任何的作用v它们被用来组合成一大块的HTML代码并赋予一定的信息，大部分用类属性class和标识属性id与元素联系起来。span和div的不同之处在于span

4、是内联的，用在一小块的内联HTML中。而div（division）元素是块级的（简单地说，它等同于其前后有断行），用于组合一大块的代码，为HTML文档内大块的内容提供结构和背景的元素，可以包含段落、标题、表格甚至其他部分，这使div便于建立不同集成的类。vdiv的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由div标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。4、盒子模型v每个HTML元素都可以看作一个装了东西的盒子，盒子具有宽度（width）和高度（height），盒子里面的内容到盒子的边框之间的距离即填充（padding）

5、，盒子本身有边框（border），而盒子边框外和其他盒子之间，还有边界（margin）。布局中的主要样式vfontvwidth:vline-heightvheightvcolorvfloat:vmarginvclearvpaddingvdisplayvbordervtext-alignvbackground5、定位属性属性描述用于定义一个元素是否absolute（绝对），relative（相对position），static（静态），或者fixed（固定）top层距离顶点纵坐标的距离left层距离顶点横坐标的距离width层的宽度，可以为一个长度或“auto”值，不允许使

6、用负值reight层的高度，可以为一个长度或“auto”值，不允许使用负值决定层的先后顺序和覆盖关系，值高的元素会覆盖值比较低z-index的元素是一个显示属性，设定block值是以块状显示，在元素后面添加换行符，既其他元素不能在其后面并列显示。如果设定displayinline值则内联显示，在元素后面删除换行符，多个元素可以在一行内并列显示。使用值none将关闭指定元素及其子元素的显示属性描述这个属性是针对嵌套层的设置，如果存在嵌套的层（子层）和被嵌套的层（父层）时，可以使用inherit值设置子层继承父层的可见性，如果父层可见，子层也可见。visibility当使用v

7、isible值时，无论父层是否可见，子层都可见。而值为hidden时，无论父层是否可见，子层都隐藏用于设置层内的内容超出层所能容纳的范围处理方式，为该属性设置visible值时，无论层的大小，内容都会显示出来。当设置hidden值时，会隐藏超出层大小的内容overflow。当设置值为scroll时，不管内容是否超出层的范围，选中此项都会为层添加滚动条。而值使用auto值时，只在内容超出层的范围时才显示滚动条6、区块属性(区块模型)属性描述是定义区块外边界与上级元素距离的属性，用1到4个值来设置元素的边界，每个值都是长度、百分比