什么是盒子模型？margin的合并情况以及父盒子塌陷的解决方法

一，盒子模型

1，什么是盒子模型？

 盒子模型(Box Model)就是把HTML元素看作一个矩形的盒子,每个矩形由四个部分组成,分别为
"margin外边距,border边框,padding内边距,content内容"组成的,每个盒子除了有自己的大
小和位置之外,还会影响其它元素的大小和位置.

2.盒子形态

     盒子分为 标准盒子 和 怪异盒子
     标准盒子：
         标准盒子中 width 指的是内容区域的宽，height 指的是内容区域的高。
         盒子大小设置：content = content + padding + border + margin
     怪异盒子：
          怪异盒子中 width 指的是 “内容+ padding + border”的总宽/高度。
          盒子大小设置：content = （content + padding + border）+ margin

二，margin (外边距)的合并

1，margin外边距:

             作用:调整元素之间的间距,移动元素自身的位置.

             距离:

                  垂直方向:从自身边框开始到另一个元素边框之间的的距离.

                  水平方向:从自身边框开始到另一个元素margin之间的距离.

             语法:

                 margin:通过值控制不同的外边距,值1~4个.

                 margin-top/right/bottom/left: 设置单边外边距;

                 margin-block/inline-start/end:设置单边外边距;

            auto填充:

                使用auto计算可以实现块级元素左右居中对齐.

2，合并情况

        margin的合并:块级元素的垂直方向会发生合并.

        合并情况: 1.两个相邻的同胞元素的上下外边距会发生合并.

                         2.嵌套中,第一个子元素和最后一个子元素的margin会穿透父元素,看起来像父元素的外边距.

                             会形成父盒子塌陷(子元素设置margin-top,父元素跟着一起移动)

                             解决方案:

                             a.给父元素天年边框 border (不推荐,麻烦).

                             b.给父元素添加内边距 padding (值不小于等于0即可).

                             c.给父元素添加overflow: 不是nomal都行 (溢出元素内容会被隐藏).

                         3.空快的合并.