HTML盒模型

最新推荐文章于 2025-04-10 16:54:24 发布

原创最新推荐文章于 2025-04-10 16:54:24 发布 · 4.7k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#html #css

前端学习专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了HTML盒模型，包括内容区、内边距、边框和外边距的概念。重点讲解了padding、border和margin的用法，以及在布局中可能出现的外边距叠压和塌陷问题及其解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

盒模型

什么是盒模型：每一个标签都是一个矩形，像一个盒子，所以HTML页面的布局可以理解为多个盒子组合嵌套排序而成。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wSHciGHI-1649508211222)(C:\Users\Guolan\AppData\Local\Temp\1649504298774.png)]

整个盒模型的组成由上图所示，盒子的内容大小由width宽度和height高度指定，padding设置盒内边距，border设置盒子边框，margin设置盒子外边距。

其中padding和border会增加盒子大小，而margin不会。

1.padding内边距

padding可以给1-4个值，顺时针赋值，从上开始：

<style>
    div{
        padding: 30px 50px 70px 90px;
        padding-left:90px;
    }
</style>

2.border边框

border是一个复合属性，由border-width，border-style，border-color三个属性组成，可以一次性设置，也能单个设置。border-radius设置边框的圆角，后面的值，就是距离四个角的位置为圆心画弧，最大值为边长的一半(超过一半，还是按一半算)，可单一角设置。

<style>
    div{
        border-right: 2px solid gold;
        border-top: 5px dashed pink;
        border-top-color: red;
        border-radius：5px;
    }
</style>

3.margin外边距

margin设置外边距同padding，但会造型两个问题1.叠压现象2.塌陷问题

叠压现象：如上下两个盒模型，上面的盒模型设置了margin-bottom：100px，下面的盒子设置了margin-top：150px，理论上两个盒子的上下距离应该是250px，但实际只有150px。

塌陷问题：常态下，父级的第一个字标签是个块标签，并且使用了margin或者margin-top，就会出现塌陷问题。解决方法：1.在父级添加border。2.不适用margin-top，在父级使用padding-top。3.塌陷隐藏（推荐使用方法）：在父级标签添加属性：overflow：hidden。

PS：overflow：hidden有三个作用：1.隐藏溢出。2.解决塌陷。3.清除浮动。