盒模型

​ 什么是盒模型：每一个标签都是一个矩形，像一个盒子，所以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.清除浮动。