DIV属性

1 DIV属性 一、常用属性： 1、Height:设置 DIV的高度。 2、Width:设置 DIV的宽度。 3、margin:用于设置 DIV的外延边距，也就是到父容器的距离。 说明：margin:后面跟有四个距离分别为到父容器的上-右-下-左边的距离；可以看例子中的白 色 DIV 到黑色 DIV 的边距离效果。还可以分别设置这四个边的距离，用到的属性如下： 4、margin-left:到父容器左边框的距离。 5、margin-right:到父容器右边框的距离。 6、margin-top: 到父容器上边框的距离。 7、margin-bottom:到父容器下边框的距离。 8、padding:用于设置 DIV的内边距。 说明：padding 的格式和 margin 的格式一样，可以对照学习。可以看黑色 DIV 与白色 DIV 的边 距来体会此属性的效果。这是还需要注意的是 padding 设置的距离不包括在本身的 width 和 height 内(在 IE7 和 FF 中)，比如一个 DIV 的 width 设置了 100px,而 padding-left 设置了 50px,那么这个 DIV 在页面上显示的将是 150px 宽。也可以用以下四个属性来分别设置 DIV 的内边距： 9、padding-left:左内边距。 10、padding-right: 右内边距。 11、padding-top; 上内边距。 12、padding-bottom: 下内边距。 13、position:设置 DIV的定位方式。 说明：position 的属性中有 static、fixed、relative、absolute 四个属性。常用 relative 和 absolute。若指定为 static 时，DIV 遵循 HTML 规则；若指定为 relative 时，可以用 top、left、 right、bottom 来设置 DIV 在页面中的偏移，但是此时不可使用层；若指定为 absolute 时，可以用 top、left、right、bottom 对 DIV 进行绝对定位；若指定为 fixed 时，在 IE7 与 FF 中 DIV 的位置相 对于屏屏固定不变，IE6 中没有效果； 14、left:设置对象相对于文档层次中最近一个定位对象的左边界的位置。 15、top:设置对象相对于文档层次中最近一个定位对象的上边界的位置。 16、right:设置对象相对于文档层次中最近一个定位对象的右边界的位置。 17、bottom:设置对象相对于文档层次中最近一个定位对象的下边界的位置。 18、z-index:设置 DIV的层叠顺序。 说明：上例效果中如果不设 z-index 属性蓝色 DIV 应该在中间，而现在的效果蓝色在最上面了。 还要说明的是用 z-index 属性时，position 必需要指定为 absolute 才行。 19、font:指定 DIV中文本的样式，其后可跟文本的多个样式。 说明：font 后可以跟文本样式的多个属性，如字体粗细、字体大小、何种字体等等。还可以用 以下几个属性分别加以设置： 20、font-family:设置要用的字体名称； 21、font-weight:指定文本的粗细,其值有 bold bolder lighter等。 22、font-size:指定文本的大小。 23、font-style:指定文本样式，其值有 italic normal oblique等。 24、color:指定文本颜色。 25、text-align:指定文本水平对齐方式，其值有 center(居中) left right justify。 2 26、text-decorator:用于文本的修饰。其值有 none underline overline line-through和 blink的组 合。 27、text-indent:设置文本的缩进。 28、text-transform:设置文本的字母大小写。其值有 lowercase uppercase capitalize(首字母大 写) none。 29、overflow:内容溢出控制，其值有 scroll(始终显示滚动条)、visible(不显示滚动条，但超出部 分可见)、auto(内容超出时显示滚动条)、hidden(超出时隐藏内容)。 30、direction:内容的流向。其值有 ltr(从左至右)、rtl(从右至左)。 31、line-height:指定文本的行高。 32、Word-spacing:字间距。 33、border:设置 DIV的边框样式。 说明：border 后跟边框的样式、宽度、颜色等属性。还可以用以下属性分别设置。 34、border-width:设置边框的宽度。 35、border-color：设置边框的颜色。 36、border-style:设置边框的样式。 说明：border 是对四个边框同时进行设置。也可以单独对某一边或几个边进行设置，此时用以 下属性： border-top:设置上边框样式。 37、border-bottom:设置下边框样式。 38、border-left:设置左边框样式。 39、border-right:设置右边框样式。 说明：某一边框的某一样式也可单独设置，以上边框为例可以用：border-top-style、 border-top-width、border-top-color 来分别设置，由于使用各 border 相同，所以不在举例说明。 40、display:设置显示属性。其值有 block、none。 41、float:设置 DIV在页面上的流向，其值有 left(靠左显示)、right(靠右显示)、none。 50、background:设置 DIV的背景样式。 例：