HTML/CSS初学学习笔记2：解决CSSmargin塌陷以及margin合并（深入解读）

雨点打透心脏的1/2处 2023-03-02 11:00 17阅读 0赞

## margin塌陷 ##

如图所示代码，我们欲使黄色块位于黑色块的右下方  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70]

![在这里插入图片描述][20200729115559972.png]

发现在黄色块加上margin-top，它并未向下，而添加margin-left，它相对于黑色块向右了50px，而且哪怕将黄块的margin-top需要改为150px，它实现的效果则是带着黑色块一起向下移动了50px，且自身相对于黑块仍是右上方。  
这就是margin塌陷：

**父子嵌套元素垂直方向的 margin，父子元素是结合在一起的，他们两个会取其中最大的值。正常情况应该是父级相对于浏览器进行定位，子级应该相对于父级定位的。但是 margin 塌陷是在父级相对于浏览器进行定位时，子级没有相对于父级定位，就像父级的顶棚没有了一样，子级相对于父级，就像塌陷了一样**

### margin 塌陷解决方案 ###

一种土法（千万不能用）  
为wrapper 增添一句

border-top: 1px solid black;

**虽然这样也能达到效果，但是，千万不能用**

应该用 bfc（block format context 块级格式化上下文），改变父级的渲染规则

触发 bfc，特定的盒子会遵循另一套规则

弥补 margin 塌陷，可以使用 bfc，如何触发一个盒子的bfc？

*  position:absolute;
 *  display:inline-block;
 *  float:left/right; //浮动
 *  overflow:hidden; //溢出盒子的部分要隐藏展示

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70 1]  
注意

*  margin 塌陷的解决方法只改了 css，未改变html
 *  这四种方法都能触发 bfc，但是使用的时候都带来了新的麻烦在具体情况中，针对需求，哪个触发方式没有影响，就用哪个解决塌陷问题

## margin合并 ##

先来看个例子  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][20200729123644602.png]  
将text2的margin-left取消注释  
![在这里插入图片描述][20200729123733291.png]

同样的想法我们运用在div上  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70 3]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70 4]  
当去掉注释margin-top，却发现，下方的div块并未移动  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70 5]  
两个兄弟结构的元素，他俩垂直方向的 margin 是合并的  
这就是margin合并

### margin 合并解决解决方案 ###

margin合并 依然使用 bfc  
如下方法修改即可  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70 6]  
但是，注意这种修改方式是修改HTML，修改了我们的骨架这在开发中是不允许的，所以，实际开发中，在 margin 合并这个 bug 上，我们不用 bfc（不能改变 html 的结构）假如我们需要两个 div 直接有 300px，那就设置上面的 margin-bottom:300px;来解决距离的问题

--------------------

Ps:若有错误，请提出

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70]: /images/20230208/43457ce4d6f744edbc7d46234c23f444.png
[20200729115559972.png]: /images/20230208/0965b0bdd6394c0393913fb6fff3bc1c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70 1]: /images/20230208/5b9464d76da74090928cb287b0142e1f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70 2]: /images/20230208/e81e2b9d52d94fe49719f84401b7d230.png
[20200729123644602.png]: /images/20230208/5c5829c9f0594f6898911a10ecb8f63f.png
[20200729123733291.png]: /images/20230208/eaf41dbb0f3442049078eb912bc980a1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70 3]: /images/20230208/0f4d9599386249c89dc2487086608956.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70 4]: /images/20230208/3f60da1706644f1eabc3942342022832.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70 5]: /images/20230208/9b955adf702641bfbf27bc6b6f4cdd8d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70 6]: /images/20230208/fcb043b6f15b482382dbe1f33b780d89.png