您的位置：首页 > 运维架构

父元素，子元素margin-top问题

2018-03-15 00:16 645 查看

<!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>
<div class="a1">
<div class="a2">给父元素加overflow:hidden</div>
</div>
<hr>
<div class="a11">
<div class="a22">margin-top合并</div>
</div>
<hr>
<div class="a111">
<div class="a222">子元素加padding-top</div>
</div>
<hr>
<div class="a1111">
<div class="a2222">父元素加border</div>
</div>
<hr>
<div class="a11111">
<div class="a22222">绝对定位</div>
</div>
<hr>
<div class="a111111">
<div class="a222222">float</div>
</div>
<div>
<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>
</div>
<script type="text/javascript">

</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航