※ 引述《fire231 (Bloodmors)》之铭言： : ※ 引述《sean72 (.)》之铭言： : : 我想多了解positioning : : 做了下面的小实验 : : http://jsbin.com/cevukote/1/edit?html,css,console,output : : body里面包了一个d1方块 : : <body id="bdy"> : : <div id="d1"> 100px x 100px : : position defaul static : : 用outline描边 : : 最初状态 : : bdy height = d1.height : : bdy width = screen width : : 1. : : 为何最初状态 : : d1 (d1.left, d1.top) = (8,8)? : 因为你的 bdy 不知道为什麽自带有 margin 8px : 所以位置就不会是 0 0 : 你可以设定 margin 0px就知道了 : : 2. : : d1加入 : : margin-left: 20px; : : margin-top: 20px; : : d1 (d1.left, d1.top) = (28,20)? : : bdy (bdy.left, bdy.top) = (8,20)? : : a.(28,20)这两个数字怎麽出现的? : : b.为何bdy也跟着下移了20px? : : c.此处margin改变应该是相对於父元素(bdy) : : 为何只有d1.left相对於bdy移动了20px : : d1.top却没有改变? : : 感谢 : 我不知道你怎麽加入的 : 总之我加入是没这个问题 : http://jsbin.com/cevukote/4/edit 因为我用 outline描边 http://ppt.cc/Sdut outline不占任何px，我以为是一个比border更简单的css property 所以我用outline描边 其实这也是我本来接着想问的问题 (但我想先将影响问题的因子缩到最少) 为什麽border / outline会造成如此差异? 我用outline描边和border描边，最後的结果应该只有差在border的px才对吧? 这边将问题简化成:只有一个<div>和body 将border , outline 从d1 和 bdy中都去除 http://jsbin.com/cevukote/8/edit?html,css,js,console,output 只看Javascript回传的offset.top offset.left 如同版友所言 #bdy {margin:0;}之後 d1初始时候，就不会有8px的问题 但是 1. 加入margin-top / margin-left #d1{ width: 100px; height: 100px; background: blue; margin-top: 20px; margin-left: 20px; } d1 (offset.left , offset.top) = (20 , 20) ....(good) bdy(offset.left , offset.top) = (0 , 20) ....(WHY?) body从头到尾没有移动过 为何会从(0,0)变成(0,20)? 为什麽只有top往下移动了20px，left却没有改变呢? 2. 例如bootstrap也在css中设定body margin:0; 所以这个观念应是该暗示说: <body> element本身也是一个大方块 像是桌巾一样盖着整张桌子一样 body涵盖的面积是整个页面 而其他所有<div> <p> <h>等element则像是桌巾上的餐盘餐具 我这样的想法对吗? 感谢 --

※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 76.169.48.217 ※ 文章网址: http://webptt.com/cn.aspx?n=bbs/Web_Design/M.1404800340.A.ACD.html ※ 编辑: sean72 (76.169.48.217), 07/08/2014 14:21:16