深入理解盒模型

前面的话

　　所有文档元素都生成一个矩形框，这称为元素框(element box)，它描述了一个元素在文档布局中所占的空间大小。而且，每个框影响着其他元素框的位置和大小

宽高

　　在CSS中，可以对任何块级元素设置显式高度。如果指定高度大于显示内容所需高度，多余的高度会产生一个视觉效果，就好像有额外的内边距一样；如果指定高度小于显示内容所需高度，则会向元素添加一个滚动条。如果元素内容的高度大于元素框的高度，浏览器的具体行为取决于overflow属性

　　宽度 width被定义为从左内边界到右内边界的距离

　　高度 height被定义为从上内边界到下内边界的距离

　　[注意]宽度和高度无法应用到行内非替换元素，且不能为负

width/height

　　值:<length> | <percentage> | auto | inherit

　　初始值: auto

　　应用于: 块级元素和替换元素

　　继承性: 无

　　百分数: 相对于包含块的width/height

　　计算值: 对于auto和百分数值，根据指定确定；否则是一个绝对长度，除非元素不能应用该属性(此时为auto)

<怪异盒模型>

　　IE6-浏览器的宽高定义的是可见元素框的尺寸，而不是元素框的内容区尺寸

内边距

　　对于行内元素，左内边距应用到元素的开始处，右内边距应用到元素的结尾处，上下内边距不影响行高

　　[注意]内边距不能是负值

padding

　　值:[<length> | <percentage>]{1,4} | inherit

　　初始值: 未定义

　　应用于: 所有元素

　　继承性: 无

　　百分数: 相对于包含块的width

外边距

　　设置外边距margin会在元素外创建额外的空白，空白通常指不能放其他元素的区域，而且在这个区域中可以看到父元素的背景

　　外边距可以应用到行内元素，上下外边距对行高没有任何影响。由于上下外边距实际上是透明的，所以这个声明没有任何视觉效果。左外边距应用到元素开始处；右外边距应用到元素结束处

margin

　　值:[<length> | <percentage> | auto]{1,4} | inherit

　　初始值: 未定义

　　应用于: 所有元素

　　继承性: 无

　　百分数: 相对于包含块的width

<四值顺序>

【1个值】margin: top|right|bottom|left;
【2个值】margin: top|bottom left|right;
【3个值】margin: top left|right bottom;
【4个值】margin: top right bottom left;

合并垂直外边距

　　相邻的兄弟级元素外边距合并又称为外边距叠加

　　包含的父子级元素外边距合并又称为外边距传递

　　在包含块上设置边框或内边距时，会使其子元素的外边距包含在包含块内，会阻止外边距传递

负外边距

　　如果垂直外边距都设置为负值，浏览器会选取两个外边距的绝对值的最大值。如果一个正外边距与一个负外边距合并，会从正外边距减去这个负外边距的绝对值

边框

　　元素外边距内就是元素的边框border，元素的边框是围绕元素内容的内边距的一条或多条线。边框由粗线、样式和颜色三部分组成

　　对于行内元素来说，边框实际上画在各行之外的下一个像素上，由于各行紧挨着，所以其边框会重叠。无论为行内元素的边框设置怎样的宽度，不会对行高有任何影响；但左右边框会分别显示在元素的开始处和结尾处

　　关于边框的详细信息移步至此

div{
    width: 200px;
    border: 1px solid red;
}    
span{
    border: 1px solid black;
    background-color: yellow;
    padding: 6px;    
    margin: 6px;
    font-size: 30px;
    line-height: 50px;
}

<div><span>测试文字测试文字测试文字</span></div>

深入理解盒模型

原文：http://www.cnblogs.com/xiaohuochai/p/5202597.html