css - 關(guān)于offsetLeft和offsetTop
問(wèn)題描述
offsetLeft不是當(dāng)前元素的左外邊框到包含元素的左內(nèi)邊框之間的像素距離嗎？為什么多出了8px
<!DOCTYPE html><html> <head><meta charset='utf-8'><title>test2</title><style media='screen'> .cc{padding: 50px 30px; } .fc{background-color: blue;width:300px;height: 200px; }</style> </head> <body><p class='cc'> <p > </p></p> </body> <script type='text/javascript'>var fc = document.querySelector(’.fc’);console.log(fc.offsetLeft+’:’+fc.offsetTop); </script></html>
問(wèn)題解答
回答1：offsetLeft 和 offsetTop 返回的是相對(duì)于 offsetParent 元素的距離，而 offsetParent 指的是一個(gè)元素最近的父級(jí)定位元素，如果沒(méi)有定位元素就是文檔根節(jié)點(diǎn)。
你現(xiàn)在輸出的值加上 body 本身有 8px 的 margin，其實(shí)是沒(méi)錯(cuò)的。你可以加個(gè) body { margin:0 } 或者給父級(jí)元素加上定位，輸出就是你期望的數(shù)了。
回答2：默認(rèn)有8px的margin。使用*{margin:0;}清除默認(rèn)樣式。
相關(guān)文章：
1. javascript - jquery怎么給select option一個(gè)點(diǎn)擊時(shí)觸發(fā)的事件,如圖 如果選擇自定義觸發(fā)一個(gè)時(shí)間？2. java - android代碼重構(gòu)：如何把a(bǔ)pp設(shè)置里的頭像UI做成通用的？3. 想找個(gè)php大神仿個(gè)網(wǎng)站。4. javascript - 怎樣限制同一個(gè)瀏覽器不能登錄兩個(gè)賬號(hào)5. java - 新手做一個(gè)安卓視頻播放器，想實(shí)現(xiàn)一個(gè)進(jìn)度條，按鈕那種在視頻下方懸浮的功能，不知道思路！6. css3 - Typecho 后臺(tái)部分表單按鈕在 Chrome 下出現(xiàn)靈異動(dòng)畫(huà)問(wèn)題，求解決7. javascript - angular和jquery都用到了$符號(hào)，一起用會(huì)不會(huì)沖突？8. nginx配置server模塊的問(wèn)題9. 如何將行內(nèi)塊元素的內(nèi)容垂直水平兩個(gè)方向居中？10. mysql優(yōu)化 - 關(guān)于mysql分區(qū)
網(wǎng)公網(wǎng)安備