●这时，如果两个盒子都有边框，我们通常考虑两个盒子边框之间的距离

●此时，两个盒子边框之间的距离等于：

⏹外面盒子的填充值＋里面盒子的margin值

⏹其中子块的margin将以父块的内容为参考，

⏹如下图所示：

子元素的实际宽度超过父height的不同处理方式

●当子元素的实际高度超出父元素的height的时候，IE与Firefox处理方式是不同的。

●IE：

⏹自动扩大父元素的高度，以容纳子元素

●Firefox：

⏹不扩充，因此，会子元素会溢出到父元素之外

●示例：

子元素的实际宽度超过父height的不同处理方式

●图例：

margin的特殊用法：

取负值

●margin可取负值

●上面提及margin的时候，它的值都是正数。

其实margin的值也可以设置为负数。

●当margin取负值的时候，可以产生意向不到的排版效果，而且有关的巧妙运用方法也非常多，在后续章节中都会陆续介绍。

●这里先分析margin设为负数时产生的排版效果。

margin取负值的排版效果

●当margin设为负数时，会使被设为负数的元素向相反的方向移动，甚至覆盖在另外的元素上。

●示例

●效果图如下所示

盒子模型的特性

●边界值margin可为负，填充padding不可为负

●边框border默认值为0，即不显示

●行内元素，如a，定义上下边界不影响行高

对盒子模型的思考

●边框是实的，我们可以看到实实在在的边框，而填充和边界都是虚的，我们只能看到他们对元素的影响

●盒子模型中只能设置两类颜色，即边框颜色和背景颜色

●盒子模型可设置三类距离，即边界距离margin，填充距离padding和边框值border

属性值的简写形式 

●方法是按照规定的顺序，给出2个、3个或者4个属性值，它们的含义将有所区别，具体含义如下：

如果给出2个属性值，前者表示上下边框的属性，后者表示左右边框的属性；

如果给出3个属性值，前者表示上边框的属性，中间的数值表示左右边框的属性，后者表示下边框的属性；

如果给出4个属性值，依次表示上、右、下、左边框的属性，即顺时针排序。

各种元素盒子属性的默认值

●大部分html元素的盒子属性（margin,padding）默认值都为0；

●有少数html元素的（margin,padding）浏览器默认值不为0，例如：

body，p，ul，li，form标记等，因此我们有时有必要先设置它们的这些属性为0。

●Input元素的边框属性默认不为0，我们可以设置为0达到美化表单中输入框和按钮的目的。

盒子的定位

盒子的三种定位形式

●在标准流下的定位

●在浮动属性下的定位

●在定位属性下的定位

●除非设置浮动属性或定位属性，否则所有盒子都是在标准流中定位。

顾名思义，标准流中元素盒子的位置由元素在HTML中的位置决定。

标准流

●HTML元素在标准状况下的定位方式

●行内元素在同一行内横向排列

●块级元素占满整个一行，在页面中竖向排列

●元素不会移动到其它地方去，对于嵌套的元素盒子也是嵌套的关系

标准流下的盒子排列分析

*{

border:

2pxdashed#FF0066;

padding:

10px;

margin:

2px;

}

行内元素1行内2

行内3

行内元素的盒子

●行内元素的盒子永远只能在浏览器中得到一行高度的空间（行高由line-height属性决定，如果没设置该属性，则是内容的默认高度），如果给它设置上下border，margin，padding等值，导致其盒子的高度超过行高，那么它的盒子上下部分将和其他元素的盒子重叠。

●因此，不推荐对行内元素直接设置盒子属性，一般先设置行内元素以块级元素显示，再设置它的盒子属性。

改变行内元素的高度

●如图所示，当增加行内元素的边界和填充时，行内元素a占据浏览器的高度并没有增加，下面这个div块仍然在原来的位置，导致行内元素盒子的上下部分重叠，而左右部分不会受影响

display属性

●通过display属性可控制元素是以行内元素显示还是以块级元素显示，或不显示

●display:

block|inline|none|list-item

block元素

●block元素的特点是：

总是在新行上开始；

高度，行高以及顶和底边距都可控制；

宽度缺省是它的容器的100%，除非用width设定一个宽度