想弄清楚如何将一个方块放在整个萤幕约略中央的位置(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
在鼠标直接点在页面中央然后拉出一个方块
是这样吗?
感谢