border:10px dotted grey;
background:red;
}
这里，.test1没有设置position属性，即为默认的position:static。其中，html代码为：<div class=”test1”>静态定位或相对定位</div>。结果为：
图3
即块的宽度是延伸自动填充满它的父元素的宽度区域。
但是浮动元素和绝对定位元素，它们的结果却恰恰相反，他们会收缩以致包裹紧贴内容。假设刚才例子的.test1改写为：
复制代码
.test1{
height:200px;
padding:20px;
margin:30px;
border:10px dotted grey;
background:red;
position:absolute;
}
html不变，那么结果为：
图4
在图1和图2中，我们清楚地看到在计算元素所需区域大小的例子中外边距已经在计算中包括在内了。但事实上，纵向的无定位元素的相邻外边距会叠加合成为其中一个较大宽度的外边距的值，并非两者之和。这就意味着当计算实际上需要存放一个元素的区域大小时，并不是从外边距的边缘开始算起，只有最宽的外边距会生效，并且较窄的外边距会与较大的叠加在一起。如下图所示：
图5
另外，当一个元素的宽度被设置为100%时（也就是说父元素的内容宽度时100%），它不应该有任何的外边距，内边距，或者是边框，这只会使它放置的区域需要更大的面积。这通常会被设计师们所忽略并且很严重的扰乱了页面的布局，这样的话内容要么溢出要么使元素比他们应该的样式更宽。举一例子：
复制代码
.box{
background:red;
height:200px;
width:100%;
}
.contain{
background:yellow;
height:220px;
width:300px;
}
而html的代码为：<div class=”contain”><div class=”box”></div></div>。结果如图：
也就是说在没有margin和padding的情况下，100%的内容能恰到好处地填充父元素。现在假设将.box的样式改为：
复制代码
.box{
background:red;
height:200px;
width:100%;
padding:10px;
margin:10px;
}
其余保持不变，则结果为：
此时，元素出现了错位，只是出现了左侧的margin。解决办法就是在大多数情况下，避免给宽度属性添加具体的值，并且只应用外边距，内边距和边框。
