Re: [問題] css positioning

看板Web_Design作者sean72 (.)時間11年前 (2014/07/08 14:19)推噓4(4推 0噓 5→)

留言9則, 5人參與討論串3/3 (看更多)

※ 引述《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://www.ptt.cc/bbs/Web_Design/M.1404800340.A.ACD.html ※ 編輯: sean72 (76.169.48.217), 07/08/2014 14:21:16

推

Luos

07/08 17:34, , 1^F

07/08 17:34, 1^F

→

Rplus

07/09 01:55, , 2^F

07/09 01:55, 2^F

推

07/09 02:07, , 3^F

07/09 02:07, 3^F

→