为了账号安全,请及时绑定邮箱和手机立即绑定

之所以margin-left为负可以使元素向左移动是不是因为负的margin-left增大了margin-right?

之所以margin-left为负可以使元素向左移动是不是因为负的margin-left增大了margin-right?

幕布斯7119047 2019-04-08 11:17:49
margin-left:-100px;可以使元素向左移动100px,原因是不是因为margin-left+border-left+padding-left+width+padding-right+border-right+margin-right为定值,margin-left减了100使得margin-right增了100而引起了左移?看了回答,明白不是这个原因了,那到底是什么原理使得负margin会引起移动呢?
查看完整描述

2 回答

?
蝴蝶不菲

TA贡献1810条经验 获得超4个赞

margin-left/margin-right/margin-top/margin-bottom的值是否影响定位,跟如下CSS属性有关系:
writing-mode/unicode-bidi/direction
float:left/float:right
position:absolute/position:fixed定位&left/top&right/bottom属性
text-align也会影响到行内元素的左右margin
在以上特例之外,最常见的的文档排版方向是:
块级元素从上到下
行内元素从左到右
想象一下,这个排版方向可以感性理解为盒子的堆叠方向……堆叠盒子的方向是从左向右的时候,盒子是一个一个从最左侧往右放的,基于左侧的位移(margin-left)可以生效,基于右侧的位移(margin-right)不能生效,因为要知道盒子的位置,你得看在你左边的盒子的厚度。懂了吗?
因此,在正常情形下,margin-left是可以影响到元素的偏移量的。
LZ对布局的理解非常诡谲……我建议LZ先完成:
对W3school的css布局相关内容的学习
从旧往新,读完CSS探索之旅:margin系列的文章
                            
查看完整回答
反对 回复 2019-04-08
?
手掌心

TA贡献1942条经验 获得超3个赞

不不不,不是这么做的,这只不过是影响了盒模型的一边而已,和右边没关系的
用firebug等能够高亮显示盒模型的工具,自己调一下属性能有很明确的理解
负margin引起移动是因为这个东西的对齐是以左方向为基准的。如果你对一个float:right;width:100px;的盒子去修改margin-left,我看一般都不会发生什么移动的效果。
                            
查看完整回答
反对 回复 2019-04-08
  • 2 回答
  • 0 关注
  • 318 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信