CSS3——盒子模型 border(边框) 轮廓(outline)属性 margin外边距 padding填充

包括——边距，边框，填充，和实际内容

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

当指定一个CSS元素的宽度和高度属性时，只是设置内容区域的宽度和高度。要知道，完全大小的元素，还必须添加填充，边框和边距

下面的例子中的元素的总宽度为300px：

div {
　　 background-color: lightgrey;
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}

共450px

<style>
div.ex
{
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}
</style>
</head>

<body>

<img src="250x250px.gif" width="250" height="250" />

<div class="ex">上面的图片是250 px宽。
这个元素的总宽度也是250 px。</div>

</body>