关于CSS3盒子模型

                                 1-1

 1.width & height

        内容区的宽高，显示内容。

 2.padding

        内容区外边界与外边框内边界距离。

3.border

        边框宽度。

4.margin

        盒子外的宽度。

W3C盒子（默认盒子、内容盒子、content-box）

                                                                 视图等同于1-1

盒子的宽 width+paddingLeft+paddingRight+borderLeft+borderRight

盒子的高 height+paddingTop+paddingBottom+borderTop+borderBottom 

所占屏幕空间的宽 width+paddingLeft+paddingRight+borderLeft+borderRight +marginLeft+marginRight

所占屏幕空间的高 height+paddingTop+paddingBottom+borderTop+borderBottom +marginTop+marginBottom  

比较简单，基础加法

IE盒子

IE6之前 border-box
IE6之后 content-box

内容区的宽：width = width + padding-left + padding-right + border-left + border-right

内容区的高：height-paddingTop-paddingBottom-borderTop-borderBottom

盒子的宽 width

盒子的高 height

所占屏幕空间的宽 width+marginLeft+marginRight

所占屏幕空间的高 height+marginTop+marginBottom

        

盒子背景样式

background-color              设置颜色

background-image            设置背景图片

background-size               设置背景大小

background-repeat            设置背景图片重复方式

        repeat-x  x方向平铺  repeat-y y方向平铺  no-repeat  不重复

background-origin              设置背景的起始点

background-clip                 设定背景的覆盖范围

background-attachment     设置背景图片的固定点

background-position           设置为背景图像初始位置，可以实现图片精灵

background                        背景设置的速记写法

margin：

1、如果margin只有一个值，表示上右下左的margin同为这个值。例如：margin:10px; 就等于 margin:10px 10px 10px 10px;

2、如果 margin 只有两个值，第一个值表示上下margin值，第二个值为左右margin的值。例如：margin:10px 20px; 就等于 margin:10px 20px 10px 20px;

3、如果margin有三个值，第一个值表示上margin值，第二个值表示左右margin的值，第三个值表示下margin的值。例如：margin:10px 20px 30px; 就等于 margin:10px 20px 30px 20px;

4、如果margin有四个值，那这四个值分别对应上右下左这四个margin值。例如：margin:10px 20px 30px 40px;