博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS中关于margin的理解误区
阅读量:7093 次
发布时间:2019-06-28

本文共 616 字,大约阅读时间需要 2 分钟。

思考一

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

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

举个例子:

    
Red
Green

其表现为:

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

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

Green是没有移动的!

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

思考二

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

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

    
Red
Green

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

第一种情况:margin-left

 

第二种情况:position+left

 

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

转载于:https://www.cnblogs.com/LiuChunfu/p/5140124.html

你可能感兴趣的文章
MYSQL的存储过程和函数简单写法
查看>>
acdream1197 Points In Cuboid
查看>>
topcoder srm 390 div1
查看>>
无法远程链接sqlserver的解决办法
查看>>
WinRT比.NET快了,还是Win8比Win7快
查看>>
SecureCRT 字体 颜色 修改 背景色 键盘映射 Home end delete
查看>>
【内核】Linux 2.6 内存反向映射机制 Reverse Mapping
查看>>
jQuery实现删除option控件下的元素
查看>>
Qt中translate、tr关系 与中文问题
查看>>
反射的两个过滤枚举
查看>>
Android编程之常识 - 混淆
查看>>
源码分析六(org.springframework.util包之Assert类)
查看>>
源码分析八(org.springframework.util包之StringUtils类))
查看>>
#include<> 和 #include""的区别
查看>>
【转】最近很火的 Safe Area 到底是什么
查看>>
java EE 环境配置(JDK + Tomcat + Eclipse for java EE)
查看>>
【转】【Python】Python正则表达式使用指导
查看>>
c#去掉guid中间的横杆
查看>>
使用Data Annotations进行手动数据验证
查看>>
php 禁止 URL 直接访问 php文件
查看>>