补充一个属性知识点:
overflow属性:如果元素中的内容超出了给定的宽度和高度属性,overflow 属性可以确定是否显示滚动条等行为.
---------------------------分割线--------------------------
在此之前我们都学习了margin属性,这是一个外边距属性。
水平方向上的外边距是可以叠加的。
这是怎么个意思呢?
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta chars et="UTF-8">
<title>外边距的合并现象</title>
<style type="text/css">
span{
display: inline-block;
width: 100px;
height: 100px;
border: 1px solid #000;
}
div{
height: 100px;
border:1px solid #000;
}
.hezi1{
margin-right: 50px;
}
.hezi2{
margin-left: 50px;
}
</style>
</head>
<body>
<span class="hezi1">我是span</span>
<span class="hezi2">我是span</span>
<div class="box1">我是div</div>
<div class="box2">我是div</div>
</body>
</html>
左边的span标签距离右边的span标签是50px,而右边的span标签距离左边的span是100px,因此通过水平方向上的外边距叠加可以得知:两个span标签的水平外边距是150px
但是在垂直方向上,就会出现外边距的合并现象:
在垂直方向上,默认情况下外边距是不会叠加的,会出项合并现象(谁的外边距比较大,就听谁的)
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta chars et="UTF-8">
<title>外边距的合并现象</title>
<style type="text/css">
span{
display: inline-block;
width: 100px;
height: 100px;
border: 1px solid #000;
}
div{
height: 100px;
border:1px solid #000;
}
.hezi1{
margin-right: 50px;
}
.hezi2{
margin-left: 50px;
}
.box1{
margin-bottom: 50px;
}
.box2{
margin-top: 100px;
}
</style>
</head>
<body>
<span class="hezi1">我是span</span>
<span class="hezi2">我是span</span>
<div class="box1">我是div</div>
<div class="box2">我是div</div>
</body>
</html>