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

为什么添加margin的效果不一样了

按照讲解中的代码,写top:20px;right:100px,就相对右上角

可是写margin-top:20px;margin-right:100px的时候效果就不同了,难道不都是指的外边距吗

正在回答

6 回答

margin-top 属性设置元素的上外边距
当css样式为绝对定位(position:absolute; )时top 属性可以指定与其最近一个具有定位设置的父对象顶边的位置
0 回复 有任何疑惑可以回复我~
#1

慕标5459412 提问者

非常感谢!
2016-05-05 回复 有任何疑惑可以回复我~

你把margin-right改为left后,效果是一样的!不过position更为绝对,它是相对整个父元素定位的,设置后就不能动了,

这个时候你再对它设置margin是没有用的!Do you understand?(margin设置不需要两个box以上,只要它有父元素就可以设置,比如说默认的屏幕就是父元素)

0 回复 有任何疑惑可以回复我~

想要使用margin至少要有两个box,而这个演示只有一个box。

0 回复 有任何疑惑可以回复我~

我懂了,你是想的是盒子里面的元素距离盒子边框向下移动20PX;向左移动100px;你用我给你的方法1,相当于box2属于盒子box1的内部元素。你想想看盒子的宽度=margin-left+border+padding-left+内部元素宽度+padding-right+border+margin-right。你再看看呢。懂没有,你要算的是top=20px=margin-top+border+padding-top right=100px=margin-right+border+padding-right。

0 回复 有任何疑惑可以回复我~

margin-top和margin-right指定盒子模型的上边距和右边距;假如你要做到相对右上角向下移动20px并向左移动100px

方法1:#box1{border:red ;height:500px ;weight:500px; position:abualte:relative}#box2{border:red heigt:200px;weight:200px position:absolute;top:20px;right:100px;}/*id为box2的盒子相对于id为box1的盒子绝对定位相对于box1盒子向下移动20px;向左移动100px*/后面的你懂得撒。

方法2:div{border:red ;position:fixed;top:20px;right:100px}/*设定div元素距离屏幕右边100px上边20px

还有很多我也是才学的尽量帮你对于盒子边距的理解我认为边距也是盒子的大小,所以他是属于盒子内部的数据,而做定位是要有参照的是两个元素之间的数据

0 回复 有任何疑惑可以回复我~

margin的顺序是上、右、下、左

margin:20px;”表示四个方向的外边距都是20px;

margin:20px 40px;”表示margin-top和margin-bottom为20px,margin-right和margin-left为40px。

margin:20px 40px 60px 80px;”表示margin-top为20px,margin-right为40px,margin-bottom为60px,margin-left为80px。


0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

为什么添加margin的效果不一样了

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信