CSS框模型是网络设计中的一个基本概念，并描述了在网页上显示和构造元素的方式。它由四层组成：内容，填充，边界和边缘。每一层都增加了元素的整体尺寸和外观。

1. 内容：此层代表元素的实际内容，例如文本，图像或其他HTML元素。它具有由宽度和高度属性定义的尺寸。

2. 填充：填充是内容和元素边框之间的空间。它在内容和边框之间提供缓冲区。可以使用填充属性设置填充物，并且通常用于在元素内创建间距。

3. 边界：边框是围绕元件填充和内容的线。它可以用各种属性（例如颜色，样式和宽度）进行样式。边框属性用于定义边界的外观。

4. 边距：边距是元素外部的空间，将其与页面上的其他元素分开。它在元素之间创建差距或空间。可以使用保证金属性设置保证金。

当您设置元素的尺寸（宽度和高度）时，元素的总大小将包括内容，填充和边框。保证金是元素总尺寸之外的额外空间。

例如，假设您的<div>元素具有以下CSS属性：

div {
  width: 200px;
  height: 100px;
  padding: 10px;
  border: 1px solid black;
  margin: 20px;
}

在这种情况下，<div>元素的总大小为：

• 内容：100px（高度）的200px（宽度）
• 填充：20px（顶部和底部） + 20px（左右）
• 边界：1px（顶部，底部，左和右）
• 保证金：20px（顶部和底部） + 20px（左右）

因此，该元素的总尺寸（包括内容，填充，边框和边缘）为282px（宽度），比182px（高度）。

了解框模型对于网页上的元素的适当布局和间距至关重要。它使您可以有效地控制元素的大小，间距和定位。

关于作者。 Geoffrey Callaghan是Fabform.io的程序员，在form backend团队中工作。