吃完午饭，来写一篇比较简单的文章吧，消化一下吧。

一、 什么叫盒子模型

盒子模型这个名词来自英文里面的Box modelmodel。怎么理解盒子模型呢？我认为凡是里面可以盛装其他内容的标签，我们都可以称之为盒子。例如：div,p,span等等标签都可以往里面再添加元素，我们都可以称之为盒子模型，相反例如img，input等等 里面是无法盛装其他元素，我们就能称之为盒子。

关于盒子，主要有以下几个要点：

• width/height：内容的宽高
• padding：内边距
• border：边框
• margin：外边框

二、 现在存在的盒子模型标准

由于历史和技术遗留原因，现在存在的盒子模型主要有两种：

2.1、 标准盒子模型

2.2、 IE盒子模型：

由上图我们可以清楚的发现，ie盒子和标准盒子之间的区别，整理如下：

• 在 标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
• IE盒子模型中，width 和 height 指的是内容区域+边框+内边距的宽度和高度。

其实这一点Android就好多了，一家独大，标准就一套。

三、 不同盒子模型的转化

ie盒子和标准盒子设计出来肯定有其设计出来的意义，众所周知，现代浏览器普遍使用的都是标准盒子，但是作为一个Android开发工程师，我很多情况下 还是会认同ie盒子的一些标准，那么是否在开发中一定要用标准盒子呢？首先来看下面一段代码：

	<div class="parent">
		<div class="son"></div>
		<div class="son2"></div>
	</div>
// css
		.son {
			width: 100px;
			height: 100px;
			padding: 10px;
			margin: 10px;
			border: 5px solid blue;
			background-color: red;
			box-sizing: content-box;
		}
		.son2 {
			width: 100px;
			height: 100px;
			padding: 10px;
			margin: 10px;
			border: 5px solid red;
			background-color: blue;
			box-sizing: border-box;
		}
复制代码

效果如下：

box-sizing : content-box|border-box|inherit;

• **content-box ：**默认值，可以使设置的宽度和高度值应用到元素的内容框。盒子的width只包含内容。

即总宽度=margin+border+padding+width

• **border-box ：**设置的width值其实是除margin外的border+padding+element的总宽度。盒子的width包含border+padding+内容，即ie盒子

• inherit： 规定应从父元素继承 box-sizing 属性的值

四、 最后来谈谈我在实际开发中遇到的有关盒子的问题

4.1、 盒子内的第一个子元素和最后一个子元素的margin会印象父盒子的位置

首先我们在开发的时候经常会遇到这样的情况，来看下面一段代码：

// css
		.son {
			margin-top: 100px;
			width: 100px;
			height: 100px;
			background-color: red;
		}
// html
	<div class="parent">
		<div class="son"></div>
	</div>
复制代码