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; backgroun
10、d:#999;这是第一个 DIV 不应用浮动这是第二个 DIV 向左浮动输出结果：在 IE7 中的效果如图：在 FF 中的效果如图：在 IE 与 FF 中均未有太大的变化。在 IE 中，应用浮动后的 content_b 却造成了一个双边距的 BUY。关于 IE 的双边距 BUY 请参考这里：http:/ HTML 中，前面的元素在最右边，后面的元素跑到了最左边。如五：两个元素同时应用向右的浮动代码：52CSS#content_a width:200px; height:80px; float:right; border:1px solid #000; margin:10px; backgrou
11、nd:#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 发挥着非常重要的作用，很多容器的定位是用 Posi
12、tion 来完成。Position 属性有四个可选值，它们分别是：static、absolute、fixed、relative。我们下面来共同学习它们的不同的用法，在学习中我们应该去思考在什么布局情况下，应该使用它们其中的哪一种。position:static 无定位(默认情况)该属性值是所有元素定位的默认情况，在一般情况下，我们不需要非凡的去声明它，但有时候碰到继续的情况，我们不愿意见到元素所继续的属性影响本身，从而可以用 position:static 取消继续，即还原元素定位的默认值。如：#nav position:static; position:absolute 绝对定位(能够很准确
13、的将元素移动到你想要的位置)使用 position:absolute，能够很准确的将元素移动到你想要的位置，让我将 nav 移动到页面的右上角。我们可以这样写：nav position:absolute; top:0; right:0; width:200px; 使用绝对定位的 nav 层前面的或者后面的层会认为这个层并不存在，也就是在 z 方向上，它是相对独立出来的，丝毫不影响到其它 z 方向的层。所以 position:absolute 用于将一个元素放到固定的位置很好用，但是假如需要层相对于四周的层来确定位置就无能为力了。只能用下面讨论到的相对定位了。这里有个 Win IE 的 bug
14、需要提到，就是假如为绝对定位的元素定义一个相对的宽度，那么在 IE 下它的宽度取决于父元素的宽度而不是整个页面的宽度。position:fixed 相对于窗口的固定定位(IE6 不支持 CSS 中的 position:fixed 属性)这个定位属性值是什么意思呢？元素的定位方式同 absolute 类似，但它的包含块是视区本身。在屏幕媒体如 WEB 浏览器中，元素在文档滚动时不会在浏览器视察中移动。例如，它答应框架样式布局。在页式媒体如打印输出中，一个固定元素会出现于第一页的相同位置。这一点可用于生成流动标题或脚注。我们也见过相似的效果，但大都数效果不是通过 CSS 来实现了，而是应用了 JS
15、 脚本。请非凡注重，IE6 不支持 CSS 中的 position:fixed 属性。真的非常遗憾，要不然我们就可以试试这种酷酷的效果了。position:relative 相对定位所谓相对定位到底是什么意思呢，是基于哪里的相对呢？我们需要明确一个概念，相对定位是相对于元素默认的位置的定位。既然是相对的，我们就需要设置不同的值来声明定位在哪里，top、bottom、left、right 四个数值配合，来明确元素的位置。假如要让 nav 层向下移动 20px,左移40px:我们可以这样写：#nav position:relative; top:50px; left:50px; 但您需要注重下面的
16、情况，相对定位紧随他的层 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
17、0 的位置，而不是 50 50)，不依不饶的紧跟在 nav 的后面。大家在使用时要注重方法与总结经验。position 属性 父级对象和同级对象div+css 布局要素：文档流 position 属性、父级对象和同级对象。从学 div+css 以来，一直对 position 几个属性的理解不够清晰。自己对 position 这一属性有了更深入和清晰的认识，同时让自己对整个 div+css 布局有了更深入的认识。因为 div 实质是一个四方块，被很多业界人士形象的比喻成盒子。那么 div+css 布局的过程其实就是摆放这些盒子的过程。最近一周来，专门针对这个问题进行了深入的思考和研究。结果通过对
18、这一问题的研究不仅让自己对 position 这一属性有了更深入和清晰的认识，同时让自己对整个 div+css 布局有了更深入的认识。因为 div 实质是一个四方块，被很多业界人士形象的比喻成盒子。那么 div+css 布局的过程其实就是摆放这些盒子的过程。而我觉得控制或者说影响这些盒子的摆放的因素主要有一下几个属性：position、float、clear、margin、left、top、right、bottom、z-index；另外还要深入理解并确定好“父级对象”及“同级对象”，还有要很好的理解并想象出“文档流”的概念。下面根据自己的理解对以上元素的作用和彼此间的联系做详细的解释说明。1、
19、什么是“文档流”？关于“文档流”有位网友这样解释：将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素。我能理解这位网友的意思，其实他的理解和我是一样的，只是他有一点小的失误，就是他把“文档流”定义成一种“行为”了如何摆放元素。但很明显，“文档流”是个名词，实质上它指“通过这种行为而产生的一个实体，即展现在浏览者眼前的页面。”那么，我们经常看到“正常文档流”和“脱离正常文档流”的字样。我想要想很清晰的理解这个问题，要从理解“div+css 布局”与“table 布局”的一个和大的不同说起。从我的理解而言，table 布局是一个二维空间的布局（即一个平面上的布局）；而“div+css
20、布局”是个三维空间的布局（即一个空间上的布局）。那么“div+css”是如何将平面转换为空间的呢？这要归功于以下五个属性：left、right、top、bottom、z-index，可以将 right（left）、top（bottom）、z-index（正负值）想象成三维坐标轴中的 x、y、z 轴。“正常文档流”可以想象成 x、y 平面。“脱离正常文档流”就是跳出了 x、y 平面，独立开辟新的层面。2、何为“父级对象”“同级对象”？如果说要找块 div1 的父级对象，那么简单的说就是谁直接包含了 div1，谁就是他的父级对象。同级对象，是指具有同一父级对象的两个或两个以上的对象。例如：其中 i
21、n1 的父级对象是 out，而 in2、和 in3 的父级对象是 in1，不是 out。in2 和 in3 为同级对象。3、float 和 clear 属性详解及关联？很多网友认为，被定义 float（属性值不为 none 时）的对象，脱离了正常的稳定流。当然，我也同意被定义这一属性的对象，其位置不再遵循正常文档流中的默认值，而是被重新定义了。但是，我还是觉得这样的对象并没有脱离原来的文档流，因为它依然处于原来的平面（原来的文档流）之内，只是他位置被重新定义，强制改变了，但对象与对象之间还是不能重叠的。而float 和 clear 便是影响这一改变的属性。其中 float 有两个作用。一是重新
22、定义当前对象的浮动方式向左或向右，二是定义在其之后文档流的跟随方式跟随在当前对象的右边或左边。Float：left 指当前对象向左移动，其后文档流跟随在他的右侧。反之 float：right 指当前对象向右移动，其后文档流跟随在他的左侧。而 Clear：用以清除当前对象两边的浮动对象（即被定义了 float：left 或 float：right 的对象。），这里的浮动对象是针对当前对象之前的浮动对象。注：float 和 clear 之间的影响和清除作用只适用于处在同一文档流中的对象。4、position 属性详解。position 属性把元素放置到一个静态的、相对的、绝对的、或固定的位置中。s
23、tatic： 默认。位置设置为 static 的元素，它始终会处于页面流给予的位置（static 元素会忽略任何 top、bottom、left 或 right 声明）。relative： 位置被设置为 relative 的元素，可将其移至相对于其正常位置的地方，因此 “left:20 将向元素的 LEFT 位置添加 20 个像素。absolute： 位置设置为 absolute 的元素，可定位于相对于包含它的元素的指定坐标。此元素的位置可通过 “left”、”top”、”right” 以及”bottom” 属性来规定。fixed： 位置被设置为 fixed 的元素，可定位于相对于浏览器窗口的
24、指定坐标。此元素的位置可通过 “left”、”top”、”right” 以及”bottom” 属性来规定。不论窗口滚动与否，元素都会留在那个位置。工作于 IE7（strict 模式）。补充说明：Relative：相对父级相对定位，不可重叠。因为此时当前对象依然处在正常文档流中（当position 定义为 static 的时候也一样），所以 float 和 clear 属性依然对其有作用。Absolute:相对父级绝对定位，可以重叠。脱离正常文档流，开辟新的层面。所以 float 和clear 属性对其已经失去意义。Position 被定义为以上四种值的对象之间，可以根据不同的需求，相互包含。D
25、iv 的 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-i
26、ndex 值较小的元素之上，对未指定此属性的定位对像，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
27、 还是 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。那么”兄”元素及其子孙就无法盖过”弟”元素及其子孙。
28、而一旦“兄”的 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、CS
29、S 盒子(CSS box) CSS 中没有 box 这个属性。CSS 的盒子(box)是由以下几个部分组成的：内容(content)、填充(padding)、边框(border)和边界(margin)。盒子的内容当然是必须有的，而填充、边框和边界都是可选的。如果把 CSS 的盒子看做现实生活中的盒子，那么内容就是盒子里装的货物；而填充就是怕货物损坏而添加的泡沫或者其它抗震的东西；边框就是盒子本身了；至于边界则说明盒子摆放的时候的不能与其他物体紧挨在一起，而必须有一段空隙。当然了，CSS 中的盒子是平面的。 CSS 边框(border)： border 主要有以下参数：none : 无边框；hi
30、dden : 隐藏边框；dotted :点线；dashed:虚线；solid : 实线边框；double : 双线边框；groove : 3D 凹槽；ridge : 菱形边框；inset : 3D 凹边；outset : 3D 凸边。 边框的值将是四个，如果提供全部四个参数值，将按上右下左的顺序作用于四个边框。 如果只提供一个，将用于全部的四条边。 如果提供两个，第一个用于上下，第二个用于左右。 如果提供三个，第一个用于上，第二个用于左右，第三个用于下。 边框(border)和边界(margin)主要用来定位，它们将以上下左右四个值来定义。2、链接（a）的四个属性：a:link、a:visit
31、ed、a:hover 和 a:active，顺序不能颠倒 CSS 链接有四个属性：其中 a:link、a:visited、a:hover 和 a:active 分别对应未访问的链接、已经访问过的链接、鼠标悬停的链接和激活的鼠标链接(按下鼠标左键的时候)。这几个样式的顺序不能颠倒，否则可能造成部分样式无法正常显示。每个样式里可以更改字体属性、下划线、背景等等。3、CSS 加入网页方法：分为三种：内部样式表、行内样式表(内嵌样式表)、外部样式表主要分为三种：内部样式表、行内样式表(内嵌样式表)、外部样式表。内部样式表主要定义在内；行内样式表可直接使用 style 属性定义在标签内部；使用外部样式表
32、时，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
33、-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;
34、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 值导致页面排版问题，而自己找不
35、到原因（特别注意的是 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（小写
36、英文字母）、upper-alpha（大写英文字母）、none（无）。比如设定一个列表（ul 或 ol）的项目符号为方块，如： li list-style: square; 另外 list-style 还有一些值，比如可以采用一些小图片作为项目符号，在list-style 下直接写 url(“图片地址”)就可以了。注意如果一个项目列表的左外补丁（margin-left）设为零的时候，list-style-position: outside（默认是 outside）的项目符号不会显示。可惜的是上述的项目符号似乎并不能设定大小，圆点和方块始终是那么点。并且不能设定垂直方向上的对齐。8、首字下沉 使用
37、:first-letter 伪对象:first-letter 配合 font-size、float 可以制作首字下沉效果。 比如： p:first-letter padding: 6px; font-size: 32pt; float: left; 9、首行缩进 使用 text-indent text-indent 可以使得容器内首行缩进一定单位。比如中文段落一般每段前空两个汉字。可以这么写： p text-indent: 2em; /*em 是相对单位，2em 即现在一个字大小的两倍*/ 如果 font-size 是 12px 的话，那么 text-indent: 2em 则缩进 24px。
38、10、关于汉字注音 使用 ruby 标签和 ruby-align 属性 比如说注音zhu yin，可以利用 ruby-align 设置对齐方式。这是在 CSS 手册里面看到的，具体可以自行查阅 ruby-align 项。11、固定宽度汉字截断 使用 text-overflow 用后台语言可以对从数据库里的字段内容做截断处理，比如说截 12 个汉字（之后用省略号）。但是有时还需要 html 标签的过滤等，而用 CSS 来控制则没有这个问题。比如对列表应用以下样式： li overflow:hidden; text-overflow:ellipsis; white-space:nowrap; 不过
39、只能处理文字在一行上的截断，不能处理多行。12、固定宽度汉字（词）折行 使用 word-break 举个例子，比如说要在一个固定宽度容器里面显示很多地名（假设以空格分隔），为了避免地名中间断开（即一个字在上面而另一个字折断到下一行去了）。则可以使用 word-break。比如： 南京上海 上海上 南 上海上海 南京 上海上海上海 南京上海 上海 南京上海 上海 南京 上海 南京 上海 南京 上海 南京 上海 南京 上海 南京上海 上海 南京上海 上海 值得注意的是里面的空格不能以 代替（最少要有一个软空格）。13、设置背景属性 使用(background) background 属性包含很多子
40、属性，如 background-color 设置背景颜色；background-image 设置背景图片；background-repeat 设置背景图片的重复设置，background-repeat:no-repeat 为不重复， background-repeat:repeat-x为只水平方向重复， background-repeat:repeat-y 为只垂直方向重复； background-position 设置背景图片的显示位置，background-attachment 为固定图片在某个位置显示。 以上图片属性均可写在一起，如：background:url(绝对路径或相对路径);background-repeat:no-repeat;background-position:x y 坐标或百分比;
