DIV和SPAN的区别.docVIP

DIV与SPAN的区别 div和span用来为内容指定样式或绑定脚本。虽然大多数HTML元素可以通过style属性来设置样式信息，但是许多HTML元素有自己默认的样式，该样式可能和style定义的样式混合甚至冲突，是我们不希望看到的。如：strong style = “color: red”I am strong!/strong。和其他html元素不同，div和span没有默认的显示样式。所以可以通过它们来指定样式。 　　（1）div（division）是块级元素，可以包含段落、标题、表格，乃至诸如章节、摘要和备注等。由于是块级元素，在段落开始、结束处会插入一个换行。div align=””…/div用来设置内容块的位置。可以使用div来为文档的任意部分绑定脚本或样式。 　　（2）和div不同，span是一个行内元素，不会引起换行。它是一个逻辑化的内嵌分组元素。最常见的使用方式是用它来为一段文本中的几个单词甚至某几个字符指定样式。 　　（3）可以将需要居中的内容放到center/center中间。center与div align = ”center”作用相同。 　　举例：span元素的使用。 pIn this sentence span “important”some of the text is important!/span/p 定义DIV 分析一个典型的定义div例子： #sample{ MARGIN: 10px 10px 10px 10px;PADDING-LEFT: 20px; PADDING-TOP: 20px;PADDING-RIGHT: 10px; PADDING-BOTTOM: 10px;BORDER-RIGHT: #CCC 2px solid;BORDER-BOTTOM: #CCC 2px solid;BORDER-LEFT: #CCC 2px solid;BORDER-TOP: #CCC 2px solid;BACKGROUND: url(images/bg_poem.jpg) #FEFEFE no-repeat right bottom;COLOR: #666;TEXT-ALIGN: center;LINE-HEIGHT: 150%; WIDTH:60%; } 说明如下： 层的名称为sample，在页面中用div id=sample就可以调用这个样式。 MARGIN是指层的边框以外留的空白，用于页边距或者与其它层制造一个间距。10px 10px 10px 10px分别代表上右下左(顺时针方向)四个边距，如果都一样，可以缩写成MARGIN: 10px;。如果边距为零，要写成MARGIN: 0px;。注意：当值是零时，除了RGB颜色值0%必须跟百分号，其他情况后面可以不跟单位px。MARGIN是透明元素，不能定义颜色。 PADDING是指层的边框到层的内容之间的空白。PADDING-LEFT是指左边边框到内容的距离，以此类推。如果都一样，可以缩写成PADDING:0px。PADDING是透明元素，不能定义颜色。 BORDER是指层的边框，BORDER-RIGHT: #CCC 2px solid;是定义层的右边框颜色为#CCC，宽度为2px，样式为solid直线。如果要虚线样式可以用dotted。 BACKGROUND是定义层的背景。分2级定义，先定义图片背景，采用url(../images/bg_logo.gif)来指定背景图片路径；其次定义背景色#FEFEFE。on-repeat指背景图片不需要重复，如果需要横向重复用repeat-x,纵向重复用repeat-y,重复铺满整个背景用repeat。后面的right bottom;是指背景图片从右下角开始。如果没有背景图片可以只定义背景色BACKGROUND: #FEFEFE COLOR用于定义字体颜色，上一节已经介绍过。 TEXT-ALIGN用来定义层中的内容排列方式，center居中,left居左,right居右。 LINE-HEIGHT定义行高，150%是指高度为标准高度的150%，也可以写作：LINE-HEIGHT:1.5或者LINE-HEIGHT:1.5em，都是一样的意思。 WIDTH是定义层的宽度，可以采用固定值，例如500px，也可以采用百分比，象这里的60%。要注意的是:这个宽度仅仅指你内容的宽度，不包含margin,border和padding。但在有些浏览器中不是这么定义的，需要你多试试。