CSS盒模型

CSS中有两种盒子，一种是w3c盒子（也叫标准盒子或者内容盒子）

1.w3c盒子(标准盒子)

使用box-sizing:content-box 取值得到默认盒子模型

width和height分别表示内容区的宽和高

盒子的宽

width+paddingLeft+paddingRight+borderLeft+borderRight

盒子的高

height+paddingTop+paddingBottom+borderTop+borderBottom

所占屏幕空间的宽

width+paddingLeft+paddingRight+borderLeft+borderRight +marginLeft+marginRight

所占屏幕空间的高

特点：为其设置width属性时，内容区的宽度不变，当padding和border变大时，内容宽度不变，但盒子总体宽度变大

2.边框盒子（怪异盒子/ie盒子）

用box-sizing:border-box取值得到边框盒子

内容区的宽

width-paddingLeft-paddingRight-borderLeft-borderRight

内容区的高

height-paddingTop-paddingBottom-borderTop-borderBottom

盒子的宽

width

盒子的高

height

所占屏幕空间的宽

width+marginLeft+marginRight

所占屏幕空间的高

height+marginTop+marginBottom

特点：为盒子指定width属性时，width包含了border和padding的宽度，border不变，padding变大，内容变小

3.盒子背景样式

background-color:设置颜色

background-image:背景图片 url()指向图片地址

background-repeat:背景图片平铺方式

background-position:水平方向  垂直方向

缩写格式：

background:背景颜色 背景图片 平铺方式 关联方式 定位方式

即background:#fff url() 0 0 no-repeat