※ 引述《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://www.ptt.cc/bbs/Web_Design/M.1404654526.A.562.html