CSS 盒模型详解：内容区域、内边距、边框和外边距 | 网站开发教程

盒模型是 CSS 中用来定义元素大小、边距和边框的一种模型。一个元素可以被看作一个矩形的盒子，包括四个部分：内容区域、内边距、边框和外边距。

• 内容区域（Content）：盒子中用来显示实际内容的区域，比如文本、图片等。
• 内边距（Padding）：内容区域与边框之间的空白区域。可以使用 padding 属性来设置。
• 边框（Border）：包围内容区域和内边距的线条。可以使用 border 属性来设置。
• 外边距（Margin）：边框与相邻元素之间的空白区域。可以使用 margin 属性来设置。

盒模型中的这些部分可以使用 CSS 的属性来进行控制和调整，从而实现元素的大小和布局。例如，可以使用 width 和 height 属性来设置元素的宽度和高度，使用 padding 属性来设置内边距的大小，使用 border 属性来设置边框的样式和宽度，使用 margin 属性来设置外边距的大小。

盒模型的一个重要特性是盒子的实际宽度和高度由内容区域、内边距和边框的大小决定，而不包括外边距。这意味着设置一个元素的宽度为 100px，实际显示的宽度可能会比 100px 更大，因为还需要考虑内边距和边框的大小。

在 CSS 中，盒模型有两种不同的标准：标准盒模型和 IE 盒模型。标准盒模型将元素的宽度和高度定义为内容区域的大小，而 IE 盒模型将宽度和高度定义为内容区域、内边距和边框的总和。可以使用 CSS 的 box-sizing 属性来指定使用哪种盒模型，默认值是 content-box（标准盒模型），还可以设置为 border-box（IE 盒模型）。