您的位置：首页 > Web前端 > HTML

html 盒子模型基础（外边距的重叠问题详解）（三）

2017-02-07 09:25 781 查看

1.外边距的重叠问题

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>

<style type="text/css">

.box1{
width: 100px;
height: 100px;
background-color: red;
/*为上边的元素设置一个下外边距*/
margin-bottom: 100px;
}

.box2{
width: 100px;
height: 100px;
background-color: blue;
/*为下边的元素设置一个上外边距*/
margin-top: 100px;

/*
垂直方向的相邻的外边距会发生外边距的重叠现象
兄弟元素的相邻外边距会取最大值
父子元素的相邻外边距会传递给父元素
*
* */
}

.left{
background-color: yellow;
/*为左侧的span设置一个右外边距*/
margin-right: 100px;
}

.right{
/*
水平方向的相邻外边距不会发生重叠，而是求和
* */
background-color: yellowgreen;
/*为右侧的span设置一个左外边距*/
margin-left: 100px;
}

.box3{
width: 300px;
height: 200px;
background-color: skyblue;
/*border: 1px red solid;*/
/*padding-top: 1px;*/
padding-top: 100px;
}

.box4{
width: 100px;
height: 100px;
background-color: red;
/*设置一个margin-top*/
/*margin-top: 100px;*/
}

</style>
</head>
<body>

<div class="box3">
<div class="box4"></div>
</div>

<br /><br /><br /><br />
<div class="box1"></div>
<div class="box2"></div>

<!--<span class="left">我是左侧的span</span><span class="right">我是右侧的span</span>-->

</body>
</html>

效果：

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

标签： css html 经验

相关文章推荐

新的分享

章节导航