一、常用属性:
1、Height:设置DIV的高度。$ Z$ L$ q& O- ^# O `% F* ]
2、Width:设置DIV的宽度。
例:
7 w& a( c, Q9 |1 R, I# w: O- <div style="width:200px;height:200px;background-color:Black;"></div>
复制代码 3、margin:用于设置DIV的外延边距,也就是到父容器的距离。 例:点击查看效果:" H' J3 }) R) L: J) B
- <div style="background-color:Black;width:300px;height:300px;">+ D# y8 {+ G6 A( s/ |9 Z
- <div style="margin:5px 10px 20px 30px;width:200px; height:200px;background-color:White;">; x! P5 @# W6 b7 c
- </div> 3 c3 k7 B# ]- ?, U0 q+ J6 w
- </div>
复制代码 说明:margin:后面跟有四个距离分别为到父容器的上-右-下-左边的距离;可以看例子中的白色DIV到黑色DIV的边距离效果。还可以分别设置这四个边的距离,用到的属性如下:
4、margin-left:到父容器左边框的距离。7 r8 T }0 i5 i$ }: q' I
5、margin-right:到父容器右边框的距离。; m* e+ U2 }+ _: i
6、margin-top: 到父容器上边框的距离。
9 _& |0 r1 ^/ {. P5 G7、margin-bottom:到父容器下边框的距离。
在标准的浏览器中,box模型首先确定的是content的宽度和高度,而margin和padding不会影响content的宽度和高度——如果增加magin和padding尺寸后,content尺寸不变而总的box尺寸会增大。- T# e2 r/ \& P. X. \- g% ?
3 X# L) H. K$ F2 f. R/ u+ {
在IE中却相反,增加margin和padding的尺寸,则会减小content的尺寸,而box尺寸不变。微软遵循的逻辑是现实世界的框架不变,填充变大,则里面的图片越小。! a( d6 q( s& r) [
7 O, r- b! K, s
margin叠加:
; g4 V# D& r! Z$ l j这是一个难点(行内框、浮动框、绝对定位框margin不会叠加), 简单的描述概念就是:两个垂直的margin相遇,则会合并成一个margin,这个margin的高度是前两个高度值大的。
(1)、元素的顶边界与前面元素的底边界发生叠加