今天完成的事情：温顾了盒模型，并和大家分享了一波
 明天计划的事情：继续项目代码的编写与调试

 遇到的问题：

                   盒模型(box model)

     在我们生活中想到段落或者标题的时候，会联想到词语和句子，看到<img>标签时会想到图片。

     但是在浏览器上面的话，会把我们在页面中用到的或者没用到的标签都堪称一个个装有东西的盒子；

内容(content)

内边距(padding)

边框(border)

外边距(margin)

内容(content)

 这一领域涉及元素的实际内容、 文本、 背景、 图片等等。它结束于内容区域的边缘。

内边距(padding)

      内边距延伸到内边距边缘。在内容区域的任何内容(例如背景或图像)将延伸到内边距。内容区域和内边距边缘之间的大小填充由padding属性控制.

四个位置是：上 右 下 左  top, right,bottom,left。

边框(border)

边框延伸到边框边缘。默认情况下，背景扩大到边框的下方。边框厚度由border 属性控制。

外边距(margin)

  外边距延伸到外边距的边缘。然而，它是分隔元素及其邻近元素的"空"区域。通过margin属性控制外边距的大小。

Ps:注意margin collapsing(外边距叠加);而所谓外边距叠加当相邻块元素的外边距结合为单一的外边距时，就会取两者之间较大的值。

     Css3种基本定位机制：普通流，浮动和绝对定位。

只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

margin 设置为负值，可以去除两个盒子之间存在的间隔,使其无缝隙。

Css3 特性之  box-sizing:content-box|border-box|inherit;

盒模型有很多种，但最为人所知的是 第一种是W3C的标准模型，另一种是IE的传统模型。

Content-box  即为W3c标准模型;

Border-box   即为IE的传统模型。

Inherit  则是  继承  咯

两种模式之间的相同之处都是对元素计算尺寸的模型，具体说就是对元素的width,height,padding,border以及元素实际尺寸的计算关系。

不同之处：两者之间的计算方式不同 

ps:实例为同样设置宽高为200px的盒子

1、W3C的标准Box Model:

  /*外盒尺寸计算（元素空间尺寸）*/

  Element空间高度 = content height + padding + border + margin

  Element 空间宽度 = content width + padding + border + margin

  /*内盒尺寸计算（元素大小）*/

  Element Height = content height + padding + border （Height为内容高度）

  Element Width = content width + padding + border （Width为内容宽度）

2、IE传统下Box Model（IE6以下，不含IE6版本或“QuirksMode（奇异模式）下IE5.5+”）:

  /*外盒尺寸计算（元素空间尺寸）*/

  Element空间高度 = content Height + margin (Height包含了元素内容宽度，边框宽度，内距宽度)

  Element空间宽度 = content Width + margin (Width包含了元素内容宽度、边框宽度、内距宽度)

  /*内盒尺寸计算（元素大小）*/

  Element Height = content Height(Height包含了元素内容宽度，边框宽度，内距宽度)

  Element Width = content Width(Width包含了元素内容宽度、边框宽度、内距宽度)

设置 定宽，定高之后的溢出问题：

可使用overflow 来解决溢出问题

可能的值

  收获：