但如果你设置margin-bottom/right为负数,元素并不会如你所想的那样向下/右移动,而是将后续的元素拖拉进来,覆盖本来的元素。
如果没有设定width属性,设定负margin-left/right会将元素拖向对应的方向,并增加宽度,此时的margin的作用就像padding一样。
2.position<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8"3>
<title>十字架</title>
<style type="text/css">
<!--
#top,#bottom{
position: absolute;
height: 76px;
width: 50px;
left:50%;
top:50%;
}
#left,#right,#center{
position: absolute;
height: 50px;
width: 50px;
left:50%;
top:50%;
}
#center{
margin: -25px 0px 0px -25px;
background:#de534e;
}
#top{
margin: -101px 0px 0px -25px;/*实验了很多次调到合适,本来认为是88px发现不行,但是不知道为什么是101*/
background:#fd6d6d;
}
#left{
margin:-25px 0px 0px -75px;
background:#fd6d6d;
}
#bottom{
margin:25px 0px 0px -25px;
background-color: #fd6d6d;
}
#right{
margin:-25px 0px 0px 25px;
background:#fd6d6d;
}
}
-->
</style>
</head>
<body>
<div id="top"></div>
<div id="bottom"></div>
<div id="left"></div>
<div id="right"></div>
<div id="center"></div>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8"3>
<title>十字架</title>
<style type="text/css">
<!--
#lt,#rt,#lb,#rb{
background-color: #ffffff;
height: 75px;
width: 50px;
position: absolute;
}
#center{
position:absolute;
margin: auto;
width:150px;
height:200px;
top: 0;bottom: 0;left: 0;right: 0;
background-color:#e84c3d;
}
#lt{
top:0px;
left: 0px;
}
#rt{
top: 0px;
right: 0px;
}
#lb{
bottom: 0px;
left: 0px;
}
#rb{
bottom: 0px;
right: 0px;
}
-->
</style>
</head>
<body>
<div id="center">
<div id="lt"></div>
<div id="rt"></div>
<div id="lb"></div>
<div id="rb"></div>
</div>
</body>
</html>
#lt,#rt,#lb,#rb{
background-color: #000000;
height: 75px;
width: 50px;
position: relative;
}#lt{
top:0px;
left: 0px;
}
#rt{
top: -75px;
right: -100px;
}
#lb{
top: -25px;
left: 0px;
}
#rb{
top: -100px;
right: -100px;
}