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边界叠加深度剖析 边界叠加简 ...
随机推荐
- 注解:【有连接表的】Hibernate单向1->N关联
Person与Address关联:单向1->N,[有连接表的] Person.java package org.crazyit.app.domain; import java.util.Hash ...
- 我的 Unity2D 屏幕适配
以下方法纯属我YY,切勿当真!!! 确定一个设计尺寸,比如 devWidth = 960,devHeight = 640, 按照这个尺寸进行设计游戏. 方式一: 不管什么屏幕尺寸,都和设计的尺寸对应. ...
- 【SSH】 之 Struts2
(一)Struts2是什么? Struts2是一个基于MVC设计模式的Web应用框架,它本质上相当于一个servlet,在MVC设计模式中,Struts2作为控制器(Controller)来建立模型与 ...
- PC端重置
-PC 一,meta <!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta cha ...
- JavaScript案例一:Window弹窗案例
注:火狐可运行,谷歌不可运行(安全级别高) <!DOCTYPE html> <html> <head> <title>JavaScript 弹窗案例&l ...
- 【criteria CascadeType】级联的不同情况
使用criteria进行增删改查操作,可能会发生级联删除的情况,例如对员工表进行删除,可能会级联删除掉部门表中的某一条信息[类似这样的情况] 对此,我们可以在实体类中对级联的关系进行管理: 对于cri ...
- MatLab有关路径的几个命令
窗外雨如注,国庆的第3天,没钱出去逛,更新我的博客吧 今天要说的命令有path.cd.userpath.savepath.pathtool 有两种改变启动目录的方法,第1种使用userpath和sav ...
- 分享Kali Linux 2016.2第41周镜像虚拟机
分享Kali Linux 2016.2第41周镜像虚拟机该虚拟机使用Kali Linux 2016.2第41周镜像文件安装而成,系统已经更新到10月12日.里面已经进行如下配置:(1)设置官方软件源( ...
- 为什么网页通常把JS调用放在底部?
JS是单线程,浏览器是多线程.当我们在浏览器的地址栏里输入一个url地址,访问新页面时,页面展示的快慢是由一个单线程控制,这个线程叫做UI线程.UI线程会根据页面里资源(资源是html文件.图片.cs ...
- 同步、更新、下载Android Source & SDK from 国内镜像站
转自: 同步.更新.下载Android Source & SDK from 国内镜像站 Download the android source from china mirrors 以 ...