掌握CSS中的盒模型大小重置

简介

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("`CSS`")) -.-> css/BasicConceptsGroup(["`Basic Concepts`"]) css(("`CSS`")) -.-> css/BasicStylingGroup(["`Basic Styling`"]) css(("`CSS`")) -.-> css/CoreLayoutGroup(["`Core Layout`"]) css(("`CSS`")) -.-> css/IntermediateStylingGroup(["`Intermediate Styling`"]) css/BasicConceptsGroup -.-> css/selectors("`Selectors`") css/BasicStylingGroup -.-> css/colors("`Colors`") css/CoreLayoutGroup -.-> css/box_model("`Box Model`") css/CoreLayoutGroup -.-> css/margin_and_padding("`Margin and Padding`") css/CoreLayoutGroup -.-> css/borders("`Borders`") css/CoreLayoutGroup -.-> css/width_and_height("`Width and Height`") css/CoreLayoutGroup -.-> css/display_property("`Display Property`") css/IntermediateStylingGroup -.-> css/backgrounds("`Backgrounds`") css/IntermediateStylingGroup -.-> css/pseudo_elements("`Pseudo-elements`") subgraph Lab Skills css/selectors -.-> lab-35172{{"`CSS中的盒模型大小重置`"}} css/colors -.-> lab-35172{{"`CSS中的盒模型大小重置`"}} css/box_model -.-> lab-35172{{"`CSS中的盒模型大小重置`"}} css/margin_and_padding -.-> lab-35172{{"`CSS中的盒模型大小重置`"}} css/borders -.-> lab-35172{{"`CSS中的盒模型大小重置`"}} css/width_and_height -.-> lab-35172{{"`CSS中的盒模型大小重置`"}} css/display_property -.-> lab-35172{{"`CSS中的盒模型大小重置`"}} css/backgrounds -.-> lab-35172{{"`CSS中的盒模型大小重置`"}} css/pseudo_elements -.-> lab-35172{{"`CSS中的盒模型大小重置`"}} end

盒模型大小重置

虚拟机中已经提供了 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中练习更多实验以提升你的技能。

CSS中的盒模型大小重置

简介

Skills Graph

盒模型大小重置

总结

您可能感兴趣的其他 CSS 教程