html中div和span详解.doc

Html div和span详解div和span的区别div:div是一个块级元素，可以包含段落，表格等内容，用于放置不同的内容。一般我们在网页通过div来布局定位网页中的每个区块。Span:span是一个内联元素，没有实际意义，它的存在纯粹是为了应用样式，给一段内容加上标记可以通过在span上定义样式来设定其内容的样式。div和span元素最大的特点是默认都没有对元素内的对象进行任何格式化渲染。主要用于应用样式表。比如：代码：div与span的区别div标记不同行：span标记同一行：输出结果：区别：两者最明显的区别在于div是块元素，而span是行内元素。所谓块元素：是以另起一行开始渲染的元素，行内元素：不需另起一行，测试一下下面的代码你会有更形象的理解：如：CSS在线-示例测试紧跟前面的测试显示这里会另起一行显示输出结果：测试紧跟前面的测试显示这里会另起一行显示块元素和行内元素也不是一成不变的，通过定义CSS的display属性值可以互相转化如：CSS在线-示例测试紧跟前面的测试显示这里会另起一行显示输出结果：测试紧跟前面的测试显示这里会另起一行显示应用：因为div与span元素的特殊性，所以一般用于应用样式表，比如说用CSS定义为层，而需要分清的是块元素和行内元素的区别，还有两者间的相互转化。 一般而言：div一般用做渲染html的容器,而span指定内嵌文本容器。 让div在html面中垂直居中代码：aaaaaaaa*margin:0;padding:0;bodyborder:5pxsolidbody,htmlheight:98%;#outerwidth:100%;height:92%;position:relative;#outeriddisplay:table;#middleposition:absolute;top:50%;#middleiddisplay:table-cell;position:static;vertical-align:middle#innerposition:relative;top:-50%;#contentwidth:500px;height:300px;margin:0auto;background:#eee;我们都是好孩子div在html面中垂直居中div在html面中垂直居中div在html面中垂直居中div在html面中垂直居中div在html面中垂直居中我们都是好孩子 输出结果：Div的float属性float浮动属性是布局中非常重要的属性，我们常常通过对div元素应用float浮动来进行布局，不但对整个版式进行规划，也可以对一些基本元素如导航等进行排列。float属性基本释义：该属性的值指出了对象是否及如何浮动。当该属性不等于none引起对象浮动时，对象将被视作块对象(block-level)，即display属性等于block。也就是说，浮动对象的display特性将被忽略。float属性的参数：none：对象不浮动left：对象浮在左边right：对象浮在右边如一：不浮动如果float取值为none则不会发生任何浮动，块元素独占一行，紧随其后的块元素将在新行中显示，如：输出结果：代码：#content_a width:200px; height:80px; border:1px solid #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: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在水平方向容器不可见，只留下了文字。这是由于未清除浮动所造成的现象，关于清除浮动，可以参考这里：/article.asp?id=132这就是IE与FF对此种情况的不同解决，我们在实际布局中，应该避免这样的情况发生。如三：同时对这两个容器应用向左的浮动代码：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中的效果如图：在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请参考这里：/article.asp?id=144向左浮动会出现何种状态呢？在向右浮动后，最大的变化就是在HTML中，前面的元素在最右边，后面的元素跑到了最左边。如五：两个元素同时应用向右的浮动代码：52CSS#content_a width:200px; height:80px; float:right; border:1px solid #000; margin:10px; background:#ccc;#content_b width:200px; height:80px; float:right; border:1px solid #000; margin:10px; background:#999;这是第一个DIV 向右浮动这是第二个DIV 向右浮动输出结果：在IE7中的效果如图：在FF中的效果如图：同时对两个元素应用向右的浮动基本保持了一致，但请注意方向性，第二个在左边，第一个在右边。对于其它页面构成元素，浮动的原理基本是一样的。Div的position属性（四个）在CSS布局中，Position发挥着非常重要的作用，很多容器的定位是用Position来完成。Position属性有四个可选值，它们分别是：static、absolute、fixed、relative。我们下面来共同学习它们的不同的用法，在学习中我们应该去思考在什么布局情况下，应该使用它们其中的哪一种。position:static无定位(默认情况)该属性值是所有元素定位的默认情况，在一般情况下，我们不需要非凡的去声明它，但有时候碰到继续的情况，我们不愿意见到元素所继续的属性影响本身，从而可以用position:static取消继续，即还原元素定位的默认值。如：#nav position:static; position:absolute绝对定位(能够很准确的将元素移动到你想要的位置)使用position:absolute，能够很准确的将元素移动到你想要的位置，让我将nav移动到页面的右上角。我们可以这样写：nav position:absolute; top:0; right:0; width:200px; 使用绝对定位的nav层前面的或者后面的层会认为这个层并不存在，也就是在z方向上，它是相对独立出来的，丝毫不影响到其它z方向的层。所以position:absolute用于将一个元素放到固定的位置很好用，但是假如需要层相对于四周的层来确定位置就无能为力了。只能用下面讨论到的相对定位了。这里有个Win IE的bug需要提到，就是假如为绝对定位的元素定义一个相对的宽度，那么在IE下它的宽度取决于父元素的宽度而不是整个页面的宽度。position:fixed相对于窗口的固定定位(IE6不支持CSS中的position:fixed属性)这个定位属性值是什么意思呢？元素的定位方式同absolute类似，但它的包含块是视区本身。在屏幕媒体如WEB浏览器中，元素在文档滚动时不会在浏览器视察中移动。例如，它答应框架样式布局。在页式媒体如打印输出中，一个固定元素会出现于第一页的相同位置。这一点可用于生成流动标题或脚注。我们也见过相似的效果，但大都数效果不是通过CSS来实现了，而是应用了JS脚本。请非凡注重，IE6不支持CSS中的position:fixed属性。真的非常遗憾，要不然我们就可以试试这种酷酷的效果了。position:relative相对定位所谓相对定位到底是什么意思呢，是基于哪里的相对呢？我们需要明确一个概念，相对定位是相对于元素默认的位置的定位。既然是相对的，我们就需要设置不同的值来声明定位在哪里，top、bottom、left、right四个数值配合，来明确元素的位置。假如要让nav层向下移动20px,左移40px:我们可以这样写：#nav position:relative; top:50px; left:50px; 但您需要注重下面的情况，相对定位紧随他的层woaicss是不会出现在nav的下方，而是和nav发生一定的重叠！例如：#nav width:200px;height:200px;position:relative;top:50px;left:50px;background:#ccc;#woaicss width:200px;height:200px;background:#c00;输出结果：注意：position:relative并不是很好用的，nav已经移走了，相对于原来的位置，向右向左各移了50px。但我们的另一个容器woaicss什么也没有察觉，当作nav是在原来的位置上(即0 0的位置，而不是50 50)，不依不饶的紧跟在nav的后面。大家在使用时要注重方法与总结经验。position属性 父级对象和同级对象div+css布局要素：文档流position属性、父级对象和同级对象。从学div+css以来，一直对position几个属性的理解不够清晰。自己对position这一属性有了更深入和清晰的认识，同时让自己对整个div+css布局有了更深入的认识。因为div实质是一个四方块，被很多业界人士形象的比喻成盒子。那么div+css布局的过程其实就是摆放这些盒子的过程。最近一周来，专门针对这个问题进行了深入的思考和研究。结果通过对这一问题的研究不仅让自己对position这一属性有了更深入和清晰的认识，同时让自己对整个div+css布局有了更深入的认识。因为div实质是一个四方块，被很多业界人士形象的比喻成盒子。那么div+css布局的过程其实就是摆放这些盒子的过程。而我觉得控制或者说影响这些盒子的摆放的因素主要有一下几个属性：position、float、clear、margin、left、top、right、bottom、z-index；另外还要深入理解并确定好“父级对象”及“同级对象”，还有要很好的理解并想象出“文档流”的概念。下面根据自己的理解对以上元素的作用和彼此间的联系做详细的解释说明。1、什么是“文档流”？关于“文档流”有位网友这样解释：将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素。我能理解这位网友的意思，其实他的理解和我是一样的，只是他有一点小的失误，就是他把“文档流”定义成一种“行为”了如何摆放元素。但很明显，“文档流”是个名词，实质上它指“通过这种行为而产生的一个实体，即展现在浏览者眼前的页面。”那么，我们经常看到“正常文档流”和“脱离正常文档流”的字样。我想要想很清晰的理解这个问题，要从理解“div+css布局”与“table布局”的一个和大的不同说起。从我的理解而言，table布局是一个二维空间的布局（即一个平面上的布局）；而“div+css布局”是个三维空间的布局（即一个空间上的布局）。那么“div+css”是如何将平面转换为空间的呢？这要归功于以下五个属性：left、right、top、bottom、z-index，可以将right（left）、top（bottom）、z-index（正负值）想象成三维坐标轴中的x、y、z轴。“正常文档流”可以想象成x、y平面。“脱离正常文档流”就是跳出了x、y平面，独立开辟新的层面。2、何为“父级对象”“同级对象”？如果说要找块div1的父级对象，那么简单的说就是谁直接包含了div1，谁就是他的父级对象。同级对象，是指具有同一父级对象的两个或两个以上的对象。例如： 其中in1的父级对象是out，而in2、和in3的父级对象是in1，不是out。in2和in3为同级对象。3、float和clear属性详解及关联？很多网友认为，被定义float（属性值不为none时）的对象，脱离了正常的稳定流。当然，我也同意被定义这一属性的对象，其位置不再遵循正常文档流中的默认值，而是被重新定义了。但是，我还是觉得这样的对象并没有脱离原来的文档流，因为它依然处于原来的平面（原来的文档流）之内，只是他位置被重新定义，强制改变了，但对象与对象之间还是不能重叠的。而float和clear便是影响这一改变的属性。其中float有两个作用。一是重新定义当前对象的浮动方式向左或向右，二是定义在其之后文档流的跟随方式跟随在当前对象的右边或左边。Float：left指当前对象向左移动，其后文档流跟随在他的右侧。反之float：right指当前对象向右移动，其后文档流跟随在他的左侧。而Clear：用以清除当前对象两边的浮动对象（即被定义了float：left或float：right的对象。），这里的浮动对象是针对当前对象之前的浮动对象。注：float和clear之间的影响和清除作用只适用于处在同一文档流中的对象。4、position属性详解。position 属性把元素放置到一个静态的、相对的、绝对的、或固定的位置中。static： 默认。位置设置为 static 的元素，它始终会处于页面流给予的位置（static 元素会忽略任何 top、bottom、left 或 right 声明）。relative： 位置被设置为 relative 的元素，可将其移至相对于其正常位置的地方，因此 “left:20 将向元素的 LEFT 位置添加 20 个像素。absolute： 位置设置为 absolute 的元素，可定位于相对于包含它的元素的指定坐标。此元素的位置可通过 “left”、”top”、”right” 以及”bottom” 属性来规定。fixed： 位置被设置为 fixed 的元素，可定位于相对于浏览器窗口的指定坐标。此元素的位置可通过 “left”、”top”、”right” 以及”bottom” 属性来规定。不论窗口滚动与否，元素都会留在那个位置。工作于 IE7（strict 模式）。补充说明：Relative：相对父级相对定位，不可重叠。因为此时当前对象依然处在正常文档流中（当position定义为static的时候也一样），所以float和clear属性依然对其有作用。Absolute:相对父级绝对定位，可以重叠。脱离正常文档流，开辟新的层面。所以float和clear属性对其已经失去意义。Position被定义为以上四种值的对象之间，可以根据不同的需求，相互包含。本文出自 51CTO.COM技术博客Div的z-index属性(z-index:auto | number)属性(决定了一个HTML元素的层叠级别)这点很重要：div必须是浮动的Z-index属性决定了一个HTML元素的层叠级别。元素层叠级别是相对于元素在Z轴上（与X轴Y轴相对照）的位置而言。一个更高的Z-index值意味着这个元素在叠层顺序中会更靠近顶部。这个层叠顺序沿着垂直的线轴被呈现。如下图，更能清楚的表明意思。下面先来看一下z-index属性的值：z-index:auto | numberauto:默认值number:无单位的整数值，可为负数。z-index值较大的元素将叠加在z-index值较小的元素之上，对未指定此属性的定位对像，z-index值为正数的对象会在其之上，而z-index值为负数的地像在其之下。下面来讲讲：定位元素间的Z值比较及z-index在不同浏览器下默认值的影响在ie下默认值(缺省)为：z-index:0; 而FF下则缺省为：z-index:auto;1.(导致浏览器z值的不同) z-index正是IE/FF下这一点区别导致ie,ff下z值的不同表现。2. (兄弟（同级）元素后者居上，父子之间子高于父)正常情况下：兄弟（同级）元素后者居上，父子之间子高于父。3.(Z值大小比较) 对于定位元素，（不论IE还是FF）非同级关系和非父子关系元素之间的Z值大小比较，须要回溯至其为兄弟关系的两个祖先元素上，先比较这两个元素的z- index值，只有当“兄”的z-index大于“弟”的z-index值，“兄”的各个后代元素，才能超过“弟元素”及其子孙元素。4. (缺省值: IE,元素的z-index缺省值是0, FF,元素的z-index缺省值是auto)对于IE,元素的z-index缺省值是0，如果不另外设置“兄”，“弟”元素的z-index值，那么”兄”的z-index就无法大于“弟”的z- index。那么”兄”元素及其子孙就无法盖过”弟”元素及其子孙。而一旦“兄”的z-index大过了”弟”元素的z-index,那么情况就翻转了，“弟”元素及其子孙将无法盖过“兄”元素及其子孙。而对FF,元素的z-index缺省值是auto,auto的意思是什么，就是说“随便，不关我事”，那么子孙们的z值等级就只跟他们自己本身的z-index有关了。DIV+CSS排版技巧1、CSS盒子(CSS box) CSS中没有box这个属性。CSS的 盒子 (box)是由以下几个部分组成的：内容(content)、填充(padding)、边框(border)和边界(margin)。盒子的内容当然是必须有的，而填充、边框和边界1、CSS盒子(CSS box) CSS中没有box这个属性。CSS的盒子(box)是由以下几个部分组成的：内容(content)、填充(padding)、边框(border)和边界(margin)。盒子的内容当然是必须有的，而填充、边框和边界都是可选的。如果把CSS的盒子看做现实生活中的盒子，那么内容就是盒子里装的货物；而填充就是怕货物损坏而添加的泡沫或者其它抗震的东西；边框就是盒子本身了；至于边界则说明盒子摆放的时候的不能与其他物体紧挨在一起，而必须有一段空隙。当然了，CSS中的盒子是平面的。 CSS边框(border)： border主要有以下参数：none : 无边框；hidden : 隐藏边框；dotted :点线；dashed:虚线；solid : 实线边框；double : 双线边框；groove : 3D凹槽；ridge : 菱形边框；inset : 3D凹边；outset : 3D凸边。 边框的值将是四个，如果提供全部四个参数值，将按上右下左的顺序作用于四个边框。 如果只提供一个，将用于全部的四条边。 如果提供两个，第一个用于上下，第二个用于左右。 如果提供三个，第一个用于上，第二个用于左右，第三个用于下。 边框(border)和边界(margin)主要用来定位，它们将以上下左右四个值来定义。2、链接（a）的四个属性：a:link、a:visited、a:hover和a:active，顺序不能颠倒 CSS链接有四个属性：其中a:link、a:visited、a:hover和a:active分别对应未访问的链接、已经访问过的链接、鼠标悬停的链接和激活的鼠标链接(按下鼠标左键的时候)。这几个样式的顺序不能颠倒，否则可能造成部分样式无法正常显示。每个样式里可以更改字体属性、下划线、背景等等。3、CSS加入网页方法：分为三种：内部样式表、行内样式表(内嵌样式表)、外部样式表主要分为三种：内部样式表、行内样式表(内嵌样式表)、外部样式表。内部样式表主要定义在内；行内样式表可直接使用style属性定义在标签内部；使用外部样式表时，CSS文件与网页文件(html)是分离开来的，分开的文件要用 链接起来，这主要针对CSS样式表较多的网页中，特别是要与DIV结合的网页。4、如何设定文字字体、颜色、大小 使用font ，可以写在一行font属性里（除了color属性需要单独写）font-style设定斜体，比如font-style: italic; font-weight设定文字粗细，比如font-weight: bold; font-size设定文字大小，比如font-size: 12px;（或者9pt，不同单位显示问题参考CSS手册） line-height设定行距，比如line-height: 150%; color设定文字颜色（不是font-color），比如color: red; font-family设定字体，比如font-family : Lucida Grande, Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif;（这是通用的写法） 以上都可以写在一行font属性里（除了color属性需要单独写）： font: italic bold 12px/150% Lucida Grande, Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif;5、如何控制段落排版 使用margin，text-align 中文段落使用标签，左右（相当于缩进）、段前段后的空白，都可以用margin。比如： p margin: 18px 6px 6px 18px; /*分别是上、右、下、左，十二点开始的顺时针方向*/ 文字的对齐方式用text-align，比如： p text-align: center; /*居中对齐*/ 对齐方式还有left、right和justify（两端对齐） PS.谈起margin，我习惯于在写CSS的时候为所有的标签定义margin: 0; 因为时而出现由于默认的margin值导致页面排版问题，而自己找不到原因（特别注意的是ul/ol/p/dt/dd等标签）6、竖排文字 使用writing-mode writing-mode属性有两个值lr-tb和tb-rl，前者是默认的左-右、上-下，后者是上-下、右-左。 比如： p writing-mode: tb-rl; 可以结合direction排版。7、项目符号的问题 使用list-style 在CSS里项目符号有disc（实心圆点）、circle（空心圆圈）、square（实心方块）、decimal（阿拉伯数字）、lower-roman（小写罗马数字）、upper-roman（大写罗马数字）、lower-alpha（小写英文字母）、upper-alpha（大写英文字母）、none（无）。比如设定一个列表（ul或ol）的项目符号为方块，如： li list-style: square; 另外list-style还有一些值，比如可以采用一些小图片作为项目符号，在list-style下直接写url(“图片地址”)就可以了。注意如果一个项目列表的左外补丁（margin-left）设为零的时候，list-style-position: outside（默认是outside）的项目符号不会显示。可惜的是上述的项目符号似乎并不能设定大小，圆点和方块始终是那么点。并且不能设定垂直方向上的对齐。8、首字下沉 使用:first-letter 伪对象:first-letter配合font-size、float可以制作