※ 引述《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
: 在鼠标直接点在页面中央然后拉出一个方块
: 是这样吗?
: 感谢
网页本来就是从上而下堆叠起来的
被切出的区块会优先往左往上堆叠
要像小画家一样拉出一个区块也是可以
不过这种做法并无法适应于所有的装置
因为直接定位区块需要设定他的"位置"