※ 引述《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/cn.aspx?n=bbs/Web_Design/M.1404654526.A.562.html