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

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

1.偏移量的區別

• html文件（自己寫的示例）

<div id="root">
    <div class="box">
        <div class="content"></div>
    </div>
</div>

• css樣式

<style>
    body, html{
        padding: 0;
        margin: 0;
    }
    #root{
        /*position: relative;*/
        margin: 0 auto;
        width: 1200px;
        /*border: 1px solid black;*/
    }
    .box{
        overflow: scroll;
        margin: 5px;
        padding: 20px;
        width: 500px;
        height: 600px;
        border: 2px solid blueviolet;
        /*box-sizing: border-box;*/
        background: linear-gradient(to right, rgb(85, 181, 255), rgb(207, 224, 232));
    }
    .content{
        width: 530px;
        height: 600px;
    }
</style>

• 較多見的屬性

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

• script

<script>
    (function() {
        let elementName = document.getElementsByClassName('box')[0];
        let elementContent = document.getElementsByClassName('content')[0];

        /* offsetWidth爲元素的寬度，返回數值,只讀屬性(可以讀取css文件裏的值，也可以讀取內聯樣式裏的值)
         * 當box-sizing爲content-box時，offsetWidth=(padding-left)+(padding-right)+(border-left)+(border-right)+width
         * 當box-sizing爲border-box時，offsetWidth=width
         * 當元素本身未設置寬時，讀取的是父元素的寬度減去元素本身設置的margin值
         * */
        let elementWidth = elementName.offsetWidth;
        console.log(elementWidth);

        /* clientWidth爲元素的寬度，返回數值，只讀屬性(可以讀取css文件裏的值，也可以讀取內聯樣式裏的值)
         * 在元素未溢出時：
         * 當box-sizing爲content-box時，clientWidth=(padding-left)+(padding-right)+width
         * 當box-sizing爲border-box時，clientWidth=width-(border-left)-(border-right)
         * 當元素本身未設置寬時，讀取的是父元素的寬度減去元素本身設置的border值
         * 元素溢出時(子元素寬度大於父元素寬度)：
         * clientWidth爲除了邊框及X、Y向滾動條的寬度(可視區)
         * */
        let elemClientWidth = elementName.clientWidth;
        console.log(elemClientWidth);

        /* style.width爲元素的寬度，返回字符串(包含單位)，可讀寫
         * 原樣的輸出內聯style裏設置的width值，必須顯示的設置，否則爲空
         * */
        let styleWidth = elementName.style.width;
        console.log(styleWidth);

        /* scrollWidth爲元素的寬度，返回數值(包含padding值，不包含邊框寬度值)
         * 當元素沒有溢出時(子元素寬度小於父元素寬度)：此時與clientWidth值一樣
         * 當元素溢出時：(溢出值=子元素offsetWidth-[父元素offsetWidth-(父padding-left)-(父border-left)])
         * 當子元素box-sizing爲content-box時，scrollWidth=子元素offsetWidth+(父padding-right)
         * 當子元素box-sizing爲border-box時，
         * scrollWidth=子元素offsetWidth+(父padding-right)-(子border-left)-(子border-right)-(子padding-right)-(子padding-left)
         * */
        let elemScrollWidth = elementName.scrollWidth;
        console.log(elemScrollWidth);

        /* offsetTop爲元素的上外緣距離最近採用定位的父元素內壁的距離，返回數值，只讀
         * 如果父元素中沒有采用定位的，則是獲取元素的上外邊緣距離文檔對象內壁的距離
         * 定位只能爲position:relative，其他定位值獲取的是文檔對象內壁的距離
         * */
        let elemOffsetTop = elementName.offsetTop;
        console.log(elemOffsetTop);

        /* offsetLeft爲元素的左外緣距離最近採用定位的父元素內壁的距離，返回數值，只讀
         * 如果父元素中沒有采用定位的，則是獲取元素的左外邊緣距離文檔對象內壁的距離
         * 定位只能爲position:relative，其他定位值獲取的是文檔對象內壁的距離
         * */
        let elemOffsetLeft = elementName.offsetLeft;
        console.log(elemOffsetLeft);

        /* scrollHeight爲元素內容的實際高度
         * 包括元素高度、內邊距和溢出尺寸，不包括邊框和外邊距
         * 無溢出的情況，與clientHeight相同
         * */
        let elemScrollHeight = elementName.scrollHeight;
        console.log(elemScrollHeight);

        /* scrollTop可以獲取或者設置對象的最頂部到對象所在當前窗口顯示的範圍內的頂邊的距離
         * 也就是元素滾動條被向下拉動的距離
         * 返回數值，可讀寫
         * */
        let documentScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        console.log(documentScrollTop);

        /* scrollLeft可以獲取或者設置對象的最左邊到對象在當前窗口顯示的範圍內的左邊的距離
         * 也就是元素被滾動條向左拉動的距離
         * 返回數值，可讀寫
         * */
        let documentScrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
        console.log(documentScrollLeft);

        /* innerWidth窗口的文檔顯示區的寬度(不包含工具條與滾動條)，返回一個數值 */
        let windowInnerWidth = window.innerWidth;
        console.log(windowInnerWidth);

        /* availWidth爲瀏覽器屏幕的可用寬度，返回數值 */
        let screenAvailWidth = screen.availWidth;
        console.log(screenAvailWidth);

        /* clientWidth爲可視區的寬度，不包含滾動條的寬度 */
        let documentClientWidth = document.documentElement.clientWidth || document.body.clientWidth;
        console.log(documentClientWidth);

        elementName.onmousemove = function(event) {
            /* eventX爲鼠標相對於瀏覽器有效區域(除去工具欄等非html文檔的區域)左上角x軸的座標，不隨滾動條滾動而改變 */
            let eventX = event.clientX;
            console.log(eventX);

            /* pageX爲鼠標相對於瀏覽器有效區域(除去工具欄等非html文檔的區域)左上角x軸的座標，隨滾動條滾動而改變 */
            let pageX = event.pageX;
            console.log(pageX);

            /* screenX爲鼠標相對於顯示器屏幕左上角x軸的座標 */
            let screenX = event.screenX;
            console.log(screenX);

            /* offsetX爲鼠標相對於事件源左上角X軸的座標 */
            let offsetX = event.offsetX;
            console.log(offsetX);
        }
    })()
</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佈局）