marginleft,margin left用法
margin-left这个属性有绝对定位吗?
margin-left,position都是属性,可以同时使用,跟绝对定位的left不冲突!看下图就明白了
简单的代码如下:可以自己设置运行看看:
head
STYLE
.A{background-color:red;float:left;height:100px; width:200px;border:1px solid red;line-height:30px;text-
align:center;position:relative;}
.B{float:left;height:30px; width:200px;border:1px solid red;line-height:30px;text-align:center;position:absolute;top:20px;margin-left:50px;}
.on{background-color:yellow;}
/STYLE
script src=""/script
script
$(function(){
$(".A").hover(function(){
$(".B").toggleClass("on");
});
});
/script
/head
body
div ?class="A"
div ?class="B"B/div
/div
margin left是什么意思
margin left
左边界;左外补丁;左边距属性
双语例句
1
Customer default risks are still high, credit insurance companies have cut back on coverage, and businesses have little or no margin left to absorb credit losses.
客户不能付款的风险仍然很高,信用保险公司已经缩减投保范围,商业资本已经没有多少多余来应对信用损失了。
margin left和left区别
left生效的前提是必须设置父容器position:absolute或relative,如果不设置则会显示为最近一个定位的父对象左边相关的位置,
margin-left则只会出现在父对象的左边的相对位置,不考虑是否设置了position
css中left与margin-left和position:relative与position:absolute的区别
主要区别可以总结为:
1、left指令要生效,必须其有position:relative或者position:absolute的定位才能执行;margin-left则不需要。
2、position:relative 只能定位在当前位置,受其父div位置的控制;position:absolute可以使div脱离文档源,位置由上一个有定位的祖div控制。
为了方便观察,我把背景颜色换了,然后把系统自带的内边距外边距都取消了)
具体输入*{background-color: #eee;?margin: 0px;?padding: 0px;}
1.1 生成一个div,输入{border: 1px red solid;? height: 200px;? width: 200px;? left: 50px; } 其效果图为:
这时候输入了left=200px,但是div并没有移动,这是由于他没有被定位,所以left指令无法实行。
1.2 但是如果对这个div进行相对定位或者绝对定位,那么它会定位在他所出现的位置,然后对left或top的指令再进行移动。这次我们把position:absolute/relative 加上,输入{border: 1px red solid;??height: 200px;?width: 200px;?left: 50px; position:relative; },其效果图为:
这时候他就会先根据他一开始的定位发生移动,left的指令就生效了。
1.3 接下来,把left指令,换为margin-left,把position的指令删除,输入{border: 1px red solid;??height: 200px;?width: 200px; margin-left: 50px; },其效果图为:
这时候它就往右边移动了50px,也就是距离左边距50px。可以得出其指令并不需要position位,它直接规定边距的距离。
1.4 最后我们把position;left;margin-left都加上,输入{border: 1px red solid;??height: 200px;?width: 200px;?left: 50px; position:relative;margin-left: 50px; }, 其效果图为:
这时候两个指令都生效了。首先margin-left:50px, 先让这个div距离左边距50px,然后position:relative;的指令使div定位在这个位置,最后left:50px;的指令,使div再距离所定位的位置50px,所以一共离左边距100px。
创建以下三个div:
div id="father"
? ? ? ? div id="son"
? ? ? ? ? ? div id="grandson"/div
? ? ? ? /div
? ? /div
1、在style分别输入
#father{border: 1px red solid;??height: 200px;?width: 200px;?left: 100px; position:relative; }
#son{border: 1px black solid;??height: 100px;?width: 100px; margin-left: 200px;? }
#grandson{border: 1px blue solid;??height: 50px;?width: 50px; left:50px;?position:relative;?}
其效果图为:
这时候#son并没有position,但是#grandson的position为relative,所以他只能对当前的定位(由于他是father与son的子文件,所以会跟他们进行相关的位移后,再实施它自己的指令进行位移,所以一开始的定位应该在黑色框内的右上角)进行位移。
2、保持其他参数不变,然后把#grandson的position:relative 给为position:absolute,具体为:
#father{border: 1px red solid;??height: 200px;?width: 200px;?left: 100px; position:relative; }
#son{border: 1px black solid;??height: 100px;?width: 100px; margin-left: 200px;? }
#grandson{border: 1px blue solid;??height: 50px;?width: 50px; left:50px;?position:absolute }
其效果图为:
此时,由于#grandson的position为absolute,即脱离文本源,就是他不会受没有定位的父div的影响,就是说其定位会忽略没有position定位的div,而直接找到最近一个有定位的祖div,再进行定位,所以它直接找到的是#father的定位,然后想对它定位后再进行left=50px的指令。
3. 要证明这一点很简单,我们再给#grandson生一个子div id="ggson"
这时候布局如图:
在style输入:
#father{border: 1px red solid;??height: 200px;?width: 200px;?left: 100px; position:relative; }
#son{border: 1px black solid;??height: 100px;?width: 100px; margin-left: 200px;? }
#grandson{border: 1px blue solid;??height: 50px;?width: 50px; left:50px;?position:absolute }
#ggson{border: 1px green solid;??height: 25px;?width: 25px; left:10px;?position:absolute}
其效果图为:
#ggs的定位追踪到#grandson上,所以在其定位上做出left=10px的指令。
这时候我们在吧#grandson的position给删掉,输入:
#father{border: 1px red solid;??height: 200px;?width: 200px;?left: 100px; position:relative; }
#son{border: 1px black solid;??height: 100px;?width: 100px; margin-left: 200px;? }
#grandson{border: 1px blue solid;??height: 50px;?width: 50px; left:50px; }
#ggson{border: 1px green solid;??height: 25px;?width: 25px; left:10px;?position:absolute}
这时的效果图为:
由于#son与#grandson上面都没有position的定位了,所以#ggson只能定位到father的position上面。
最后我们再把#ggson的position:absolute改为relative,输入:
#father{border: 1px red solid;??height: 200px;?width: 200px;?left: 100px; position:relative; }
#son{border: 1px black solid;??height: 100px;?width: 100px; margin-left: 200px;? }
#grandson{border: 1px blue solid;??height: 50px;?width: 50px; left:50px; }
#ggson{border: 1px green solid;??height: 25px;?width: 25px; left:10px;?position:relative;}
其效果图为:
这时候他就不会找祖div的position,其定位只接受其父div控制,只能定位在所在的位置。
margin-left 是啥意思
margin-left
左边距
左外补丁
左边距属性
左外边距
短语
margin-left auto 自动调整空隙
margin-left marginLeft 设置或获取
CSS margin-left 属性
相关例句:
1.
Many users have trouble visualizing what a 1.2-inch left margin looks like; the Preview control showsthem.
很多人都难以想像1.2英寸的左边距 到底 有多大,这个打印预览的功能很好地将它展现出来。
2.
You then set a breakpoint by clicking in the gutter in the left-hand margin and launch the applicationusing the debugger.
然后,在左边的空白处点击以设置断点,并使用调试器启动应用程序。
3.
In this case, I had to set the left margin to 6-characters wide to accommodate the tics in scientificnotation for cosec(x) = 1/sin(x).
在本例中,我必须将左边距设置为 6 个字符宽度,以便调整 cosec(x) = 1/sin(x) 的科学记数法中的 tics。