margin不大理解啊？求教

Question

任务1：请在右侧编辑器中补全代码，实现页面自动居中布局，要求#wrap顶部和底部与浏览器无间距；

任务2：请在右侧编辑器中补全代码，使用浮动实现#left和#mid横向两列排版，并且两者之间有13px间距;

任务3：请在右侧编辑器中补全代码，使用position定位方法实现#right的自适应宽度横向排版，且它与#mid之间的间距为17px。

#wrap{width:970px; margin:0 auto;}

#mainbody{position:relative; margin-top:15px;}

#left{float:left;left:0;top:0;width:110px; }

#mid{float:left;margin-left:13px;top:0;width:650px;border:1px solid #999;}

#right{position:absolute；top:0;;left:790px;border:1px solid #999;}

1.为什么中间和左边只要间距13px?右边和左边要间距790px?中间和左边不应该是123px 吗？

2.还有加粗的{top：0px;}起到了什么作用？  为什么没有这一句我的右边和中间就没有间距了（已经写了margin-left:760）

3.margin的距离是相对于什么的距离？

4.left 浮动了 mid 要不要浮动？

Answer 1

可以利用浏览器的调试工具查看一下盒子模型，点击一个元素就能看到他的margin/padding等，可以在浏览器中直接改代码进行调试，我也不太懂，简单说一下1、margin-left是该元素和外界的距离，不是位置，你说的123我觉得是left等于123，但不会是margin-left,利用浏览器调试一下就会知道了2、top:0是绝对定位吧3、margin就是外边距4、我觉得不用浮动了吧本人水平也不高，但是感觉你还不会用浏览器的调试工具，学会用它，会理解的更快