offset概述：offset翻譯是偏移量，使用offset系列相關屬性可以動態的得到該元素的位置(偏移)、大小等。
· 獲得元素距離帶有定位父元素的位置
· 獲得元素自身的大小(寬度高度)
注意：返回的數值都不帶單位
offset系列屬性 作用
element.offsetparent 返回作為該元素帶有定位的父級元素 如果父級都沒有定位則返回
element.offsettop 返回元素相對帶有定位父元素上方的偏移
element.offsetleft 返回元素相對帶有定位父元素左邊框的偏移
element.offsetwidth 返回自身包括padding、邊框、內容區的寬度，返回數值不帶單位
element.offsetheight 返回自身包括padding、邊框、內容區的高度，返回數值不帶單位
// 獲得元素距離帶有定位父元素的位置// 獲得元素自身的大小(寬度高度)
// 注意：返回的數值都不帶單位
//offset系列屬性 作用
返回作為該元素帶有定位的父級元素 如果父級都沒有定位則返回 返回元素相對帶有定位父元素上方的偏移
返回元素相對帶有定位父元素左邊框的偏移
返回自身包括padding、邊框、內容區的寬度，返回數值不帶單位
返回自身包括padding、邊框、內容區的高度，返回數值不帶單位
var father = document.queryselector('.father');
var son = document.queryselector('.son');
//1.可以得到元素的偏移 位置 返回不帶單位的數值
console.log(father.offsettop);
console.log(father.offsetleft);
//它以帶有定位的父親為準 如果沒有父親或是父親沒有定位 則以body為準
console.log(son.offsetleft);
var w = document.queryselector('.w');
//2.可以得到元素的大小 寬度 和高度 是包含padding+border+width
console.log(w.offsetwidth);
console.log(w.offsetheight);
//3.返回帶有定位的父親 否則返回的是console.log(son.offsetparent);//返回帶有定位的父親 否則返回的是console.log(son.parentnode);//返回父親 是最近一級的父親 親爸爸不管父親有沒有定位
PC端網頁特效
動態得到相關元素的位置 大小 1.獲得元素距離帶有定位的父元素的位置 2.獲得元素自身的大小 返回的數值都不帶單位 offsettop 可以得到元素的偏移 位置 返回的不帶單位的數值 offsetleft offsetwidth 可以得到元素的大小 寬度和高度 是包含padding border w...
pc端rem適配 自適應PC端網頁製作使用REM
做乙個pc端的網頁,設計圖是1920x1080的.要在常見屏上顯示正常 比例正確可 1280x720 1366x768 1440x900 1920x1080 使用了幾種辦法 1.內容在一屏內顯示的,採用了 內容框 上下左右居中的辦法,裡面的內容絕對於這個內容框定位.這樣一來,在不同大小屏中,內容總是...
網頁自適應pc端和移動端
手機的螢幕比較小，寬度通常在600畫素以下 pc的螢幕寬度，一般都在1000畫素以上 目前主流寬度是1366 768 有的還達到了2000畫素。同樣的內容，要在大小迥異的螢幕上，都呈現出滿意的效果，並不是一件容易的事。很多 的解決方法，是為不同的裝置提供不同的網頁，比如專門提供乙個mobile版本，...