框模型 Box Model
1.框模型由外向内：
margin，border，padding，content四层。
过度约束：指框模型的宽度或高度属性都指定了非auto的值时，其中之一的计算值将和它的指定值不同。
2.包含块ContainingBlock
绝对定位的块级元素的包含块是由最近的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:redredredred;}，以及border-top-color,相应地right,bottom,left。
边框宽度：{border-width:1em1em1em1em;}，以及border-top-width,相应地right,bottom,left。取值为：thin，medium，thick或数值,inherit。
边框样式：boder-style:soliddotteddashedoutset;以及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:3pxsolid#E10001;}//顺序不做要求，并且可省略其中的值。
{border:3pxsolid#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,andcolor.
-moz-box-shadow:
-2px-2px0#fff,
2px2px0#bb9595,
2px4px15pxrgba(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.页面水平居中
bodypadding-left:50%，元素Amargin-left:负值宽度的一半，实现A在页面中水平居中。
因为padding的百分比是基于包含块的宽度，所以这个方法实现不了垂直居中。
页面水平，垂直居中
这里我们使用百分比绝对定位，与外补丁负值的方法，负值的大小为其自身宽度高度除以二
<divstyle="margin:auto;width:250px;height:250px;position:absolute;top:50%;left:50%;margin:-125px00-125px;">
9.height
百分比值的高度，以包含块的高度为基数计算。
10.块级元素生成一个主块框，blockbox，主块框或者只包含多个块框，或者只包含多个行内框inlinebox。不会两者同时包含。当被包含元素有块框时，同级的被包含的行内框会被包含在一个匿名的块框或者插入框之内。
11.行内框inlinebox
display:inline，display:inline-table，display:run-in。
块级元素生成块框，行内元素生成行内框。
同匿名块框类似，当被包含元素有只有行内框时，同级的被包含的文字会被包含在一个匿名行内框中。
12.插入框run-inbox
如果插入框包含块框，或者它后面是一个原始标准块框，它就是一个块框了；
如果插入框不包含块框，且它之后是一个标准块框，则插入框变成后面的块框的第一个行内框。这种变化在相邻的插入框和块框间只能有一次。
这里说的原始标准块框是指，它不是插入框，也不是和插入框融合过的块框。
插入框的属性继承文档树中它的父元素，不是融合后的父元素。