CSS中关于margin的理解误区

思考一

在以前,我对于margin的理解是这样的,此处用margin-top举例:指的是离相邻元素之间的距离。

CSS中关于margin的理解误区

但是实际是:相对于自身原来的位置偏移。

举个例子:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!-- 规定字符集的编码为utf-8 -->
<meta charset="utf-8"> <style type="text/css">
body {
position: relative;
padding: 0px;
height: 500px;
} #Red {
width: 200px;
height: 80px;
border: 1px solid red;
position: relative;
} #Green {
width: 200px;
height: 80px;
border: 1px solid yellowgreen;
margin-top: 10px;
}
</style>
</head> <body> <div id="Red">Red</div>
<div id="Green">Green</div> </body>
</html>

其表现为:

CSS中关于margin的理解误区

但是如果我把Red这个div设置下margin-top:10px

此时Red会往下移动10px,如果按照最开始的理解:离相邻元素之间的距离。那么Green这个div也应该往下移动,但是实际上却不是如此,见下图

CSS中关于margin的理解误区

Green是没有移动的!

可以得出:margin是相对于自身原来的位置偏移。

思考二

下面是我在查看笔记的时突然顿悟的:

结论:margin这种定位方式是会影响到后续的兄弟元素的,而relative这种定位方法是不会影响后续兄弟节点的。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!-- 规定字符集的编码为utf-8 -->
<meta charset="utf-8"> <style type="text/css">
body {
position: relative;
padding: 0px;
height: 500px;
} #Green {
width: 200px;
height: 80px;
border: 1px solid yellowgreen;
float: left;
} #Red {
width: 200px;
height: 80px;
border: 1px solid red;
float: left; /*情况1*/
margin-left: 20px; /*情况2*/
/*position: relative;*/
/*left: 20px;*/
}
</style>
</head> <body> <div id="Red">Red</div>
<div id="Green">Green</div> </body>
</html>

注意查看Red这个div的CSS的2种情况。

第一种情况:margin-left

CSS中关于margin的理解误区

第二种情况:position+left

CSS中关于margin的理解误区

margin和position均未脱离文档流,但是他们导致的结果还是不同的,我个人更偏向于使用margin定位,因为好理解。

上一篇:Chapter 2. Overview gradle概览


下一篇:抛弃NVelocity,来玩玩Razor