一、常用属性:
1、Height:设置DIV的高度。
. w, X* P9 E/ S6 s4 Y2、Width:设置DIV的宽度。
例:0 u/ E% n; h9 U7 s- |$ b. k2 c
- <div style="width:200px;height:200px;background-color:Black;"></div>
复制代码 3、margin:用于设置DIV的外延边距,也就是到父容器的距离。 例:点击查看效果:
9 r* W- F. d' g$ r1 s- <div style="background-color:Black;width:300px;height:300px;">0 m' l9 d4 H8 t- U& K; H
- <div style="margin:5px 10px 20px 30px;width:200px; height:200px;background-color:White;">
: A+ N! l) |! W8 R* p& G - </div>
$ E2 e9 Y1 u; ?2 d) {) ?9 t. M - </div>
复制代码 说明:margin:后面跟有四个距离分别为到父容器的上-右-下-左边的距离;可以看例子中的白色DIV到黑色DIV的边距离效果。还可以分别设置这四个边的距离,用到的属性如下:
4、margin-left:到父容器左边框的距离。, ? J# A! S- E
5、margin-right:到父容器右边框的距离。3 b# y% ^& |1 {* Z4 E# f9 L" h
6、margin-top: 到父容器上边框的距离。
) N# Z+ W4 r( e7、margin-bottom:到父容器下边框的距离。
在标准的浏览器中,box模型首先确定的是content的宽度和高度,而margin和padding不会影响content的宽度和高度——如果增加magin和padding尺寸后,content尺寸不变而总的box尺寸会增大。
1 g# Q) a, U) p" {% V' z6 ` |" B7 C# \0 L: G
在IE中却相反,增加margin和padding的尺寸,则会减小content的尺寸,而box尺寸不变。微软遵循的逻辑是现实世界的框架不变,填充变大,则里面的图片越小。 G2 L: b* m& e
0 \' z% d6 ^ nmargin叠加:
: L5 Y$ o. u6 r+ n这是一个难点(行内框、浮动框、绝对定位框margin不会叠加), 简单的描述概念就是:两个垂直的margin相遇,则会合并成一个margin,这个margin的高度是前两个高度值大的。
(1)、元素的顶边界与前面元素的底边界发生叠加