框模型 Box Model

1.框模型由外向内：
  margin，border，padding，content四层。
  过度约束：指框模型的宽度或高度属性都指定了非auto的值时，其中之一的计算值将和它的指定值不同。

2.包含块 Containing Block
   绝对定位的块级元素的包含块是由最近的position值不是static的祖先块级元素生成，或者元素的包含块是初始包含块。通常是body
   常规流向的元素的包含块的宽度，就是元素的父元素的内容框的宽度。

3.width：块级元素和可替换元素的内容框的宽度
   非替换行内元素的宽度是其内容经过浏览器解释后实际的宽度，而不能设置其width值。
   替换元素具有内在尺寸，它们的width属性是有效的。如img，根据层叠原理，css的width属性优先于html元素的width属性。
  width是百分比时，在css2中，百分比的基数是元素的包含块的宽度值。
  定义图片的高度时，如果未定义宽度，图片会等比例缩放。
  可以把非替换行内元素设置为display:block，它会自动充满父块元素的内容宽度。
  width的默认值是auto，非浮动的块级元素表现为，它的框宽度总是会填充满父元素的内容框，此时其它尺寸属性的值为0。即 self.width=父.width-self.marginLeft-self.marginRight;width为auto时，会尽量占据最大的宽度。
   块级元素才具有上下边距及width属性。

4.border
   边框颜色：{border-color:red red red red;}，以及border-top-color,相应地right,bottom,left。
   边框宽度：{border-width:1em 1em 1em 1em;}，以及border-top-width,相应地right,bottom,left。取值为：thin，medium，thick或数值,inherit。
   边框样式：boder-style:solid dotted dashed outset; 以及border-top-style,相应地right,bottom,left。取值：none,hidden,dotted,dashed,solid,double,groove,ridge,inset,outset, 
详见http://zh.html.net/tutorials/css/lesson11.php

  不同方向的边框缩写形式：
  {border-top:3px solid #E10001;} //顺序不做要求，并且可省略其中的值。
  {border:3px solid #E10001;} //border定义同时对4个边框起作用。
  {border:0;}   {border:none;} 取消边框的定义

  border:0和border:none区别：
  border:0把border设为0px，虽然在页面上看不见，但按border默认值理解，浏览器依然对border-width/border-color进行了渲染，即已经占用了内存值；
border:none把border设为"none"即没有，浏览器解析"none"时将不作出渲染动作，不会消耗内存值。建议使用border:none;
  同样的，display:none隐藏对象浏览器不作渲染，不占用内存，而visibility:hidden则会。


边框圆角的渲染：
border-radius: 30px; 可以为每个角设定不同的值. 请注意 Firfox 和 webkit 对圆角属性的不同命名方式.

  便于浏览器渲染圆角, 为 webkit 添加 "-webkit-", 为 Firefox 添加 "-moz-". 注意 Firfox 和 webkit 对圆角属性的不同命名方式.


构成 Box 阴影的参数序列与 text-shadow 属性相同: x-offset, y-offset, blur, and color.
-moz-box-shadow:
-2px -2px 0 #fff,
2px 2px 0 #bb9595,
2px 4px 15px rgba(0, 0, 0, .3);

5.padding 补白，填充，内边距，内补丁。
   padding不包含在width,height之内，
   padding区域会透出背景颜色
   padding的百分比值基数是包含块的宽度，padding的四个值都是，与包含块的高度无关。

   对于行内元素，padding不会影响到行高，行高不是元素的height值，设置了padding的span元素的垂直方向的背景色会在行框外显示。
   对于行内元素，边框到内容之间的距离不受行高line-height影响，要设置padding才行。

6.margin 边白，外边距，外补丁
   边框外的透明区域，显示出父元素的背景。
   垂直方向margin对非替换的行内元素无效。
   边距的百分比值的基数也是基于包含块的宽度。
   边距允许负值，补白不允许负值。
   横向的7个属性中，with,margin-left,margin-right值可以为auto，其余默认为0。
   当margin-left:auto，width,margin-right都不是auto时，self.marginLeft=父.width-self.width-self.marginRight;
   当margin-left,margin-right都为auto，width不是auto时，self.marginLeft=self.marginRight=(父.width-self.width)/2，这实现了水平居中。
   当margin-left:auto; width:auto; margin-right:10px;时，self.width=parent.width-10px，margin-left结果为0。
  
7.边距重叠：指边距合并，只发生在垂直方向。在常规流向中，相邻的块框垂直边距会发生重叠，结果是边距较大的那个值。
   边距重叠在元素与其后代元素间的出现，只限于元素本身没有文字内容、边框，及补白时。
   浮动元素、绝对定位元素、及行内元素(display:inline-block)与其它元素框的垂直边距不重叠。inline-block元素具有块级元素特性，同时可在一行内显示。
   元素的overflow属性值不为visible时，也不会重叠。overflow:auto 会产生滚动条；
   根元素与其后代元素的边距不重叠。

8.页面水平居中
   body padding-left:50%，元素A margin-left:负值宽度的一半，实现A在页面中水平居中。
   因为padding的百分比是基于包含块的宽度，所以这个方法实现不了垂直居中。
   页面水平，垂直居中
这里我们使用百分比绝对定位，与外补丁负值的方法，负值的大小为其自身宽度高度除以二
<div style="margin:auto;width:250px;height:250px;position:absolute;top:50%;left:50%;margin:-125px 0 0 -125px;">


9.height 
   百分比值的高度，以包含块的高度为基数计算。

10.块级元素生成一个主块框，block box，主块框或者只包含多个块框，或者只包含多个行内框 inline box。不会两者同时包含。当被包含元素有块框时，同级的被包含的行内框会被包含在一个匿名的块框或者插入框之内。

11.行内框 inline box
     display:inline， display:inline-table，display:run-in。
      块级元素生成块框，行内元素生成行内框。
     同匿名块框类似，当被包含元素有只有行内框时，同级的被包含的文字会被包含在一个匿名行内框中。

12.插入框 run-in box
     如果插入框包含块框，或者它后面是一个原始标准块框，它就是一个块框了；
     如果插入框不包含块框，且它之后是一个标准块框，则插入框变成后面的块框的第一个行内框。这种变化在相邻的插入框和块框间只能有一次。
     这里说的原始标准块框是指，它不是插入框，也不是和插入框融合过的块框。
     插入框的属性继承文档树中它的父元素，不是融合后的父元素。