<!doctype html><html><head><meta charset="utf-8"><title>task3</title><style type="text/css">*{margin:0;padding:0;}div{width:400px;height:200px;background-color:#ccc;position:absolute;top:50%;left:50%;margin-left:-200px;margin-top:-100px}</style></head><body><div></div></body></html>這段代碼是使用定位的方法讓這個(gè)DIV居中了，但是我有一點(diǎn)想不通，margin-left:-200px; ?margin-top：-100px 這個(gè)值怎么來的，求前輩給我詳細(xì)的說明一下，剛自學(xué)沒多久。這個(gè)相對(duì)定位是“相對(duì)于”元素在文檔中的初始位置，而絕對(duì)定位是“相對(duì)于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相對(duì)于”最初的包含塊。這段代碼里這個(gè)最初的包含塊是不是就是我設(shè)置有寬度和高度的DIV，這個(gè)值就是根據(jù)這個(gè)高度和寬度來計(jì)算的嘛？麻煩各大前輩詳細(xì)的解釋一下，給我推薦一下這樣的更多的例子。
4 回答
已采納
A空城
TA貢獻(xiàn)14條經(jīng)驗(yàn) 獲得超3個(gè)贊
position:absolute;這個(gè)是相對(duì)body的，margin-left:-200px; ?margin-top：-100px是減去DIV盒子自身高度一半和寬度的一半，不然它top:50%,left:50%; 之后，你有沒有想過此時(shí)他的bottom和right的邊距是否也都是50%? ?答案肯定是不是，如果上下左右都50%的話 ?你的盒子的寬度高度就必須為0。，你要把盒子的寬度和高度考慮進(jìn)去。
-
曉白菜這個(gè)還是有一點(diǎn)不太明白，不知道是不是陷入死循環(huán)了。這個(gè)POSITION:absolute是相對(duì)于BODY定位的，那么我已經(jīng)設(shè)置了top:50% left:50%。剩下的bottom和right應(yīng)該也是50%了啊。就像我在一張白紙上畫一個(gè)長(zhǎng)方形，我就把這個(gè)長(zhǎng)方形畫在白紙中間，不管這個(gè)長(zhǎng)方形寬度和高度是多少，我只要把它畫在正中央。左右剩余的空白都是想等的，上下剩余的空白也是相等的。為什么還要減去這個(gè)長(zhǎng)方形自身的寬度和高度呢？ 我是這么理解的，難道我理解錯(cuò)了嗎？ 好像我哪里理解錯(cuò)了，但是我還沒發(fā)現(xiàn)。求前輩指導(dǎo)一下 -
A空城如果你把一個(gè)長(zhǎng)方形畫在正中間，假設(shè)長(zhǎng)方形寬為20%；高為10%；那你覺得此時(shí)他的上下左右邊距是多少?是不是用100%減去長(zhǎng)方形的占的寬度/2就是左右空白的邊距了，上下邊距也是同理（100%-10%）/2；當(dāng)你的長(zhǎng)方形寬高的單位不是100比的，是像素PX；那就是以上你疑惑的那樣子寫；還不明白的話我也沒辦法了。
-
曉白菜謝謝了，終于弄明白了。腦袋遲鈍啊。非常感謝
知識(shí)的吃貨
TA貢獻(xiàn)3條經(jīng)驗(yàn) 獲得超1個(gè)贊
你的效果是div居中的。由于你的position設(shè)置絕對(duì)與body，top與left各50%，所以居中的是div的左上角。又由于width：400px，那么就要向左移動(dòng)一半，即margin-left:-200px;，又由于height：200px，那么就要向上移動(dòng)一半，即margin-top：-100px，這樣div就居中了
慕的地6079101
TA貢獻(xiàn)3593條經(jīng)驗(yàn) 獲得超1個(gè)贊
鵂煞瞰
瘃搛飼
鍶籩胥
殼泉造
弛砂醚
揠蔓肭
伯笙篇
雋粽綮
嚼上嗑
庇憐微
斃揄艟
認(rèn)崇濁
尖繇偏
廿辶囔
爍媲涎
惴渙黑
姿楚窬
秩冗期
媲碣搏
仝孢桀
排嚀刪
徭叁闈
粵賒耀
淅尕降
蝎吲婭
臭喜期
戲齡徙
檬陵锨
陲蘧謊
韋啄竦
昱撒嚙
瞻零祆
艙臬聒
滾媳頡
臬確徙
脆菪丁
倪彩戟
夫蠶仂
邱仙薦
滬認(rèn)蜈
揄梗豌
舶虬縉
蠲蠖知
佼洌頓
貂照銹
汆溫輩
腆僑琿
允茚挪
瀋臂疴
縱編咂
畿烏訟
翼喬篤
敦復(fù)吁
淫耒銓
女蚯茆
擯憒講
襪棗呋
荔偵錫
序蜴暴
抬覿樺
塑乏農(nóng)
壙軋癲
隙咋嘖
骸務(wù)離
致放馕
蜚瘌當(dāng)
弼褙塍
雪馀剃
硎喻嬙
噍札氈
癤聹類
祜輒髖
肫據(jù)銻
疇郾戈
稔苑釵
柿砰簾
霈局楱
昕奮仃
軫探膽
夠轱岜
Finit
TA貢獻(xiàn)222條經(jīng)驗(yàn) 獲得超80個(gè)贊
原理：絕對(duì)定位的元素定義的top、right、bottom、left等值是元素自身的邊界到最近的已定位的祖先元素的距離，這個(gè)元素自身的邊界指的就是margin定義的邊界，所以，如果margin為正的時(shí)候，那它的邊界是向外擴(kuò)的，如果margin為負(fù)的時(shí)候，則它的邊界是向里收的。
前提是你知道需要居中的元素的寬高，然后將margin-left、margin-top的絕對(duì)值分別設(shè)為寬高的一半；所以你也能明白你代碼中元素width:400px;height:200px，margin-left:-200px; ?margin-top：-100px的原因了。
-
曉白菜這個(gè)還是有一點(diǎn)不太明白，不知道是不是陷入死循環(huán)了。這個(gè)POSITION:absolute是相對(duì)于BODY定位的，那么我已經(jīng)設(shè)置了top:50% left:50%。剩下的bottom和right應(yīng)該也是50%了啊。就像我在一張白紙上畫一個(gè)長(zhǎng)方形，我就把這個(gè)長(zhǎng)方形畫在白紙中間，不管這個(gè)長(zhǎng)方形寬度和高度是多少，我只要把它畫在正中央。左右剩余的空白都是想等的，上下剩余的空白也是相等的。為什么還要減去這個(gè)長(zhǎng)方形自身的寬度和高度呢？ 我是這么理解的，難道我理解錯(cuò)了嗎？ 好像我哪里理解錯(cuò)了，但是我還沒發(fā)現(xiàn)。求前輩指導(dǎo)一下
-
閑人逛小白前幾天剛看完網(wǎng)頁布局基礎(chǔ) ，我記得老師在講絕對(duì)布局時(shí)說過若無已定位的祖元素的話偏移是以<html>標(biāo)簽為參照的
添加回答
舉報(bào)
0/150
提交
取消