鱼C论坛

 找回密码
 立即注册
查看: 6353|回复: 6

div的嵌套问题

[复制链接]
发表于 2021-4-24 15:18:30 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
本帖最后由 ironman2021 于 2021-4-24 15:24 编辑

创建了两个div块,
div1里面嵌套一个div2,然后给div2添加了一个外边距。结果并不是理性效果。
请问为什么我对div2设置的margin,会影响div1的margin设置?
请问为什么div2的margin设置只影响div1的上下margin,不影响div1的左右margin?
请问为什么div2的上下margin没有用,但是左右margin却有用?
基础不扎实,还请各位指点一下,一直没弄明白块元素之间嵌套后,块元素的margin和padding对布局影响的原理?

图1是div2没添加的margin的情况;
图2是div2添加完margin后的情况;
图3是div2添加完margin后的理想情况;(因为设置的参数恰巧,所以正好是居中的)

<!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>Document</title>
    <style>
      body{
          margin: 0;
          padding:0;
      }
        .div1{
            width: 200px;
            height: 200px;
            background-color: lightblue;
            margin-left:100px;
            
         
        }
        .div2{
            width: 100px;
            height: 100px;
            background-color: pink;
            /* margin:50px;  */    /*        给第二个div块添加外边距 */
           
        }
    </style>
     
</head>
<body>
    <div class='div1'>
        <div class='div2'></div>
    </div>
   

</body>
</html>

图1:初始时

图1:初始时

图2:添加margin

图2:添加margin

图3:理想效果

图3:理想效果
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2021-4-24 15:52:55 | 显示全部楼层
我先把实现后的代码发一下
<!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>Document</title>
    <style>
      body{
          margin: 0;
          padding:0;
      }
        .div1{
            position:relative;
            width: 200px;
            height: 200px;
            background-color: lightblue;
            /* margin-left:100px; */
            margin:0 auto;
            
          
        }
        .div2{
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: pink;
            margin-top: 50px;
            margin-left:50px;
            
            /* margin:50px;  */    /*        给第二个div块添加外边距 */
           
        }
    </style>
     
</head>
<body>
    <div class='div1'>
        <div class='div2'></div> 
    </div>
    

</body>
</html>
这样就能实现你说的理想效果了!
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-4-24 16:08:04 | 显示全部楼层
本帖最后由 肖-肖 于 2021-4-24 16:17 编辑

下面是你提的问题
请问为什么我对div2设置的margin,会影响div1的margin设置?
  因为div1和div2的盒子是统一水平线上的,而且div1要包含div2,你把div2的盒子往下弄,div1的盒子自然就跟着往下走了
请问为什么div2的margin设置只影响div1的上下margin,不影响div1的左右margin?
  影响了,它左边有蓝色的区域就是最好的证明
请问为什么div2的上下margin没有用,但是左右margin却有用?
  我不知道为什么但是只要设置父或者子盒子设为绝对定位后就都有用啦!

希望说的对你有点帮助吧
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2021-4-25 10:07:36 | 显示全部楼层
肖-肖 发表于 2021-4-24 16:08
下面是你提的问题
请问为什么我对div2设置的margin,会影响div1的margin设置?
  因为div1和div2的盒子是 ...

   谢谢!不过我还是有些疑问。
    我对div2设置margin,我的理解是div2的边框到div1边框的距离,所以div1应该是不动,然后div2往下移动。很显然我错了,但是我又不知我错哪了?
   对div2设置的margin我还是认为没有影响div1的左右margin,div1的margin是对body体现的,子所以里面左侧有蓝色区域,我理解的是div2对div1的margin-left。
  期待您的下一次回复
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-4-25 10:22:16 | 显示全部楼层
ironman2021 发表于 2021-4-25 10:07
谢谢!不过我还是有些疑问。
    我对div2设置margin,我的理解是div2的边框到div1边框的距离,所以d ...

反正是加上绝对定位就可以解决,我也不知道为什么
你说的第二个我赞成
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2021-4-25 10:25:19 | 显示全部楼层
肖-肖 发表于 2021-4-25 10:22
反正是加上绝对定位就可以解决,我也不知道为什么
你说的第二个我赞成

奥,谢谢!我有轻微强迫症,想知道原理是啥
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-4-25 10:29:35 | 显示全部楼层
ironman2021 发表于 2021-4-25 10:25
奥,谢谢!我有轻微强迫症,想知道原理是啥

我在网上找到答案了说原因是:margin折叠
如下:
可以4.png
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-12-23 14:17

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表