我想多了解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)?
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卻沒有改變?
感謝
ps1.
其實我亂試了很多 也有很多奇怪的問題
也許從這個最基本的下手我能慢慢釐清
ps2.
使用bootstrap真的很方便
container / nav bar等等都幫我做好了
頂多開一個自己的project.css去設定一些小參數即可
例如將navbar加了一個btn
我再設定一下margin-left/right就可以標出我視覺上大概要的位置
但是當我自己從scratch開始 卻覺得那些定義非常混亂