国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

關(guān)于scroll,client,innear,avail,offset等的理解

neu / 2874人閱讀

摘要：在寫(xiě)實(shí)例理解，，，及等的時(shí)候，意外的又發(fā)現(xiàn)了值合并的問(wèn)題，在這里同時(shí)記錄下偏移量的區(qū)別文件自己寫(xiě)的示例樣式較多見(jiàn)的屬性指可見(jiàn)區(qū)的寬度網(wǎng)頁(yè)，或者元素指可見(jiàn)區(qū)的高度網(wǎng)頁(yè)，或者元素指元素的寬度網(wǎng)頁(yè)，或者元素指元素的高度網(wǎng)頁(yè)，或者元素滾動(dòng)條的

在寫(xiě)實(shí)例理解scrollWidth，clientWidth，innearWidth，availWidth及offsetWidth等的時(shí)候，意外的又發(fā)現(xiàn)了margin值合并的問(wèn)題，在這里同時(shí)記錄下
1.偏移量的區(qū)別

html文件（自己寫(xiě)的示例）

css樣式

較多見(jiàn)的屬性

clientWidth: 指可見(jiàn)區(qū)的寬度（網(wǎng)頁(yè)，或者元素）
clientHeight: 指可見(jiàn)區(qū)的高度（網(wǎng)頁(yè)，或者元素）
offsetWidth: 指元素的寬度（網(wǎng)頁(yè)，或者元素）
offsetHeight: 指元素的高度（網(wǎng)頁(yè)，或者元素）
scrollTop: 滾動(dòng)條的滾動(dòng)距離
scrollLeft: 滾動(dòng)條的滾動(dòng)距離
availWidth: 屏幕可用區(qū)寬度
availHeight: 屏幕可用區(qū)高度

script

下面這個(gè)的話是我百度找的圖片

這個(gè)圖我感覺(jué)有點(diǎn)復(fù)雜的樣子，
2.margin值合并的問(wèn)題

當(dāng)兩個(gè)垂直外邊距相遇時(shí)，它們將形成一個(gè)外邊距。合并的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者

還有一種就是：當(dāng)父元素沒(méi)有設(shè)置內(nèi)邊距或邊框,以及觸發(fā)BFC時(shí),如果子元素的值大于父元素時(shí)，它會(huì)帶著父元素一起偏移,此時(shí)子元素是相對(duì)除了它父級(jí)之外的離它最近的元素偏移的

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

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

內(nèi)部的box會(huì)在垂直方向，一個(gè)接一個(gè)的放置

Box垂直方向的距離由margin決定，屬于同一個(gè)bfc的兩個(gè)相鄰box的margin會(huì)發(fā)生重疊

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

Bfc的區(qū)域不會(huì)與float box重疊

Bfc就是頁(yè)面上的一個(gè)隔離的獨(dú)立的容器，容器里面的元素不會(huì)影響到外面的元素，反之也是如此

計(jì)算bfc的高度時(shí)，浮動(dòng)元素也會(huì)參與計(jì)算

4.形成bfc的條件

浮動(dòng)元素，float除none外的值

絕對(duì)定位元素，position（absolute，flxed）

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

overflow除了visible以外的值

正在努力學(xué)習(xí)中，若對(duì)你的學(xué)習(xí)有幫助，留下你的印記唄（點(diǎn)個(gè)贊咯^_^）

往期好文推薦：

判斷ios和Android及PC端

webpack打包（有面試題）

純css實(shí)現(xiàn)瀑布流（multi-column多列及flex布局）

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/117022.html

相關(guān)文章

  • 關(guān)于scroll,client,innear,avail,offset等的理解

    摘要：在寫(xiě)實(shí)例理解，，，及等的時(shí)候，意外的又發(fā)現(xiàn)了值合并的問(wèn)題，在這里同時(shí)記錄下偏移量的區(qū)別文件自己寫(xiě)的示例樣式較多見(jiàn)的屬性指可見(jiàn)區(qū)的寬度網(wǎng)頁(yè)，或者元素指可見(jiàn)區(qū)的高度網(wǎng)頁(yè)，或者元素指元素的寬度網(wǎng)頁(yè)，或者元素指元素的高度網(wǎng)頁(yè)，或者元素滾動(dòng)條的 在寫(xiě)實(shí)例理解scrollWidth，clientWidth，innearWidth，availWidth及offsetWidth等的時(shí)候，意外的又發(fā)現(xiàn)了...

    Yangder 評(píng)論0 收藏0

  • JS 中的offset、scroll、client總結(jié)

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

    The question 評(píng)論0 收藏0

  • JS 中的offset、scroll、client總結(jié)

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

    jerryloveemily 評(píng)論0 收藏0

  • JS寬高（client、offset、scroll）的介紹

    摘要：?jiǎn)栴}今日頭條的一道筆試題，的區(qū)別。結(jié)果如圖更詳細(xì)的介紹，請(qǐng)點(diǎn)擊 問(wèn)題 今日頭條的一道筆試題，offsetWidth、clientWidth、scrollWidth的區(qū)別。 分析 JS中document對(duì)象的寬高有三種，cilent、offset、scroll client： clientWidth和clientHeight，clientTop和clientLeft clientWidt...

    mj 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

neu

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<