CSS中关于margin的理解误区
思考一
在以前，我对于margin的理解是这样的，此处用margin-top举例：指的是离相邻元素之间的距离。
但是实际是：相对于自身原来的位置偏移。
举个例子：
<!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>
其表现为：
但是如果我把Red这个div设置下margin-top:10px
此时Red会往下移动10px，如果按照最开始的理解：离相邻元素之间的距离。那么Green这个div也应该往下移动，但是实际上却不是如此，见下图
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
第二种情况：position+left
margin和position均未脱离文档流，但是他们导致的结果还是不同的，我个人更偏向于使用margin定位，因为好理解。
CSS中关于margin的理解误区的更多相关文章
- 深入理解css中的margin属性
深入理解css中的margin属性 之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些“坑”的,下面我会介绍margin的基本知识以及 ...
- 深入理解CSS中的margin
1.css margin可以改变容器的尺寸 元素尺寸 可视尺寸--标准盒子模型中盒子的宽度是不包括margin值的,clientWidth 占据尺寸--包括margin的宽度 outWidth不在标准 ...
- CSS中上下margin的传递和折叠
CSS中上下margin的传递和折叠 1.上下margin传递 1.1.margin-top传递 为什么会产生上边距传递? 块级元素的顶部线和父元素的顶部线重叠,那么这个块级元素的margin-top ...
- 深入css中的margin
深入css中的margin 第一:margin-top css代码(元素没有任何定位的情况下,并且元素默认为block) <style type="text/css"> ...
- 解说css中的margin属性缩写方式
<html> <body> <div style="border: 1px solid red;"> <div style="b ...
- CSS中的margin、border、padding区别
CSS padding margin border属性详解 图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来 ...
- CSS中盒模型的理解
今天突然看到一篇关于CSS中盒模型的文章,忽然觉得自己竟然遗忘了很多小的地方,所以写一篇文章来记忆一下 (摘抄于千与千寻写的CSS盒子模型理解,并在自己基础上添加了一些东西,希望更完善,对大家有帮助) ...
- [html]CSS中的margin、border、padding区别
图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层. ...
- CSS中的margin、border和padding的区别
aaarticlea/gif;base64,R0lGODlhuQEbAbMAAP8AM8zMzGZmYszMmZmZZkIP/5qE/8zM/wICApmZmf//zP///wAAAAAAAAAAAA
随机推荐
- hdu_2665_Kth number(主席树)
题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=2665 题意:给你一个区间,让你找这个区间第K大的数 题解:主席树模版题,也可以用划分树 #includ ...
- tar解压
tar在linux上是常用的打包.压缩.加压缩工具,他的参数很多,折里仅仅列举常用的压缩与解压缩参数 参数: -c :create 建立压缩档案的参数:-x : 解压缩压缩档案的参数:-z : 是否需 ...
- if语句，函数function
1.语句 一般分为顺序,分支和循环语句. if是分支语句 格式1:if(){} 若满足就进入花括号,若不满足就跳过 格式2:if(){}else(){}二选一.若if满足则else一定不执行,反之则 ...
- excel中自动变为插入语句的写法
=concatenate("insert into t(b,c) values('",b1,"','",c1,"');")
- MySQL数据备份和恢复
1.数据备份 mysqldump -uroot -p databasename > file.sql 2.数据还原 mysql -u root -p databasename < file ...
- 初识Selenium（四）
用Selenium实现页面自动化测试 引言 要不要做页面测试自动化的争议由来已久,不做或少做的主要原因是其成本太高,其中一个成本就是自动化脚本的编写和维护,那么有没有办法降低这种成本呢?童战同学在其博 ...
- 提高MySQL查询速度
参考百度知道 关于mysql处理百万级以上的数据时如何提高其查询速度的方法 最近一段时间由于工作需要,开始关注针对Mysql数据库的select查询语句的相关优化方法. 由于在参与的实际项目中发现当m ...
- SDAU课程练习--problemQ(1016)
题目描述 FJ is surveying his herd to find the most average cow. He wants to know how much milk this 'med ...
- 获取spring bean的utils
<span style="font-size:10px;">package com.record.util; import org.springframework.be ...
- unit正交相机Size的计算公式
如:相机的大小为800*480,要使相机适应800*480像素的图,则 Size = 相机高/2/像素单位 = 480/2/100 = 2.4