盒子模型存在的bug

1.margin传递问题

a.具体含义(父子之间)

子元素的margin-top的值m会传递给父亲,这样显示出来的效果就是父级元素往下移动m,但是子元素还是紧挨着父级元素的

b.源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>margin传递问题</title>
    <style type="text/css">
         *{
          /* 清除浏览器默认样式的影响 */
          padding: 0;
          margin: 0;
         }
         #top{
          width: 200px;
          height: 200px;
          background-color: saddlebrown;
         }
         .inside{
            width: 100px;
          height: 100px;
          background-color: skyblue;
          margin-top: 10px;
         }
    </style>    
</head>
<body>
    <div id="top">
        <div class="inside"></div>
    </div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

c.展示效果

c.1 不写margin-top时效果

在这里插入图片描述

c.2 写了margin-top时的效果

在这里插入图片描述

d.解决方案

要使子元素往下移动,可以通过设置父级元素的内边距来进行位置的移动

解释说明:在父级元素眼中,它的子元素可以看出是它的内容部分,而内边距又是盒子边框和盒子内容之间的距离,因此就可以通过设置父级元素的内边距来使子元素往下移动,从而使父级元素和子元素产生间距

2.margin叠压问题

a.具体含义(同一层的盒子之间)

当在页面当中有上下关系的两个盒子,同时对上方盒子设置margin-bottom和对下方盒子设置margin-top,此时两个盒子之间的间距=max(margin-bottom,margin-top);

b.源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>margin叠压问题</title>
    <style type="text/css">
         *{
          /* 清除浏览器默认样式的影响 */
          padding: 0;
          margin: 0;
         }
         #first{
          width: 200px;
          height: 200px;
          background-color: saddlebrown;
          margin-bottom: 10px;
         }
         #second{
          width: 200px;
          height: 200px;
          background-color: skyblue;
          margin-top: 20px;
         }
    </style>    
</head>
<body>
    <div id="first">团结</div>
    <div id="second">友爱</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

c.展示效果

只对上方盒子设置下外边距时,展示效果如下所示:

在这里插入图片描述

当同时对上方盒子设置下外边距和对下方盒子设置上外边距时,展示效果如下所示:
在这里插入图片描述

d.解决方案

若想要控制具有上下位置关系的两个盒子在垂直方向上的距离,那就只设置上方盒子的下外边距或者下方盒子的上外边距即可,千万不要同时设置两者的值

相关阅读:
R语言ggplot2可视化地图并使用scale_fill_gradient函数自定义设置地图颜色刻度为灰色梯度刻度（grey gradient scales）
数字通信和fpga概述——杜勇版本学习笔记
【问题解决】PlatformIO下ESP32C3工具链toolchain下载问题解决方法
FreeRTOS学习笔记（二）
Qt MV架构-委托类
算法leetcode｜17. 电话号码的字母组合（rust重拳出击）
[ Linux 长征路第二篇] 基本指令head,tail,date,cal,find,grep,zip,tar,bc,unname
SpringBoot整合Swagger
鸿蒙开发游戏（一）---大鱼吃小鱼（界面部署）
docker基础命令快速入门

原文地址：https://blog.csdn.net/SSS4362/article/details/125477439