盒子模型

1. 什么是盒子模型呢?
   1. 盒子的概念:
   • 我们可以把页面中每一个标签都看做是一个盒子,通过盒子的视角更方便的进行布局
   • 浏览器其实在渲染网页时,会将网页中的元素看做是一个个矩形的区域,我们也可以形象的称之为盒子
   2. 盒子模型
      • css中规定每个盒子分别由 内容区域(content),内边距区域(padding),边框区域(border),外边距区域(margin)构成,这就是盒子模型
2. 盒子模型由几个部分组成?分别是什么?
   1. 内容区域(content)
   2. 内边距区域(padding)
   3. 边框区域(border)
   4. 外边距区域(margin)
3. 标准盒模型和CSS3盒模型的区别是什么?

	计算宽度和高度的不同
	标准盒子模型:盒子总宽度/高度 = width /height + padding + border +margin;既 width /height 只是内容的宽度和高度,不包含padding,border.
 CSS3 盒模型: 盒子总宽度/ 高度 = width /height  = 内容区的宽度/高度+padding +border;既 width / height 内容的宽度就是盒子的宽度和高度,包含padding和border.

以上可能对于新手会比较绕,以下是简化版
	IE盒模型的width/height = content + border + padding
	标准盒模型的width/height = content

外边距折叠现象

1. 外边距正常情况
   • 场景: 水平布局的盒子,左右的margin正常,互不影响
   • 结果:最终两者距离为左右的margin的和
2. 外边距折叠现象
   • 场景:垂直布局的块级元素,上下的margin会合并
   • 结果:最终两者距离为margin的最大值
   • 解决方法: 尽量避免
     • 只给其中一个盒子设置margin就好
3. 外边距塌陷现象
   1. 场景:互相嵌套的块级元素,子元素的margin-top会作用于父元素上
   2. 结果: 导致父元素一直往下移动
   3. 解决方法:
      1. 给父元素设置border-top 或者 padding-top (这样可以分隔父子元素的margin-top)
      2. 给父元素设置overflow:hidden
      3. 转换成行内块元素
      4. 设置浮动 有不足的地方希望各位打来指出来.