问题描述:如下图,当第二个绿色div元素中的第一个子元素通过设置margin-top:20px想要与父元素顶部拉开20px间距时,反而会使父元素向下移动20px。

<!doctype html>  
<html>  
 <head>  
  <meta charset="UTF-8">  
  <meta name="2015/11/26cription" content="">  
  <style>  
    * {  
        box-sizing: border-box;  
    }  
    .parent1, .parent2 {  
        width: 600px;  
        height: 200px;  
    }  
    .parent1 {  
        background: #aaf;  
    }  
    .parent2 {  
        background: #afa;  
        /*border-top: 1px solid #000;*/  
        /*margin-top: 0;*/  
        /*padding-top:0px;*/  
        /*overflow: hidden;*/  
    }  
  
    .child2 {  
        width: 100px;  
        height: 50px;  
        background: #faf;  
        margin-top: 20px;  
    }  
  </style>  
 </head>  
 <body>  
    
  <div>  
  </div>  
  <div>  
    <div>child2为父容器div的第一个子元素</div>  
  </div>  
 </body>  
</html>

解决办法:

(1)给父元素加border——有副作用: 一般父元素div用来做布局使用,添加border会使用内容的height和width变大

(2)给父元素加padding-top:1px——有副作用,同样会使内容的height变大

(3)给父元素加overflow:hidden——有副作用:一旦子元素内容溢出,将会无法显示溢出的内容

(4)完美解决办法:为父元素添加内容生成:该方法无任何副作用(推荐使用

.parent:before {
    content:  " ";
    display: table;
}


标签的样式使用

网页设计当中hr的各种样式,如果使用得当,将会给你的页面增色很多,下面就来详细介绍下各种样式和各种使用方式的方法! 第一种: <hr style=" heig...

文字超出元素宽度时,自动显示省略号

何时适用:当制作页面中新闻列表或者其他列表时,元素宽度有限,显示不了整个标题内容。为了让用户知道,此标题还未显示完整。如下图效果: 语法: <di...

三栏布局,左右两栏宽度固定,中间宽度自适应 兼容IE6

效果图如下: 实现方法: 左右两列分别左浮动和右浮动并给一个固定宽度,中间不浮动,也不设定宽度,设置左右浮动为左右两栏的宽度。 代码: <!DOCTYP...