当前位置:主页 > 站长学院 > 网页设计 >

div嵌套div时margin边距不起作用的解决方案

YouYou 发布于 2020-12-25
频道:网页设计

下面介绍一下div嵌套div时margin不起作用的解决方案。

顺便科普下margin的定义和用法。

div嵌套的HTML代码:

  1. <!DOCTYPE html> 
  2.  
  3. <html lang="en"
  4.  
  5. <head> 
  6.  
  7.     <meta charset="UTF-8"
  8.  
  9.     <meta name="viewport" content="width=device-width, initial-scale=1.0"
  10.  
  11.     <title>Document</title> 
  12.  
  13.     <style type="text/css"
  14.  
  15.         *{ 
  16.  
  17.             margin: 0; 
  18.  
  19.             padding: 0; 
  20.  
  21.         } 
  22.  
  23.         body{ 
  24.  
  25.             width: 100%; 
  26.  
  27.             height: 100%; 
  28.  
  29.             background-color: dodgerblue; 
  30.  
  31.         } 
  32.  
  33.         .box{ 
  34.  
  35.             width: 300px; 
  36.  
  37.             height: 300px; 
  38.  
  39.             margin: 30px; 
  40.  
  41.             background-color: gray; 
  42.  
  43.         } 
  44.  
  45.         .box .child{ 
  46.  
  47.             width: 200px; 
  48.  
  49.             height: 200px; 
  50.  
  51.             margin: 50px; 
  52.  
  53.             background-color:darkturquoise; 
  54.  
  55.         } 
  56.  
  57.     </style> 
  58.  
  59. </head> 
  60.  
  61. <body> 
  62.  
  63.     <div class="box"
  64.  
  65.         <div class="child"
  66.  
  67.   
  68.  
  69.         </div> 
  70.  
  71.     </div> 
  72.  
  73. </body> 
  74.  
  75. </html> 

实际效果:

实际效果

这其实不是我们想要的效果,先来说下为什么会出现这个问题:

有两个嵌套关系的div,如果外层div的父元素padding值为0,那么内层div的margin-top或者margin-bottom的值会“转移”给外层div。

解决该问题我们需要先了解ie特有的一个属性haslayout。

我们要实现的效果是这样的:

要实现的效果

最后我们来说一下解决方法:

1、让父元素生成一个block formating context(块级格式化上下文,可自行百度了解),以下属性可以实现

  1. float: left/right 
  2.  
  3. position: absolute 
  4.  
  5. display: inline-block 
  6.  
  7. overflow: hidden/auto 

2、给父元素添加border或者padding

以方法一的overflow:hidden为例:

  1. <!DOCTYPE html> 
  2.  
  3. <html lang="en"
  4.  
  5. <head> 
  6.  
  7.     <meta charset="UTF-8"
  8.  
  9.     <meta name="viewport" content="width=device-width, initial-scale=1.0"
  10.  
  11.     <title>Document</title> 
  12.  
  13.     <style type="text/css"
  14.  
  15.         *{ 
  16.  
  17.             margin: 0; 
  18.  
  19.             padding: 0; 
  20.  
  21.         } 
  22.  
  23.         body{ 
  24.  
  25.             width: 100%; 
  26.  
  27.             height: 100%; 
  28.  
  29.             background-color: dodgerblue; 
  30.  
  31.         } 
  32.  
  33.         .box{ 
  34.  
  35.             width: 300px; 
  36.  
  37.             height: 300px; 
  38.  
  39.             margin: 30px; 
  40.  
  41.             background-color: gray; 
  42.  
  43.             overflow: hidden; 
  44.  
  45.         } 
  46.  
  47.         .box .child{ 
  48.  
  49.             width: 200px; 
  50.  
  51.             height: 200px; 
  52.  
  53.             margin: 50px; 
  54.  
  55.             background-color:darkturquoise; 
  56.  
  57.         } 
  58.  
  59.     </style> 
  60.  
  61. </head> 
  62.  
  63. <body> 
  64.  
  65.     <div class="box"
  66.  
  67.         <div class="child"
  68.  
  69.         </div> 
  70.  
  71.     </div> 
  72.  
  73. </body> 
  74.  
  75. </html> 
  76.  
  77. <!DOCTYPE html> 
  78.  
  79. <html lang="en"
  80.  
  81. <head> 
  82.  
  83.     <meta charset="UTF-8"
  84.  
  85.     <meta name="viewport" content="width=device-width, initial-scale=1.0"
  86.  
  87.     <title>Document</title> 
  88.  
  89.     <style type="text/css"
  90.  
  91.         *{ 
  92.  
  93.             margin: 0; 
  94.  
  95.             padding: 0; 
  96.  
  97.         } 
  98.  
  99.         body{ 
  100.  
  101.             width: 100%; 
  102.  
  103.             height: 100%; 
  104.  
  105.             background-color: dodgerblue; 
  106.  
  107.         } 
  108.  
  109.         .box{ 
  110.  
  111.             width: 300px; 
  112.  
  113.             height: 300px; 
  114.  
  115.             margin: 30px; 
  116.  
  117.             background-color: gray; 
  118.  
  119.             overflow: hidden; 
  120.  
  121.         } 
  122.  
  123.         .box .child{ 
  124.  
  125.             width: 200px; 
  126.  
  127.             height: 200px; 
  128.  
  129.             margin: 50px; 
  130.  
  131.             background-color:darkturquoise; 
  132.  
  133.         } 
  134.  
  135.     </style> 
  136.  
  137. </head> 
  138.  
  139. <body> 
  140.  
  141.     <div class="box"
  142.  
  143.         <div class="child"
  144.  
  145.         </div> 
  146.  
  147.     </div> 
  148.  
  149. </body> 
  150.  
  151. </html> 

最终效果:

最终效果

 

    打赏是您对我们最大的鼓励!

    扫一扫打赏
    相关评论

    评论列表(条)

      ×
      QQ在线客服

      服务中心

      zfzf