html中div和span详解.doc

1、Html div 和 span 详解div 和 span 的区别div:div 是一个块级元素，可以包含段落，表格等内容，用于放置不同的内容。一般我们在网页通过 div 来布局定位网页中的每个区块。Span:span 是一个内联元素，没有实际意义，它的存在纯粹是为了应用样式，给一段内容加上标记可以通过在 span 上定义样式来设定其内容的样式。div 和 span 元素最大的特点是默认都没有对元素内的对象进行任何格式化渲染。主要用于应用样式表。比如：代码：div 与 span 的区别div 标记不同行：span 标记同一行：输出结果：区别：两者最明显的区别在于 div 是块元素，而 span

2、是行内元素。所谓块元素：是以另起一行开始渲染的元素，行内元素：不需另起一行，测试一下下面的代码你会有更形象的理解：如：CSS 在线-示例测试紧跟前面的“测试“显示这里会另起一行显示输出结果：测试紧跟前面的“测试“显示这里会另起一行显示块元素和行内元素也不是一成不变的，通过定义 CSS 的 display 属性值可以互相转化如：CSS 在线-示例测试紧跟前面的“测试“显示这里会另起一行显示输出结果：测试紧跟前面的“测试“显示这里会另起一行显示应用：因为 div 与 span 元素的特殊性，所以一般用于应用样式表，比如说用 CSS 定义为层，而需要分清的是块元素和行内元素的区别，还有两者间的相互转

3、化。 一般而言：div 一般用做渲染 html 的容器,而 span 指定内嵌文本容器。 让 div 在 html 面中垂直居中代码：aaaaaaaa*margin:0; padding:0;bodyborder:5px solidbody,htmlheight:98%;#outerwidth:100%; height:92%;position:relative;#outeriddisplay:table;#middleposition:absolute;top:50%;#middleiddisplay:table-cell; position:static;vertical-align:mi

4、ddle#innerposition:relative; top:-50%;#contentwidth:500px; height:300px; margin:0 auto; background:#eee;我们都是好孩子div 在 html 面中垂直居中 div 在 html 面中垂直居中 div 在 html 面中垂直居中 div 在 html 面中垂直居中 div 在 html 面中垂直居中 我们都是好孩子输出结果：Div 的 float 属性float 浮动属性是布局中非常重要的属性，我们常常通过对 div 元素应用 float 浮动来进行布局，不但对整个版式进行规划，也可以对一些基本

5、元素如导航等进行排列。float 属性基本释义：该属性的值指出了对象是否及如何浮动。当该属性不等于 none 引起对象浮动时，对象将被视作块对象(block-level)，即 display 属性等于 block。也就是说，浮动对象的 display特性将被忽略。float 属性的参数： none：对象不浮动left：对象浮在左边right：对象浮在右边如一：不浮动如果 float 取值为 none 则不会发生任何浮动，块元素独占一行，紧随其后的块元素将在新行中显示，如：输出结果：代码：#content_a width:200px; height:80px; border:1px solid

6、#000; margin:10px; background:#ccc;#content_b width:200px; height:80px; border:1px solid #000; margin:10px; background:#999;这是第一个这是第二个如二：content_a 应用向左的浮动，而 content_b 不应用任何浮动代码：52CSS#content_a width:200px; height:80px; float:left; border:1px solid #000; margin:10px; background:#ccc;#content_b width:

7、200px; height:80px; border:1px solid #000; margin:10px; background:#999;这是第一个 DIV 向左浮动这是第二个 DIV 不应用浮动输出结果：在 IE7 中的效果：在 FF 中的效果：在 IE 中，对 content_a 应用向左的浮动后，content_a 向左浮动，content_b 在水平方向仅跟着它的后面。在 FF 中，对 content_a 应用向左的浮动后，content_b 在水平方向容器不可见，只留下了文字。这是由于未清除浮动所造成的现象，关于清除浮动，可以参考这里：http:/ 这就是 IE 与 FF 对此

8、种情况的不同解决，我们在实际布局中，应该避免这样的情况发生。如三：同时对这两个容器应用向左的浮动代码：52CSS#content_a width:200px; height:80px; float:left; border:1px solid #000; margin:10px; background:#ccc;#content_b width:200px; height:80px; float:left; border:1px solid #000; margin:10px; background:#999;这是第一个 DIV 向左浮动这是第二个 DIV 向左浮动输出结果：在 IE7 中的效

9、果如图：在 FF 中的效果如图：在 IE 与 FF 中，他们的效果基本取得了一致。在布局中，我们可应用这类 IE 与 FF 兼容的方法。如四：content_a 不应用任何浮动, 而 content_b 应用向左的浮动代码：52CSS#content_a width:200px; height:80px; border:1px solid #000; margin:10px; background:#ccc;#content_b width:200px; height:80px; float:left; border:1px solid #000; margin:10px; background:#999;这是第一个 DIV 不应用浮动这是第二个 DIV 向左浮动输出结果：在 IE7 中的效果如图：在 FF 中的效果如图：在 IE 与 FF 中均未有太大的变化。在 IE 中，应用浮动后的 content_b 却造成了一个双边距的 BUY。关于 IE 的双边距 BUY 请参考这里：http:/