html中div与span详解.doc

Html div和spandiv和span的区别div是一个块级元素，可以包含段落，表格等内容，用于放置不同的内容。一般我们在网页通过div来布局定位网页中的每个区块。span是一个内联元素，没有实际意义，它的存在纯粹是为了应用样式，给一段内容加上span/span标记可以通过在span上定义样式来设定其内容的样式。 div和?span元素最大的特点是默认都没有对元素内的对象进行任何格式化渲染。主要用于应用样式表。 html head titlediv与span的区别/title /head body pdiv标记不同行：/p divimg src=_CSS在线_logo.gif border=0/div divimg src=_CSS在线_logo.gif border=0/div divimg src=_CSS在线_logo.gif border=0/div pspan标记同一行：/p spanimg src=_CSS在线_logo.gif border=0/span spanimg src=_CSS在线_logo.gif border=0/span spanimg src=_CSS在线_logo.gif border=0/span /body /html 输出结果： 区别： 两者最明显的区别在于div是块元素，而span是行内元素。 所谓块元素是以另起一行开始渲染的元素，行内元素不需另起一行，测试一下下面的代码你会有更形象的理解：!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN /TR/xhtml1/DTD/xhtml1-strict.dtd html head titleCSS在线-示例/title style type=text/css /style /head body 测试span紧跟前面的测试显示/spandiv这里会另起一行显示/div /body /html 输出结果： 测试紧跟前面的测试显示 这里会另起一行显示 块元素和行内元素也不是一成不变的，通过定义CSS的display属性值可以互相转化 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN /TR/xhtml1/DTD/xhtml1-strict.dtd html head titleCSS在线-示例/title style type=text/css /style /head body 测试div style=display:inline紧跟前面的测试显示/divspan style=display:block这里会另起一行显示/span /body /html 输出结果： 测试紧跟前面的测试显示 这里会另起一行显示 应用： 因为div与span元素的特殊性，所以一般用于应用样式表，比如说用CSS定义为层，而需要分清的是块元素和行内元素的区别，还有两者间的相互转化。 一般而言：div一般用做渲染html?的容器,而span指定内嵌文本容器。 !DOCTYPE?html?PUBLIC?-//W3C//DTD?XHTML?1.0?Transitional//EN?/TR/xhtml1/DTD/xhtml1-transitional.dtdhtml?xmlns=/1999/xhtmlheadmeta?http-equiv=Content-Type?content=text/html;?charset=gb2312?/titleaaaaaaaa/titlestyle??*{margin:0;?padding:0;}body{border:5px?solid}body,html{height:98%;}#outer{width:100%;?height:92%;position:relative;}#outer[id]{display:table;}#middle{position:absolute;top:50%;}#middle[id]{display:table-cell;?position:static;vertical-align:middle}#inner{position:relative;?top:-50%;}#content{width:500px;?height:300px;?margin:0?auto;?background:#eee;}/style??body??p?style=height:3%我们都是好孩子/pdiv?id=outer??????div?id=middle????????????div?id=inner????????????????d