核心提示：父元素，子元素margin-top问题代码实例!DOCTYPE htmlhtmlheadtitletest/titlemeta charset=utf-8 style type=text/css*{m...
父元素，子元素margin-top问题代码实例
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta charset="utf-8">
<style type="text/css">
*{margin: 0;padding: 0;}
.a1{width: 300px;height: 300px;background-color: #666;overflow: hidden;}
.a2{width: 300px;height: 150px;margin-top: 50px;background-color: #999;}
.a11{width: 300px;height: 300px;background-color: #666;margin-top: 50px;}
.a22{width: 300px;height: 150px;margin-top: 50px;background-color: #999;}
.a111{width: 300px;height: 300px;background-color: #666;margin-top: 50px;}
.a222{width: 300px;height: 150px;background-color: #999;padding-top: 50px;}
.a1111{width: 300px;height: 300px;background-color: #666;border: 1px solid transparent;}
.a2222{width: 300px;height: 150px;background-color: #999;margin-top: 50px;}
.a11111{width: 300px;height: 300px;background-color: #666;position: relative;}
.a22222{width: 300px;height: 150px;background-color: #999;margin-top: 50px;position: absolute;}
.a111111{width: 300px;height: 300px;background-color: #666;float: left;}
.a222222{width: 300px;height: 150px;background-color: #999;margin-top: 50px;}
</style>
</head>
<body>
<p class="a1">
<p class="a2">给父元素加overflow:hidden</p>
</p>
<hr>
<p class="a11">
<p class="a22">margin-top合并</p>
</p>
<hr>
<p class="a111">
<p class="a222">子元素加padding-top</p>
</p>
<hr>
<p class="a1111">
<p class="a2222">父元素加border</p>
</p>
<hr>
<p class="a11111">
<p class="a22222">绝对定位</p>
</p>
<hr>
<p class="a111111">
<p class="a222222">float</p>
</p>
<p>
<h1>1、增加padding-top样式模拟 </h1>
<h1>2、父元素添加overflow：hidden </h1>
<h1>3、为父元素或者子元素声明浮动（float：left；可用）</h1>
<h1>4、为父元素添加border（border:1px solid transparent可用）</h1>
<h1>5、为父元素或者子元素声明绝对定位</h1>
</p>
<script type="text/javascript">
</script>
</body>
</html>
