div的嵌套问题

ironman2021 · 发表于 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>

肖-肖 · 发表于 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>

这样就能实现你说的理想效果了!

肖-肖 · 发表于 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却有用？
  我不知道为什么但是只要设置父或者子盒子设为绝对定位后就都有用啦！

希望说的对你有点帮助吧

ironman2021 · 发表于 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。
期待您的下一次回复

肖-肖 · 发表于 2021-4-25 10:22:16

ironman2021 发表于 2021-4-25 10:07
谢谢！不过我还是有些疑问。
我对div2设置margin，我的理解是div2的边框到div1边框的距离，所以d ...

反正是加上绝对定位就可以解决，我也不知道为什么
你说的第二个我赞成

ironman2021 · 发表于 2021-4-25 10:25:19

肖-肖发表于 2021-4-25 10:22
反正是加上绝对定位就可以解决，我也不知道为什么
你说的第二个我赞成

奥，谢谢！我有轻微强迫症，想知道原理是啥

肖-肖 · 发表于 2021-4-25 10:29:35

ironman2021 发表于 2021-4-25 10:25
奥，谢谢！我有轻微强迫症，想知道原理是啥

我在网上找到答案了说原因是:margin折叠
如下:
可以4.png

账号		自动登录	找回密码
密码			立即注册