關于scroll,client,innear,avail,offset等的理解

neu 發布于2019-08-30 15:54 / 2865人閱讀

摘要：在寫實例理解，，，及等的時候，意外的又發現了值合并的問題，在這里同時記錄下偏移量的區別文件自己寫的示例樣式較多見的屬性指可見區的寬度網頁，或者元素指可見區的高度網頁，或者元素指元素的寬度網頁，或者元素指元素的高度網頁，或者元素滾動條的

在寫實例理解scrollWidth，clientWidth，innearWidth，availWidth及offsetWidth等的時候，意外的又發現了margin值合并的問題，在這里同時記錄下

1.偏移量的區別

html文件（自己寫的示例）

css樣式

較多見的屬性

clientWidth: 指可見區的寬度（網頁，或者元素）
clientHeight: 指可見區的高度（網頁，或者元素）
offsetWidth: 指元素的寬度（網頁，或者元素）
offsetHeight: 指元素的高度（網頁，或者元素）
scrollTop: 滾動條的滾動距離
scrollLeft: 滾動條的滾動距離
availWidth: 屏幕可用區寬度
availHeight: 屏幕可用區高度

script

下面這個的話是我百度找的圖片

這個圖我感覺有點復雜的樣子，

2.margin值合并的問題

當兩個垂直外邊距相遇時，它們將形成一個外邊距。合并的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者

還有一種就是：當父元素沒有設置內邊距或邊框,以及觸發BFC時,如果子元素的值大于父元素時，它會帶著父元素一起偏移,此時子元素是相對除了它父級之外的離它最近的元素偏移的

解決方法的話，可以改變兩者的margin值，或者對元素設置border、padding，或者形成BFC

3.關于BFC(塊格式化上下文)

內部的box會在垂直方向，一個接一個的放置

Box垂直方向的距離由margin決定，屬于同一個bfc的兩個相鄰box的margin會發生重疊

每個元素的margin box 的左邊，與包含塊border box的左邊相接觸（對于從左往右的格式化，否則相反）。即使存在浮動也是如此

Bfc的區域不會與float box重疊

Bfc就是頁面上的一個隔離的獨立的容器，容器里面的元素不會影響到外面的元素，反之也是如此

計算bfc的高度時，浮動元素也會參與計算

4.形成bfc的條件

浮動元素，float除none外的值

絕對定位元素，position（absolute，flxed）

display：inline-block，table-cells，table-captions

overflow除了visible以外的值

正在努力學習中，若對你的學習有幫助，留下你的印記唄（點個贊咯^_^）

往期好文推薦：

判斷ios和Android及PC端

webpack打包（有面試題）

純css實現瀑布流（multi-column多列及flex布局）

GPU云服務器云服務器 innear avail Availability Available

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

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

關于scroll,client,innear,avail,offset等的理解

摘要：在寫實例理解，，，及等的時候，意外的又發現了值合并的問題，在這里同時記錄下偏移量的區別文件自己寫的示例樣式較多見的屬性指可見區的寬度網頁，或者元素指可見區的高度網頁，或者元素指元素的寬度網頁，或者元素指元素的高度網頁，或者元素滾動條的在寫實例理解scrollWidth，clientWidth，innearWidth，availWidth及offsetWidth等的時候，意外的又發現了...

Yangder 2019-08-02 11:38 評論0 收藏0
JS 中的offset、scroll、client總結

摘要：兩張圖鎮樓，隨時翻閱指偏移，包括這個元素在文檔中占用的所有顯示寬度，包括滾動條，不包括隱藏的部分屬性返回一個對象的引用，這個對象是距離調用的父級元素中最近的在包含層次中最靠近的，并且是已進行過定位的容器元素。經常碰到offset、scroll、client這幾個關鍵字，每次都要各種實驗，這里總結一下。兩張圖鎮樓，隨時翻閱 showImg(https://segmentfault.c...

The question 2019-08-23 10:54 評論0 收藏0
JS 中的offset、scroll、client總結

摘要：兩張圖鎮樓，隨時翻閱指偏移，包括這個元素在文檔中占用的所有顯示寬度，包括滾動條，不包括隱藏的部分屬性返回一個對象的引用，這個對象是距離調用的父級元素中最近的在包含層次中最靠近的，并且是已進行過定位的容器元素。經常碰到offset、scroll、client這幾個關鍵字，每次都要各種實驗，這里總結一下。兩張圖鎮樓，隨時翻閱 showImg(https://segmentfault.c...

jerryloveemily 2019-08-02 11:13 評論0 收藏0
JS寬高（client、offset、scroll）的介紹

摘要：問題今日頭條的一道筆試題，的區別。結果如圖更詳細的介紹，請點擊問題今日頭條的一道筆試題，offsetWidth、clientWidth、scrollWidth的區別。分析 JS中document對象的寬高有三種，cilent、offset、scroll client： clientWidth和clientHeight，clientTop和clientLeft clientWidt...

mj 2019-08-20 18:21 評論0 收藏0