頁面和元素有一些常用的寬高還有各種距離，比較容易混淆
1.頁面的幾種不同的寬高和距離
方法描述
clientwidth / clientheight
獲取瀏覽器的可視寬高 ，不包含滾動部分
scrollwidth / scrollheight
獲取頁面的實際寬高 ，包含滾動部分
scrolltop / scrollleft
獲取或設定根元素的內容垂直（水平）滾動距離
2.元素寬高和相對距離
方法描述
width / height
元素樣式寬高
clientwidth / clientheight
元素內容寬高，包含：padding+width/height
offsetwidth / offsetheight
元素實際寬高，包含：border+padding+width/height
獲取元素與最近的定位父級的距離（如果沒有定位父級元素則是到body的距離） 方法
描述offsettop
當前元素 上邊框 外邊緣 到 最近的已定位父級 上邊框 內邊緣
offsetleft
當前元素 左邊框 外邊緣 到 最近的已定位父級 左邊框 內邊緣
3.事件觸發位置
方法描述
clientx / clienty
滑鼠相對於 瀏覽器視窗可視區域 的x，y座標，可視區域不包括工具欄
pagex / pagey
滑鼠相對於 文件 的x，y座標
offsetx / offsety
滑鼠相對於 事件源 的x，y座標
jq獲取元素的所有寬高（包括內邊距和外邊距）
width 返回元素的寬度。height 返回元素的高度。innerwidth 方法返回元素的寬度 包括內邊距 innerheight 方法返回元素的高度 包括內邊距 outerwidth 方法返回元素的寬度 包括內邊距和邊框 outerheight 方法返回元素的高度 包括內邊距和邊框 outer...
獲取元素的寬 高和位置
原生js中 ele.getboundingclientrect 獲取乙個元素相對於瀏覽器視口的的座標 無論父元素定位與否 返回乙個object物件，該物件有6個屬性 top left right bottom width height。幾乎所有瀏覽器都支援該方法。jquery中沒有直接的方法，需要用...
塊級元素和內聯元素的預設寬高
我們先明確一下文件流的概念 對於內聯元素，是從左到右排列的，當寬度不夠時換行 對於塊級元素，是從上到下排列的，每乙個元素都另起一行。一 內聯元素寬高的確定 寬度 不受width的限制，有文字內容決定的，padding 和 margin 可以改變寬度。高度 不受height的限制，padding 和m...