作者ilovekebi ()
看板Web_Design
标题Re: [问题] margin/置中/border/outline
时间Sun Jul 6 16:09:21 2014
div {
width:200px;
height:200px;
background-color:black;
position:fixed;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-100px;
}
我都是这样写萤幕置中效果，例如 PopOut.
设定 position:fixed，再用 top 与 left 把div推到正中间
margin-top:设为div宽度一半的负值
margin-width:设为div高度一半的负值
这样便可将 div 推回来，将原点设置於 div 上下垂直的中心点
--
※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 119.77.220.48
※ 文章网址: http://webptt.com/cn.aspx?n=bbs/Web_Design/M.1404634165.A.D6D.html
※ 编辑: ilovekebi (119.77.220.48), 07/06/2014 16:10:38
1F：→ banjmin:这样写PopOut 不是没有RWD吗? 如果要 要怎麽写? 07/06 16:14
2F：→ sean72:同楼上 我也在烦恼不同萤幕大小/浏览器缩放之後该怎办 07/06 16:19
3F：→ sean72:所以才想用百分比%的方式 07/06 16:20
4F：→ sean72:使用google分页block堆叠的方式，当浏览器变扁的时候 07/06 16:22
5F：推 hit1205:原po之所以兜不起来，是因为高度用百分比时并不是用 07/06 16:22
6F：→ sean72:search bar就会被吃掉了。还是说一般业界也只强调左右伸缩 07/06 16:22
7F：→ hit1205:box 本身的 width 去算，而是和 box 的 width 用百分比时 07/06 16:23
8F：→ sean72:@hit1205: 我上面问题超杂的，都不知道该怎麽厘清了 07/06 16:23
9F：→ hit1205:一样，以该 box 的容器的 width 来算。 07/06 16:26
10F：→ hit1205:所以 height: 18% 造出的高度会等於你用 width: 18% 时 07/06 16:27
11F：→ hit1205:造出的宽度 @@ ~ 07/06 16:27
12F：推 hit1205:啊，我是针对你的第一题 XD 07/06 16:30
13F：→ hit1205:如果需要 "高度" 的百分比，就我所知只能用 CSS3 里的 vh 07/06 16:33
14F：→ hit1205:或者用 JavaScript 来算了 @@ 07/06 16:33
15F：推 hit1205:然後 RWD 也不代表一定要全部都用百分比，可以控制在 07/06 16:35
16F：→ hit1205:解析度到某个范围时使用某种尺寸之类的 @@ 07/06 16:35
17F：→ hit1205:至於第二题问 "贴着box"，指的是你又把 box 放回去了吗 @@ 07/06 16:37
18F：→ hit1205:这样的话听起来应该是 body 被 box 撑开的缘故 07/06 16:38
19F：推 hit1205:至於第三题的 "关系"，两者其实是同时发生的 @@ 07/06 16:40
20F：→ hit1205:同时有相邻元素和父元素的话，就是两者会同时发生 XD 07/06 16:41
21F：→ oj113068:position:fixed 在行动装饰或平板可能没支援 07/06 16:51