CSS 盒子模型

allway2

已于 2022-07-05 22:21:42 修改

阅读量403

点赞数

文章标签： css html 前端

于 2022-07-05 22:20:58 首次发布

本文链接：https://blog.csdn.net/allway2/article/details/125629115

版权

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

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

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

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

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

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

当我们使用 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;
}

关注