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

来源:13-6 万事无绝对 -层模型之绝对定位

慕标5459412

2016-03-25 20:36

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

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

写回答 关注

5回答

  • 暗物质inu
    2016-03-25 20:58:38
    已采纳
    margin-top 属性设置元素的上外边距
    当css样式为绝对定位(position:absolute; )时top 属性可以指定与其最近一个具有定位设置的父对象顶边的位置

    慕标5459...

    非常感谢!

    2016-05-05 17:15:28

    共 1 条回复 >

  • 放课后的下午茶
    2016-03-30 11:03:13

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

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

  • 木木夕2
    2016-03-28 11:59:48

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

  • qq_面具下的悲哀面_0
    2016-03-25 21:27:47

    我懂了,你是想的是盒子里面的元素距离盒子边框向下移动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。

  • 慕沐7006661
    2016-03-25 20:59:53

    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。


初识HTML(5)+CSS(3)-升级版

HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义

1223116 学习 · 18212 问题

查看课程

相似问题