※ 引述《sean72 (.)》之銘言： : 想弄清楚如何將一個方塊放在整個螢幕約略中央的位置(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 : 卻也怎麼也兜不出這個數字 margin 是根據上層容器的寬度來計算的 所以如果是這樣 瀏覽器寬 1000px A外框 寬 = 800px B內框 寬 = 500px (在A裡面) B設定 margin 18% 就是 800的18% = 144px; : 2. : CSS border 和 outline有什麼不同? : http://www.jaceju.net/blog/archives/9/ : 這篇網誌提到 : body / html 會設定成 margin 0 : 使得頁面內容和瀏覽器邊緣間沒有空隙 : 我將div刪掉 : body空無一物的時候，我的body是一條貼著瀏覽器左&上的藍色線 : (這邊都能理解) : 若我將 body css裡面的border刪除 : outline左右還是貼著瀏覽器，但為何上下卻是貼著box? 我看不懂你上下左右貼著是啥意思 總之 border 跟 outline 在寫法用法跟顯示上都差不多 唯一的差別就在於 outline是不占空間的 所以假設有一個 div 高是100px 加了 border 1px後 高就會變成102px 這邊有一篇 border 跟 outline的說明 http://stackoverflow.com/questions/1158515 : 3. : http://www.jaceju.net/blog/archives/17/ : 這篇文章提到 : margin可以以下兩種狀況解釋： : 「元素與相鄰元素的距離」及「元素與父元素間的距離」 : 我參考了google 新增分頁的source code : http://imgur.com/yo6w6yI : 他將margin設為 margin-top 0cm; : 這應該就是「元素與相鄰元素的距離」的示例吧? : 但我如何知道我設定的margin是屬於哪種關係? 你為何需要知道是屬於哪種關係呢??? 妳只要知道 margin就是設定間距的就可以了 如果你想知道 如果 A元素上方沒有其他元素 那你設定 margin-top 就是與父元素的距離 如果 區塊是 A B C 排下來 那在B設定 margin-top 就是與相鄰元素的距離 而通常來說 div 是一個 block 所以 width跟父元素的寬度應該是相等的 所以設定 margin-left 或是 right 都是跟父元素的距離 : 4. : google新分頁的的做法就是從最上面的nav bar往下 : 用block一層一層疊起來，直到search bar : 還是我不要自找麻煩，直接將這例子抄起來? 看不懂 : 5. : 從google新分頁的例子推測 : 製作網頁view的概念 : 應該比較類似 Word: 若我製作封面 要在整張A4中間寫上標題 : 我應該要按很多Enter，塞入空白行，將游標下移 : 而不是類似小畫家or PowerPoint : 在滑鼠直接點在頁面中央然後拉出一個方塊 : 是這樣嗎? : 感謝 網頁本來就是從上而下堆疊起來的 被切出的區塊會優先往左往上堆疊 要像小畫家一樣拉出一個區塊也是可以 不過這種做法並無法適應於所有的裝置 因為直接定位區塊需要設定他的"位置" --- 看完後覺得 你應該要多試驗一下各種區塊的感覺 才比較能明白HTML是怎麼運作的 --

※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 36.232.113.200 ※ 文章網址: http://webptt.com/m.aspx?n=bbs/Web_Design/M.1404654526.A.562.html