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:/