首先定義一個div。

然後稍微裝修一下

下面開始區分

    一、clientWidth和clientHeigh 、 clientTop和clientLeft

        1，clientWidth的實際寬度

        clientWidth = width+左右padding

        2，clientHeigh的實際高度

         clientHeigh = height + 上下padding 

        3，clientTop的實際寬度

           clientTop = boder.top(上邊框的寬度)

        4，clientLeft的實際寬度

            clientLeft = boder.left(左邊框的寬度)

    二、offsetWidth和offsetHight 、 offsetTop和offsetLeft

         1,offsetWidth的實際寬度

            offsetWidth = width + 左右padding + 左右boder

         2,offsetHeith的實際高度

                      offsetHeith = height + 上下padding + 上下boder

         3，offsetTop實際寬度

                       offsetTop：當前元素 上邊框 外邊緣 到 最近的已定位父級（offsetParent） 上邊框 內邊緣的 距離。如果父

                 級都沒有定位，則分別是到body 頂部 和左邊的距離

                 4，offsetLeft實際寬度

              offsetLeft：當前元素 左邊框 外邊緣 到 最近的已定位父級（offsetParent） 左邊框 內邊緣的            距離。如果父級都沒有定位，則分別是到body 頂部 和左邊的距離

    三、scrollWidth和scrollHeight 、 scrollTop和scrollLeft

        1，scrollWidth實際寬度

               scrollWidth：獲取指定標籤內容層的真實寬度（可視區域寬度+被隱藏區域寬度）。

               2，scrollHeight的實際高度

         scrollHeight：獲取指定標籤內容層的真實高度（可視區域高度+被隱藏區域高度）

         3，scrollTop

                scrollTop :內容層頂部 到 可視區域頂部的距離。

                4，scrollLeft

                scrollLeft:內容層左端 到 可視區域左端的距離.