css中margin-left与left的区别
研究下拉菜单和弹出菜单时比较所得:
1.直接在css中设置left生效的前提是必须设置父容器position:absolute或relative,如果不设置则会显示为最近一个定位的父对象左边相关的位置:
测试代码:
- <div style="position:relative;top:100px;left:100px;border:1px solid blue;width:100px;height:100px;">
- <div id="outer" style="position:relative;margin-top:25px;margin-left:25px;width:50px;height:50px;border:1px solid red;">
- <div id="inner" style="position:absolute;left:15px;top:15px;width:25px;height:25px;border:1px solid green;"></div>
- </div>
- </div>
<div style="position:relative;top:100px;left:100px;border:1px solid blue;width:100px;height:100px;">
<div id="outer" style="position:relative;margin-top:25px;margin-left:25px;width:50px;height:50px;border:1px solid red;">
<div id="inner" style="position:absolute;left:15px;top:15px;width:25px;height:25px;border:1px solid green;"></div>
</div>
</div>
测试效果:
不设置红线框的position,设置蓝线框的position,绿线框的位置:
设置红线框的position,设置蓝线框的position,绿线框的位置:
2.设置margin-left则只会出现在父对象的左边的相对位置,不考虑是否设置了position。
测试代码:
- <div style="position:relative;top:100px;left:100px;border:1px solid blue;width:100px;height:100px;">
- <div id="outer" style="position:relative;margin-top:25px;margin-left:25px;width:50px;height:50px;border:1px solid red;">
- <div id="inner" style="position:absolute;margin-left:15px;margin-top:15px;width:25px;height:25px;border:1px solid green;"></div>
- </div>
- </div>
<div style="position:relative;top:100px;left:100px;border:1px solid blue;width:100px;height:100px;">
<div id="outer" style="position:relative;margin-top:25px;margin-left:25px;width:50px;height:50px;border:1px solid red;">
<div id="inner" style="position:absolute;margin-left:15px;margin-top:15px;width:25px;height:25px;border:1px solid green;"></div>
</div>
</div>
不设置红线框的position,设置蓝线框的position,绿线框的位置:
设置红线框的position,设置蓝线框的position,绿线框的位置:
3.设置margin-right无法起到将element定位到右边相距XX位置,但设置right可以。
测试代码:
<div style="position:relative;width:98px;height:63px;background-image:url('images/pic.png');margin-left:100px;margin-top:300px;">
<img src="data:images/delete.gif" style="position:absolute;top:-10px;right:-5px;"/>
</div>
测试效果:
设置margin-right
设置right
css中margin-left与left的区别的更多相关文章
- CSS中margin和padding的区别
在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离.在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离. 下面讲解 padding和ma ...
- css中zoom和transform:scale的区别
css中zoom和transform:scale的区别 关于zoom: 以前只是看到别人的代码中用过zoom,自己从未使用过,今天在探究ie7兼容inline-block时,发现里面提到了zoom.下 ...
- CSS中margin边界叠加问题及解决方案(转)
边界叠加简介 边界叠加是一个相当简单的概念.但是,在实践中对网页进行布局时,它会造成许多混淆.简单地说,当两个垂直边界相遇时,它们将形成一个边界.这个边界的高度等于两个发生叠加的边界的高度中的较大者. ...
- CSS中margin属性
css中margin块级元素的垂直相邻外边距会合并,比如 方框的上下外边距并不是2px,而是合并为1px了. 设置float属性就可以避免这种同级元素边距合并
- 使用CSS中margin和padding的基础和注意事项
在CSS中,margin和padding是页面布局的主要属性,如何灵活有效使用对于基于DIV+CSS设计网页方法是非常重要的,笔者经常使用且经常误使用,所以根据经验和网上资料整理出切合自己的内容,以备 ...
- css中单位em和rem的区别
在css中单位长度用的最多的是px.em.rem,这三个的区别是: px是固定的像素,一旦设置了就无法因为适应页面大小而改变. em和rem相对于px更具有灵活性,他们是相对长度单位,意思是长度不是定 ...
- 彻底弄懂css中单位px和em的区别(转)
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em,那么两者有什么区别,又各自有什么优劣呢? 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了e ...
- css中margin:0 auto没作用
很多初学制作网页的朋友,可能会遇到的一个常见问题,就是在CSS中加了margin:0 auto;却没有效果,不能居中的问题!margin:0 auto;的意思就是:上下边界为0,左右根据宽度自适应!其 ...
- css中px,em,rem,rpx的区别
今天看到一个面试题为 px,em的区别,为了更好地让读者区分css的长度单位,我总结下css中常用的长度单位: px,em,rem,rpx 像素px是我们在定义CSS中经常用到的尺寸大小单位,而em在 ...
- CSS中margin边界叠加问题及解决方案
你对CSS的margin边界叠加的概念是否了解,这里和大家分享一下,当一个元素出现在另一个元素上面时,第一个元素的底边界与第二个元素的顶边界发生叠加. CSS的margin边界叠加深度剖析 边界叠加简 ...
随机推荐
- 第一个vs2013控制台程序
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- js String对象
字符串(String) 字符串(String)使用长度属性length来计算字符串的长度: 在字符串中查找字符串 字符串使用 indexOf() 来定位字符串中某一个指定的字符首次出现的位置: 实例 ...
- js的一些小笔记,(不定期更新)
2个$的用法$本身并无特定意义,它表示什么意思要看是如何定义的,如果没有定义就便是两个$,可能是变量名的开始.一般是一个函数,用来代替document.getElementByIdfunction $ ...
- 【面试题】BD
一面: 自我介绍,简单介绍项目: /***********发现项目没什么可问的,然后开始各种基础知识o(╯□╰)o************/ 内存结构,低地址,高地址: STL底层实现,set是否有序 ...
- ural 2073. Log Files
2073. Log Files Time limit: 1.0 secondMemory limit: 64 MB Nikolay has decided to become the best pro ...
- aspx与ashx
ashx在VS的中文版是新建“一般处理程序”,其实是一个实现类System.Web.IHttpHandler接口的类.而任何一个实现了IHttpHandler接口的类都能作为一个外部请求的目标程序.H ...
- BZOJ4444 : [Scoi2015]国旗计划
首先将坐标离散化,因为区间互不包含,可以理解为对于每个起点输出最少需要多少个战士. 将环倍长,破环成链,设$f[i]$表示区间左端点不超过$i$时右端点的最大值,可以通过$O(n)$递推求出. 那么如 ...
- flexbox布局的兼容性
http://ayqy.net/blog/flexbox布局的兼容性/ 写在前面 flex布局早在2009年就有了,而现在是2015年6月8日,使用最新的flex语法会发现支持程度并不好,即使是在“高 ...
- BZOJ 3170 & 切比雪夫距离
题意: 给出N个点,在这N个点中选一个点使其它的点与这个点的切比雪夫距离和最小. SOL: TJOI真是...厚道还是防水...这种题目如果知道切比雪夫距离是什么那不就是傻逼题...如果不知道那不就懵 ...
- ACM Longest Repeated Sequence
Description You are given a sequence of integers, A = a1, a2, ... an. A consecutive subsequence of A ...