div+css[4]：css中边界属性margin
1.边界属性margin
margin:auto|长度值|百分比值;
□ 单侧的边界和简写
margin-top:5px;
同时定义四个单侧的属性,顺序遵循"钟面原则上右下左":
margin:margin-top|margin-right|margin-bottom|margin-left;
margin:40px 30px 20px 10px;
□ 垂直方向的边界重叠例如两元素:content1 content2
<div class="content1"></div>
<div class="content2"></div>
?
两元素分别定义为:
.content1{
margin-bottom:50px;
height:50px;
width:300px;
background:#cccccc;
}
.content2{
margin-top:50px;
height:50px;
width:300px;
background:#cccccc;
}
实际显示效果是:两个元素之间的距离为50px,而不是两个边界之和为100px.也就是说,两个元素的边界发生了重叠.当两个边界值不同时,元素间的距离等于值较大的一个.
?
□ 水平方向的边界重叠
?
例如两元素:content1 content2
?
两元素分别定义为:
<div class="content1"></div>
<div class="content2"></div>
?
.content1{
margin-right:50px;
height:50px;
width:300px;
background:#cccccc;
float:left;
}
.content2{
margin-left:50px;
height:50px;
width:300px;
background:#cccccc;
float:left;
}
实际显示效果是:两个元素之间的距离为100px,相邻元素的边界属性在水平方向上会相加.
?
□ 负的边界值
例如两元素:content1 content2
<div class="content content1"></div>
<div class="content content2"></div>
?
?
两元素分别定义为:
.content{
height:70px;
width:300px;
padding-top:20px;
}
.content1{
margin-bottom:20px;
?
?
background:#cccccc;
?
}
.content2{
margin-top:-80px;
?
?
background:#666666;
?
}
实际显示效果是:两个元素之间的距离为20px与-80px之和-60px.所以元素content2会向上移动-60px,与content1有60个像素的重叠.
?
□ 在内联元素中使用margin属性(垂直)
这是一个在内联元素中使用<span class="content1">边界属性</span>的示例.
.content1{
margin-bottom:40px;
backtground:#999999;
}
实际显示效果是:文本在垂直方向上保持不变,原因是边界属性不能改变文本的行高,所以元素在秉直方向上没有文化.
?
□ 在内联元素中使用margin属性(水平)
这是一个在内联元素中使用<span class="content1">边界属性的示例,请注意换行处的边界属性</span>是否有变化,这将有助于对属性的理解.
margin:40px;
backtground:#999999;
}
实际显示效果是:边界属性只会在元素的开始和结束的地方产生效要.换行断开时并不产生边界效果.
