想弄清楚如何將一個方塊放在整個螢幕約略中央的位置(ex: google search bar)
所以產生了很多混雜的問題 尋求版友能幫忙釐清我的盲點
我的螢幕解析度為1920 x 1080
程式
http://0rz.tw/S0GjN
1.
網路上找到 css 寫法 margin: 0 auto;
這樣的確能將一個方塊左右 auto 對齊置中
但是卻沒提到該如何調整上下
我胡亂的放了個參數調整上下距離 例如 margin: 18% auto;
但是卻不清楚那個18%是 誰相對於誰的 18%?
http://www.w3schools.com/css/css_margin.asp
w3school 也只有簡略的說
%
Specifies a margin in percent of the width of the containing element
按照字面翻譯
margin = element width x %
所以當我將box width設定為200px
那麼我的margin-top/margin-bottom 就是 200*18% = 36px (正確嗎?)
可是這36px上下位移又是相對於誰的位置去調整?
我加了一段javascript計算body和box的height
卻也怎麼也兜不出這個數字
2.
CSS border 和 outline有什麼不同?
http://www.jaceju.net/blog/archives/9/
這篇網誌提到
body / html 會設定成 margin 0
使得頁面內容和瀏覽器邊緣間沒有空隙
我將div刪掉
body空無一物的時候，我的body是一條貼著瀏覽器左&上的藍色線
(這邊都能理解)
若我將 body css裡面的border刪除
outline左右還是貼著瀏覽器，但為何上下卻是貼著box?
3.
http://www.jaceju.net/blog/archives/17/
這篇文章提到
margin可以以下兩種狀況解釋：
「元素與相鄰元素的距離」及「元素與父元素間的距離」
我參考了google 新增分頁的source code
http://imgur.com/yo6w6yI
他將margin設為 margin-top 0cm;
這應該就是「元素與相鄰元素的距離」的示例吧?
但我如何知道我設定的margin是屬於哪種關係?
4.
google新分頁的的做法就是從最上面的nav bar往下
用block一層一層疊起來，直到search bar
還是我不要自找麻煩，直接將這例子抄起來?
5.
從google新分頁的例子推測
製作網頁view的概念
應該比較類似 Word: 若我製作封面 要在整張A4中間寫上標題
我應該要按很多Enter，塞入空白行，將游標下移
而不是類似小畫家or PowerPoint
在滑鼠直接點在頁面中央然後拉出一個方塊
是這樣嗎?
感謝