CSS | 箱型

介绍

CSS 箱型模型是 CSS 中最基本的概念之一，它决定了 HTML 元素在页面上的排版和尺寸。箱型模型包含了四个部分：内边距(padding)、边框(border)、外边距(margin)和内容区域(content)。

内容区域

内容区域是元素中显示文本和图像的部分。它的尺寸由元素的宽度(width)和高度(height)属性决定。在 CSS 中，我们可以使用 width 和 height 属性来设置内容区域的大小，例如：

div {
  width: 200px;
  height: 100px;
}

这会将 div 元素的内容区域设为宽度 200 像素，高度 100 像素。

内边距

内边距是内容区域和边框之间的空白区域。它可以用来控制元素的填充(padding)，例如在 div 元素中设置内边距为 20 像素：

div {
  padding: 20px;
}

这会在 div 元素的内容区域周围创建一个宽度为 20 像素的空白区域。

边框

边框是包围元素的线条。它可以用来控制元素的外观和装饰效果。在 CSS 中，我们可以使用 border 属性来设置边框的样式、宽度和颜色，例如：

div {
  border: 2px solid black;
}

这会在 div 元素的内容区域周围创建一条宽度为 2 像素、颜色为黑色的实线边框。

外边距

外边距是元素与其他元素之间的空白区域。它可以用来控制元素与其他元素之间的距离，例如在 div 元素中设置外边距为 20 像素：

div {
  margin: 20px;
}

这会将 div 元素与其他元素之间的距离设置为宽度和高度均为 20 像素的空白区域。

总结

CSS 箱型模型是 CSS 中最基本的概念之一，它决定了 HTML 元素在页面上的排版和尺寸。箱型模型包含了四个部分：内边距、边框、外边距和内容区域，我们可以使用这些属性来控制元素的大小、填充、边框和距离。在设计网页布局时，熟练掌握 CSS 箱型模型是必不可少的技能。