作者sean72 (.)
看板Web_Design
标题[问题] margin/置中/border/outline
时间Sun Jul 6 15:44:02 2014
想弄清楚如何将一个方块放在整个萤幕约略中央的位置(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
在滑鼠直接点在页面中央然後拉出一个方块
是这样吗?
感谢
--
※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 76.169.48.217
※ 文章网址: http://webptt.com/cn.aspx?n=bbs/Web_Design/M.1404632646.A.AE5.html
※ 编辑: sean72 (76.169.48.217), 07/06/2014 15:49:19
1F:推 hit1205:至於第二题问 "贴着box",指的是你又把 box 放回去了吗 @@ 07/06 16:37
2F:→ oj113068:margin的%是根据父元件的宽度计算没错啊。 07/06 16:54
3F:→ oj113068:位移也是根据父元件或邻接元件 07/06 16:55