盒子模型

1、盒子模型的平面结构：

这就是每个网页的基本盒子模型：从内到外元素组成：

1、外边距：margin  2、盒子边框：border  

3、盒子内边距：padding  4、盒子内容：content

其中margin、border、padding分别有四个方向属性：top、right、bottom、left;

其中的border存在三个属性，常用简写：border{1px solid red}

border属性：

div{

border-width:2px;

border-style:solid;

border-color:red;

}

padding顺序写入一、二、三、四个值的含义：（margin与之类似）

padding:10px;                           四个内边距都是10px

padding:5px 10px;                  上下5px 左右10px

padding:5px 10px 15px;             上5px 右10px 下15px   左因为缺省与右相等，则为10px

padding:5px 10px 15px 20px;     上5px 右10px 下15px  左20px

2、盒子模型的3D立体结构：

盒子模型从上到下显示为5层：

1、边框：border

2、内容和内边距：content+padding

3、背景图片：background-image

4、背景色：background-color

5、外边距：margin

这样就很容易理解

background: url(../images/logo.gif)

img(src(../images/logo.gif))

背景图片与插入图片层次为背景图片在下了。