【前端工程師手冊】前端應該知道的各種寬高

Hujiawei 發布于2019-08-30 15:54 / 1589人閱讀

摘要：和都是相對于內邊距邊界的。和即為向上滾動時，元素內容區被遮住的那一部分。同理參考中的各種寬高屬性

引子

曾經校招面試的時候，學習了三個月前端的我去某廠面試，面試官循循善誘考察了一個開發中的實際場景，其中有需要用到某元素的高度，面試官問我clientHeight和offsetHeight的區別是什么，我當時一臉懵逼，這個問題對于當時的我來說已經完全超綱了...面試結果自然是面試官感謝我來參加面試...

好漢不提當年囧，今天總結一下常見的元素各種寬高。

一些height和width clientHeight和clientWidth

沒有橫向滾動條時：clientHeight = css設置的height + paddingTop + paddingBottom

有橫向滾動條時：clientHeight = css設置的height + paddingTop + paddingBottom - 滾動條的高度

clientWidth類似，就不再贅述

ps：這個屬性是只讀屬性，對于沒有定義CSS或者內聯布局盒子的元素為0

offsetHeight和offsetWidth

offsetHeight = ccss設置的height + paddingTop + paddingBottom + borderTop + borderBottom

offsetWidth類似，就不再贅述

scrollHeight和scrollWidth

無滾動條時：scrollHeight = clientHeight = css設置的height + paddingTop + paddingBottom

有滾動條時：scrollHeight = 實際內容的高度 + paddingTop + paddingBottom（即要算上因為滾動被遮住的內容高度

scrollWidth不再贅述

一些Top和Left clientLeft和clientTop

clientTop = borderTop
clientLeft = borderLeft

offsetLeft和offsetTop

以offsetTop為例，搞懂它首先要明白offsetParent是什么

offsetParent是元素最近的有定位的父元素，如果父元素中沒有有定位的，那么就是最近的 table, table cell 或根元素。

offsetTop 和 offsetLeft 都是相對于offsetParent內邊距邊界的。

scrollTop和scrollLeft

scrollTop即為向上滾動時，元素內容區被遮住的那一部分。

scrollLeft同理

參考

JavaScript 中的各種寬高屬性

MDN

GPU云服務器云服務器優秀的前端工程師好的前端工程師 web前端工程師的發展 web前端工程師的要求

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116885.html

【前端工程師手冊】前端應該知道的各種寬高

摘要：和都是相對于內邊距邊界的。和即為向上滾動時，元素內容區被遮住的那一部分。同理參考中的各種寬高屬性引子曾經校招面試的時候，學習了三個月前端的我去某廠面試，面試官循循善誘考察了一個開發中的實際場景，其中有需要用到某元素的高度，面試官問我clientHeight和offsetHeight的區別是什么，我當時一臉懵逼，這個問題對于當時的我來說已經完全超綱了...面試結果自然是面試官感謝我來...

jayce 2019-08-22 18:45 評論0 收藏0
前端每周清單半年盤點之 CSS 篇

摘要：前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點分為新聞熱點開發教程工程實踐深度閱讀開源項目巔峰人生等欄目。它能夠為我們提供類似于預處理器命名空間等多方面的輔助。前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點；分為新聞熱點、開發教程、工程實踐、深度閱讀、開源項目、巔峰人生等欄目。歡迎關注【前端之巔】微信公眾號（ID：f...

RaoMeng 2019-08-29 13:21 評論0 收藏0
前端資源系列（4）-前端學習資源分享&前端面試資源匯總

摘要：特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。本以為自己收藏的站點多，可以很快搞定，沒想到一入匯總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應和斧正，會及時更新，平時業務工作時也會不定期更...

princekin 2019-08-20 11:28 評論0 收藏0
【前端工程師手冊】學習回流和重繪（reflow和repaint）

摘要：重繪元素做了一些不影響排版的改變，比如背景色下劃線等等，只需要重新繪制的過程，叫做重繪。顯然回流帶來的代價大于重繪，因為重繪僅僅是重新畫一遍元素而已，但是重繪是重新計算重新畫。不然這會導致大量地讀寫這個結點的屬性。瀏覽器的大概工作流程以普通的HTML頁面為例：解析HTML文檔，生成dom樹解析css產生css規則樹解析JavaScript，通過DOM-API來操作dom樹和...

liuyix 2019-08-29 16:12 評論0 收藏0