首页 新闻 会员 周边

margin-left -100% 如何解释

0
悬赏园豆:5 [已解决问题] 解决于 2009-06-16 14:07
<p style="padding-left: 30px;"><strong><span style="background-color: #ccffff;"><span style="color: #99cc00;">如题</span></span></strong></p>
星星点灯6的主页 星星点灯6 | 初学一级 | 园豆:164
提问于:2009-06-16 13:29
< >
分享
最佳答案
0

margin的基本写法

外边距的margin-width的值类型有:auto | length | percentage

percentage:百分比是由被应用box的containing block(注:一个元素的containing block是该元素产生的box(es)在计算位置和大小时参考的一个矩形,详细阅读可看:《Containing Block》)的大小所决定。对于margin-top和margin-bottom也同样成立。

margin的默认值为0,并且margin支持负值。

上面我们曾提到属性margin可以用来同时指定box的四边外边距。如果属性margin有四个值,那么值将按照上-右-下-左的顺序作用于四边,即从元素的上边开始,按照顺时针的顺序围绕元素。表达式如下:

margin:top right bottom left;

四个数值中间以空格分隔。效果等同于:

margin-top:value;
margin-right:value;
margin-bottom:value;
margin-left:value;

并且规范还提供了省略的数值写法,基本原则如下:

引用:
1.如果没有left值,则使用right代替;
2.如果没有bottom值,则使用top代替;
3.如果没有right值,则使用top值代替。

根据这些基本原则,我们可以有三种省略方式,但不管怎样省略margin的数值都会大于等于一个,而margin的默认数值是从top开始至left结束,那么对于省略的具体情况,我们可以从left反推理回去。

1.如果margin只有三个值,按照值的顺序为margin:top right bottom; 缺少了left,根据原则,则left的值有right来代替。

margin:10px 20px 30px;就等于margin:10px 20px 30px 20px;

2.如果margin只有两个值,按照值的顺序为margin:top right; 缺少了bottom和left,根据原则left的值由right来代替,bottm的值由top来代替。

margin:10px 20px;就等于margin:10px 20px 10px 20px;

3.如果margin只有一个值,按照值的顺序为margin:top; 缺少了bottom、left和right,根据原则left的值由right来代替,bottom的值由top来代替,right的值右top来代替,也就是说left的值也由top来代替。

margin:10px;就等于margin:10px 10px 10px 10px;



给几个例子:

h1 {margin: 10px}顶边距和底边距为10px,左边距和右边距是父元素宽度的2%:
h1 {margin: 10px 2%}顶边距为10px,左边距和右边距是父元素宽度的2%,底边距是-10px:
h1 {margin: 10px 2% -10px}顶边距为10px,右边距是父元素宽度的2%,底边距是-10px,而左边距由浏览器设置:
h1 {margin: 10px 2% -10px auto}
参考
http://blog.csdn.net/lql876381722/archive/2008/03/24/2211860.aspx

所以 margin:-left -100%是否等同于margin:-100% -100% -100% 100%;
楼主可以试试

邀月 | 高人七级 |园豆:25475 | 2009-06-16 13:55
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册