CSS 盒子模型

使用任何 HTML 标签创建的每个元素都是一个框。CSS 盒子模型，将内容的边距、边框、填充和实际空间显示为不同的空间，它们共同构成任何元素。

如果您使用 Chrome 浏览器，请按Command + Option + I(Mac OSX) 和F12(Windows OS)。

• 现在点击Select an Element...左上角的图标。

• 单击上面的图标后，现在您可以选择并单击要检查的任何 HTML 元素。
• 例如：我们选择了侧边栏，您可以立即看到 HTML 元素与在Elements选项卡下选择的元素相对应，并且在右侧显示了应用于该元素 的CSS 样式。

  如果您在样式部分向下滚动，您将在那里看到所选元素的盒模型表示。

尝试将鼠标悬停在Styles部分中的 Box Model 表示上，您将看到相同的内容将在实际元素上突出显示。

什么是盒子模型？

盒子模型只不过是元素盒子各个部分的表示。这些组件/部分是：

• content：这是在元素内保存文本和图像的主要区域。
• padding ：这是元素内内容周围的空白区域。
• 边框：这是内容和填充周围的边框。
• margin：这是边界外的空白区域。

元素的实际高度和宽度

当我们使用 CSS 明确指定一个元素的高度和宽度时，那么这个高度和宽度是针对元素的内容区域的。而元素实际占用的空间包括内容区域、内边距、边框和边距。

#myelement {
    height:200px;
    width:200px;
    padding:10px;
    margin:10px;
    border:5px solid red;
}

现场示例 →

对于上述样式，带有idas的 HTML 元素myelement必须具有定义的宽度和高度200px。但是这个元素实际占用的高度和宽度会有所不同，因为padding、border和margin也要考虑在内。

实际宽度：宽度（200px）+左右填充（10px+10px）+左右边框（5px+5px）+左右边距（10px+10px）=250px

实际高度：高度(200px) +上下边距(10px + 10px) +上下边框(5px + 5px) +上下边距(10px + 10px) =250px

盒子阴影

就像 一样text-shadow，该属性box-shadow用于为整个元素框添加阴影。

句法：

box-shadow: <horizontal-displacement> <vertical-displacement> <blur> <color>;

blur并且color值不是强制性的。

#box-shadow {
    box-shadow: 5px 5px 5px grey;
}