div属性

 div属性

一、常用样式属性

1、width、height：分别用来设置div的宽度和高度；

2、padding：用来设置内边距，即内部子元素到div的边界的距离；

                    该属性有四个值分别为：padding-top、padding-right、padding-bottom、padding-left；顺序不可变，但可省略其中的某个。可以用上的方法分开单独设值，也可             以用padding来设值。如果用这种简写的方式来设值，需注意：四个值的顺序 和分开设值的顺序是一致的，如果只写一个值，则默认分别应用到四个边距；若写两个                     值，则第一个值应用到上、下边 距第二个值应用到左、右边距；如果写三个值，则第一个值用到上边距，第二个值用为左、右边距，第三个值用为下边 距。

3、margin：用来设置外边距，即div到父元素的边界的距离；用法与padding类似，不再赘述。

4、border： 这是一个复合属性，包括边框的宽度、样式、颜色；设置的是全部的边框的样式；

  4.1)border-width：边框的宽度，用长度值来定义边框的厚度，不允许为负值；

•                          如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。
•                          如果只提供一个，将用于全部的四边。
•                          如果提供两个，第一个用于上、下，第二个用于左、右。
•                          如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。

                                   可选值：medium：定义默认厚度的边框，thin：定义比默认厚度细的边框，thick：定义比默认厚度粗的边框；

                                   设置方向：[border-top-width]、[border-right-width]、[border-bottom-width]、[border-left-width]

  4.2)borde-style：边框的样式，用来设置边框的显示样式；

                                  设置方向：[border-top-width]、[border-right-width]、[border-bottom-width]、[border-left-width]

•                          如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。
•                          如果只提供一个，将用于全部的四边。
•                          如果提供两个，第一个用于上、下，第二个用于左、右。
•                          如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。 

                                                 可选值：

                                                 none：无轮廓,border-color与border-width将被忽略;

                                                 hidde：隐藏边框，IE7及以下尚不支持；

                                                dotted：点状轮廓；

                                                dashed：虚线轮廓；

                                               solid：实现轮廓；

                                               double：双实现轮廓，两条单线与其间隔的和等于指定的border-width值；

                                                groove：3D凹槽轮廓；

                                                ridge：3D凸槽轮廓；

                                               inset：3D凹边轮廓；

                                               outset：3D凸边轮廓；

             有时，将边框宽度设置为0，但是边框依然存在，这时，只需将边框的样式设为：hidden即可；

            4.3）border-color：边框的颜色，

                                                设置方向：[border-top-width]、[border-right-width]、[border-bottom-width]、[border-left-width]

•                           如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。
•                           如果只提供一个，将用于全部的四边。
•                           如果提供两个，第一个用于上、下，第二个用于左、右。
•                           如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。 

                                       取值：

                                       static：无特殊定位，对戏那个遵循正常的文档流，top、right、bottom、left属性不会被应用；

                                       relative：对象遵循正常的文档流，将依据top、right、bottom、left属性进行偏移；

                                       absolute：对象脱离正常的文档流，将依据top、right、bottom、left属性进行绝对定位，而其层叠通过z-index属性定义；

                                       fixed：对象脱离正常文档流，将依据top、right、bottom、left属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动，IE6及以下不支持此                                                      参数；

6、font：设置div中文字的样式，

               font-family：设置字体名称；

               font-size：设置文字大小；

               font-weight：设置文字的粗细；

               font-style：设置文字样式；

               color：设置文字颜色；

               text-align：设置文本的水品对齐方式；

               text-decorator：修饰文本；

               text-indent：设置文本的缩进；

               text-transform：摄者文本的大小写；

               direction：内容的流向；

               line-height：设置文本的行高；

               word-spacing：字间距；

7、overflow：内容溢出控制。

                     取值：

                     visible：不显示滚动条，超出部分可见；

                     hidden：不显示滚动条，超出对象的尺寸的内容将被裁剪；

                     scroll：始终显示滚动条；

                     auto：内容超出时，显示滚动条；

二、特殊效果

1、z-index:设置DIV的层叠顺序。用z-index属性时，position必需要指定为absolute才行。

2、cursor:设置DIV上光标的样式。

3、clip:设置剪辑矩形。clip:rect(top right bottom left);设置上下左右的距离,但此时要把position指定为absolute。

4、opacity 透明度 filter:alpha(opacity=value)  eg：filter:alpha(opacity=50);opacity:0.5;

在做一张表格时，其中有一个大块的输入区域，但是不准用<textarea>标签，所以用div并打开其contenteditable属性。

但是当输入到边框时，连续按两次回车键，边框就会向右移动。

经过多次检查，修改，发现将宽度设置为定值就能解决这个问题；