作者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/m.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