CSS 盒子模型 (Box Model)

所有 HTML 元素可以看作盒子，在 CSS 中，"box model"这一术语是用来设计和布局时使用。

CSS 盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充和实际内容。

盒模型允许在其他元素和周围元素边框之间的空间放置元素。

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

完整大小的元素，除了设置内容区域的宽度和高度之外，还需要添加内边距、边框和外边距。

下方例子中的元素总宽度为 450px：

div {
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}

计算宽度：300px(宽)+50px(左+右填充)+50px(左+右边框)+50px(左+右边距)=450px