盒子模型

盒子属性

1.width、height内容区宽高
2.padding内间距
3.border边框
4.margin外边距

两种盒子模型

1.W3C盒子模型（默认盒子模型）

	内容区	盒子	所占屏幕
宽	width	width+padding+border	width+padding+border+margin
高	height	height+padding+border	height+padding+border+margin

2.IE盒子模型（边框盒子模型）

	内容区	盒子	所占屏幕
宽	width-padding-border	width	width+margin
高	height-padding-border	height	height+margin

3.box-sizing可以改变盒子模型
取值为content-box的是默认盒子模型也就是W3C盒子模型
取值为border-box的是IE盒子模型

盒子背景样式

1.background—repeat设置背景图像的重复方式

取值	意义
repeat	尽可能多的重复
repeat-x	x方向平铺一行
repeat-y	y方向平铺一行
no-repeat	不重复

2.backgruond-size设置背景大小

取值	意义
cover	背景铺满整个屏幕，可能导致图片显示不全，但是图片比例不变
contain	不重复的情况下可能导致容器有一部分没有背景，但是图片比例不变
百分比	图片显示全，占满容器，但是比例会失调
绝对值

3.background-position背景图像初始位置，

取值	举例
关键字	center、left、right
坐标	（100px，100px）（-100px，20px）（-10px，-70px）

可以实现图片精灵技术(CSS sprites）
实例网址http://120.26.177.210/%E5%A4%A7%E8%AF%9D%E8%A5%BF%E6%B8%B8/%E5%A4%A7%E8%AF%9D%E8%A5%BF%E6%B8%B8.html

4.background-attachment背景图像的固定点

取值	意义
scroll	默认值 ，背景图片与元素内容绑定 背景图片随着页面的滚动而滚动
fixed	背景图片与视口区绑定 背景图片不随着页面的滚动而滚动

5.background-clip设置背景的覆盖范围（图片裁切）

取值	意义
border-box	默认值 ，背景位于边框以内
padding-box	背景位于内边距以内
content-box	背景位于内容区

类似的还有background-origin

取值	意义
border-box	背景从边框的外边缘开始绘制
padding-box	默认值，背景图片从内边距的外边缘开始绘制
content-box	背景图片绘制在内容区