思考一

在以前，我对于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的理解误区的更多相关文章

  1. 深入理解css中的margin属性

    深入理解css中的margin属性 之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些“坑”的,下面我会介绍margin的基本知识以及 ...

  2. 深入理解CSS中的margin

    1.css margin可以改变容器的尺寸 元素尺寸 可视尺寸--标准盒子模型中盒子的宽度是不包括margin值的,clientWidth 占据尺寸--包括margin的宽度 outWidth不在标准 ...

  3. CSS中上下margin的传递和折叠

    CSS中上下margin的传递和折叠 1.上下margin传递 1.1.margin-top传递 为什么会产生上边距传递? 块级元素的顶部线和父元素的顶部线重叠,那么这个块级元素的margin-top ...

  4. 深入css中的margin

    深入css中的margin 第一:margin-top css代码(元素没有任何定位的情况下,并且元素默认为block) <style type="text/css"> ...

  5. 解说css中的margin属性缩写方式

    <html> <body> <div style="border: 1px solid red;"> <div style="b ...

  6. CSS中的margin、border、padding区别

    CSS padding margin border属性详解 图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来 ...

  7. CSS中盒模型的理解

    今天突然看到一篇关于CSS中盒模型的文章,忽然觉得自己竟然遗忘了很多小的地方,所以写一篇文章来记忆一下 (摘抄于千与千寻写的CSS盒子模型理解,并在自己基础上添加了一些东西,希望更完善,对大家有帮助) ...

  8. [html]CSS中的margin、border、padding区别

    图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层. ...

  9. CSS中的margin、border和padding的区别

    aaarticlea/gif;base64,R0lGODlhuQEbAbMAAP8AM8zMzGZmYszMmZmZZkIP/5qE/8zM/wICApmZmf//zP///wAAAAAAAAAAAA

随机推荐

  1. 让你瞬间萌比的35个python小技巧

    今天在看python算法的时候,看到一篇关于python的小技巧.瞬间萌比了,原来python也可以这样玩,太神奇了.萌比的是原来这么简单的东西自己都不知道,虽然会写.废话不多说了,开始上菜. 1.拆 ...

  2. 解决mac下atom安装插件失败问题

    activate-power-mode的超炫编辑效果打动了我,花时间安装了atom,之后在package,install里面找到了这个插件,但是安装失败,如下图所示: gyp info it work ...

  3. iOS 2x 3x

    iOS中: 备注: Retina是一种显示技术,可以将把更多的像素点压缩至一块屏幕里,从而达到更高的分辨率并提高屏幕显示的细腻程度.而其最初该技术是用于苹果的iPhone4上.其屏幕分辨率为960×6 ...

  4. 萝卜德森的sublime笔记中文翻译版

    我已经使用subliem编辑器版本2接近2个月了,并且我在其中找到了一堆有用的技巧.我发觉应该写下这些技巧,为那些对此感兴趣的人们.我会尽力的详细描述,那些看起来像魔法一样的东西,因为很多非常“酷”的 ...

  5. 中文输入法不触发onkeyup事件的解决办法

    当监听一个input的keyup的事件的时候,英文输入法的情况下可以实时的通过keyup事件检测到文本框value的变化,但是当输入法变成中文后,input的keyup事件就不会被正常触发. 方法:o ...

  6. 并查集+bfs+暴力滑窗 Codeforces Round #356 (Div. 2) E

    http://codeforces.com/contest/680/problem/E 题目大意:给你一个n*n的图,然后图上的 . (我们下面都叫做‘点’)表示可以走,X表示不能走,你有如下的操作, ...

  7. jmx additional port

    http://stackoverflow.com/questions/20884353/why-java-opens-3-ports-when-jmx-is-configured http://blo ...

  8. asp的RegExp对象正则表达式功能用法

    RegExp对象提供简单的正则表达式支持功能. RegExp对象的用法: 以下为引用的内容: Function RegExpTest(patrn, strng) Dim regEx, Match, M ...

  9. ssh登录nat模式的VMware虚拟机

    有时候本地PC是固定IP上网方式且无多余IP,而我们又希望使用putty登陆VMware中的虚拟机且虚拟机可以上外网,那么这时候就可以使用端口映射. 1.本地环境简述 本地PC IP:192.168. ...

  10. 求n!末尾0的个数

    题目连接 /* £:离散数学. £:n!中2的个数>5的个数. £:2*5=10: */ #include<cstdio> #include<cstring> #incl ...