块状元素DIV（盒模型）

块状元素DIV（盒模型）

首先设置一个DIV,如图所示:

<span style="font-size:18px;">div{
	width: 295px;
	height: 132px;
}</span>

块状元素div,以下称之为内容,如图可以看到 三个名词.pading(内边距),border(边框),margin(外边距)

下面就简单介绍一下它们的使用方法.

1.pading 内边距 有四个属性值

方法一:逐个设置(上右下左)

pading-top : 10px;
pading-right:10px;
pading-bottom: 10px;
pading-left: 10px;

方法二:

pading : 10px 10px 10px 10px; /*按照<span style="font-size:18px;">上右下左的顺序</span>*/

注意: pading的颜色和内容的颜色一样,但不会影响内容的大小.
2.border(边框)
border属性值有很多,如下图:

在这里以一个方向为例:

border-left : border-width | border-style | border-color

其中border-style 属性值如下:

none :　 默认值。无边框。不受任何指定的 border-width 值影响 

hidden :  隐藏边框。IE不支持 d

otted :　 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线 

dashed :　 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线 

solid :　 实线边框 

double :　 双线边框。两条单线与其间隔的和等于指定的 

border-width 值 

groove :　 根据 border-color 的值画3D凹槽 

ridge :　 根据 border-color 的值画3D凸槽 

inset :　 根据 border-color 的值画3D凹边 

outset :　 根据 border-color 的值画3D凸边 

对边框的距离也可以集中控制:

border: 10px solid pink; /*四条边属性相同*/

3.margin（外边距）

margin-top :10px;
margin-right:10px;
margin-bottom:10px;
margin-left:auto; 

注意:
1) margin : 0px  auto; (没写的取对边的值) 

//居中 （思考 竖直方向用auto是什么效果? 最好把所有div放到一个container，整体居中）

2) margin的重叠现象

a) 兄弟情况

                          

                              

                                                            

注意：上下相邻普通元素（比如float的就是50px+50px）margin取最大的边距值

b）父子DIV情况

                  

                                       

margin取最大的边距值