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

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

慕标5459412

2016-03-25 20:36

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

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

写回答 关注

6回答

  • 暗物质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。

  • qq_面具下的悲哀面_0
    2016-03-25 21:17:59

    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

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

  • 慕沐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小时带领大家步步深入学习标签用法和意义

1225294 学习 · 18230 问题

查看课程

相似问题