慕标5459412
2016-03-25 20:36
按照讲解中的代码,写top:20px;right:100px,就相对右上角
可是写margin-top:20px;margin-right:100px的时候效果就不同了,难道不都是指的外边距吗
你把margin-right改为left后,效果是一样的!不过position更为绝对,它是相对整个父元素定位的,设置后就不能动了,
这个时候你再对它设置margin是没有用的!Do you understand?(margin设置不需要两个box以上,只要它有父元素就可以设置,比如说默认的屏幕就是父元素)
想要使用margin至少要有两个box,而这个演示只有一个box。
我懂了,你是想的是盒子里面的元素距离盒子边框向下移动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。
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
还有很多我也是才学的尽量帮你对于盒子边距的理解我认为边距也是盒子的大小,所以他是属于盒子内部的数据,而做定位是要有参照的是两个元素之间的数据
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)-升级版
1225294 学习 · 18230 问题
相似问题