关于CSS中的盒子模型

盒子模型：

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

内容区 + padding + border + margin

• box-sizing:

1. content-box 内容盒子/w3c盒子（默认）

    	width	内容区宽度
    	height	内容区高度
    	
    	盒子的宽度 = width + border-left + border-right + padding-left + padding-right
    	盒子在浏览器中的宽度 = width + border-left + border-right + padding-left + padding-right + magin-left + magin-right
    	盒子的高度 = height + border-top + border-bottom + padding-top + padding-bottom 			盒子在浏览器中的高度 = height + border-top + border-bottom + padding-top + padding-bottom + magin-top + magin-bottom
   

2. border-box 边框盒子/IE盒子

    	width	盒子的宽度
   	height	盒子的高度
   	
   	内容区的宽 = width - border-left - border-right - padding-left - padding-right
   	盒子在浏览器中的宽 = width + magin-left + magin-right
   	
   	内容区的高 = height - border-top - border-bottom - padding-top - padding-bottom
   	盒子在浏览器中的高 = height + magin-top + magin-bottom
   

3. 盒子背景

	background-color: 背景颜色
	
	background-image: 背景图片
	
	background-origin: 背景的起始位置
			content-box		从内容区开始
			border-box		从边框开始
			padding-box		从padding区开始

background-clip: 背景的裁剪
		content-box		剪去除了内容区外的背景
		border-box		剪去除了边框区外的背景
		padding-box		剪去除了padding区外的背景

background-repeat: 背景平铺
		no-repeat	不平铺
		repeat-x	x轴方向平铺
		repeat-y	y轴方向平铺

background-size: 
		绝对值
		百分比
		cover		以容器的最大边为准，等比例扩展图片
		contain		以容器的最小边为准，等比例扩展图片

background-attachment: 背景图片的固定
		fixed

background-position: x  y;
		搭配精灵图（将多张图片放在同一张图片上，提高效率）使用