CSS 中的盒模型大小重置

简介

在本实验中，我们将探讨 CSS 编程中的盒模型大小重置概念。本实验将介绍如何重置盒模型，并防止元素的 宽度 和 高度 受到 边框 或 内边距 的影响。在实验结束时，你将全面了解 box-sizing 属性，以及如何使用它来优化网页设计。

盒模型大小重置

虚拟机中已经提供了 index.html 和 style.css。

为确保元素的 宽度 和 高度 不受 边框 或 内边距 的影响，请使用 CSS 属性 box-sizing: border-box。这会将 内边距 和 边框 包含在元素 宽度 和 高度 的计算中。如果你想从父元素继承 box-sizing 属性，请使用 box-sizing: inherit。

以下是对两个 div 元素使用 box-sizing 属性的示例：

<div class="box">border-box</div>
<div class="box content-box">content-box</div>

*,
*::before,
*::after {
  box-sizing: inherit;
}

.box {
  display: inline-block;
  width: 120px;
  height: 120px;
  padding: 8px;
  margin: 8px;
  background: #f24333;
  color: white;
  border: 1px solid #ba1b1d;
  border-radius: 4px;
  box-sizing: border-box;
}

.content-box {
  box-sizing: content-box;
}

在此示例中，第一个 div 元素的 box-sizing 为 border-box，第二个 div 元素的 box-sizing 为 content-box。

请点击右下角的“Go Live”在端口 8080 上运行网络服务。然后，你可以刷新“Web 8080”标签页来预览网页。

总结

恭喜你！你已完成盒模型大小重置实验。你可以在 LabEx 中练习更多实验以提升你的技能。