盒子模型 on Last Stand

盒子模型

Mon, 30 Sep 2024 00:00:00 +0800

前端盒子模型是网页布局的基础概念，对于前端开发者来说，理解盒子模型是至关重要的。

1. 盒子模型的组成部分

内容（Content）:
盒子中实际显示的文本或图像部分。内容区的大小由 width 和 height 属性确定。
内边距（Padding）:
内容与边框之间的空间。它用于增加内容与边框之间的距离，可以通过 padding、padding-top、padding-right、padding-bottom 和 padding-left 属性进行设置。
边框（Border）:
环绕在内边距和内容周围的边界。可以设置边框的宽度、样式和颜色。相关属性包括 border、border-width、border-style 和 border-color。
外边距（Margin）:
盒子外部的空间。用于控制元素与元素之间的间距。可以通过 margin、margin-top、margin-right、margin-bottom 和 margin-left 属性进行设置。

2. 标准盒子模型与替代盒子模型

标准盒子模型（content-box）:
默认的盒子模型。width 和 height 只包含内容区，不包括内边距和边框。因此，元素的实际占用空间是 width + padding + border。
替代盒子模型（border-box）:
通过设置 box-sizing: border-box，使得 width 和 height 包括内边距和边框，这样内容区的大小会自动调整以适应总高度和宽度。这样做通常可以避免许多布局问题。

示例

.box {
 box-sizing: content-box; /* 默认值 */
 width: 200px;
 padding: 20px;
 border: 5px solid black;
}

在标准模型下：

总宽度 = 200px + 20px (左内边距) + 20px (右内边距) + 5px (左边框) + 5px (右边框) = 250px

.box {
 box-sizing: border-box; /* 替代模型 */
 width: 200px;
 padding: 20px;
 border: 5px solid black;
}

在替代模型下：