作者sean72 (.)
看板Web_Design
標題Re: [問題] css positioning
時間Tue Jul 8 14:18:53 2014
※ 引述《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:Css的世界是充滿奧妙的 07/08 17:34
→ Rplus:margin-top 的關係 07/09 01:55
推 No:關鍵字是 Collapsing margins 07/09 02:07
→ No:當parent沒有設定padding或border，而child有設定垂直margin時 07/09 02:09
→ No:child的垂直margin會套用到parent去 07/09 02:09
推 No:更正: 垂直margin -> margin-top 07/09 02:18
→ fire231: 2. > 你可以這樣想沒錯，所以就是擺放餐具。 07/09 02:56
推 leochen0818:基本上，我個人是把網頁看成一個方形的盒子，任何元 07/11 17:46
→ leochen0818:素都是 07/11 17:47