如何理解html中的盒子模型

来源：互联网 2023-03-16 19:10:36 136

现在在网页的布局中，盒子模型使用是比较广泛的，如果您对于盒子模型还有一些不解的话，以下步骤对您有用。

工具/原料

我们可以先创建一个div，并给这个div一些属性，您在浏览器中即可查看到。

如何理解html中的盒子模型

我使用的是谷歌浏览器，我就在谷歌浏览器下为您讲解，不过其他浏览器也是差不多的。我的div具体效果入下图所示：

如何理解html中的盒子模型

我们进入上图所示页面，并点击键盘的F12,弹出下图所示界面。

如何理解html中的盒子模型

在上图所示图片中，您可以看到我页面的代码。

如何理解html中的盒子模型

可以看到我页面布局的一些样式。

如何理解html中的盒子模型

同时，还有一个部分就是盒子模型的图，我将在这个图下为您讲解。

如何理解html中的盒子模型

点击下图所示第一个图标，您即可将鼠标移动到您想看的具体的盒子模型。

如何理解html中的盒子模型

在盒子模型中，有几个重要的参数，您需要了解。它们分别是margin ，padding与内容区。

如何理解html中的盒子模型

margin指的是border边框外的位置，您可以新建一个div，并给他一个border=5px solid #000属性;试一试，通过可以通过创建多个div，使用margin，调整试一试看。

如何理解html中的盒子模型

9此文章未经许可获取自百度经验

调动margin，您将看到，我与于他最近的div距离增大了。边框到内容的距离并没有变，下图对比您可看到效果。

如何理解html中的盒子模型

padding是边框内到内容的这一个范围。

如何理解html中的盒子模型

您可以通过上述的测试方式检测通过改变padding后的反映，比如padding:100px;您可以看到改变后的效果，对比即可明白。

无论是padding还是margin都是盒子模型的一部分，参数的变化，盒子模型的大小尺寸也在随之改变。

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！

标签： HTML