如有不同的看法或不妥的地方歡迎評論跋核，謝謝！
// 屏幕的寬度
window.screen.width
// 屏幕的高度
window.screen.height
// 屏幕的可用寬度狮杨，即減去桌面任務(wù)欄（在左側(cè)或者右側(cè)）的寬度等
window.screen.availWidth
// 屏幕的可用高度，即減去桌面任務(wù)欄（在頂部或者底部）的高度等
window.screen.availHeight
// 設(shè)置或返回一個窗口的外部高度到忽，包括所有界面元素（如工具欄/滾動條）
window.outerHeight
// 設(shè)置或返回窗口的外部寬度橄教，包括所有的界面元素（如工具欄/滾動）
window.outerWidth
// 其實就是整個瀏覽器的寬高，
// 在某些瀏覽器中喘漏，當(dāng)你縮小瀏覽器护蝶，并把鼠標放在瀏覽器上，
// 然后使用QQ快捷鍵截圖翩迈，你會發(fā)現(xiàn)瀏覽器有外邊距持灰，
// 外邊距是被包含在外部寬高當(dāng)中，
// 這兩個屬性有兼容性問題负饲，在 Google 內(nèi)核中堤魁，當(dāng)全屏的時候，
// 比如按 F11绽族，然后在控制臺打印該屬性值姨涡，
// 會發(fā)現(xiàn)外部寬高小于屏幕寬高，這時候使用QQ快捷鍵截圖吧慢，
// 然后取消截取涛漂，再次在控制臺打印該屬性值，又等于屏幕寬高，
// 當(dāng)然匈仗，這個問題我并不曉得瓢剿，
// 其他主流瀏覽器在全屏?xí)r外部寬高是等于屏幕寬高的，
// 還有一種情況悠轩，當(dāng)瀏覽器鋪滿時间狂，
// 除了 Google 內(nèi)核以外，其他主流瀏覽器的外部寬度大于屏幕寬度火架，
// 外部高度大于屏幕的可用高度鉴象，Google 內(nèi)核是相等的
// 所有主流瀏覽器都支持 outerWidth 和 outerHeight 屬性
// 注意：IE 8 及更早 IE 版本不支持該屬性
// 返回窗口的文檔顯示區(qū)的寬度
window.innerWidth
// 返回窗口的文檔顯示區(qū)的高度
window.innerHeight
// 所有主流瀏覽器都支持 innerWidth 和 innerHeight 屬性
// 注意：IE 8 及更早 IE版本不支持這兩個屬性
// 不管有沒有出現(xiàn)滾動條，值都是一樣的何鸡，如下圖
image.png
image.png
// 關(guān)于 window.innerWidth 和 window.innerHeight
// 有這么一個關(guān)系纺弊，這里是直接復(fù)制菜鳥教程的知識
// 有三種方法能夠確定瀏覽器窗口的尺寸
// 對于 Internet Explorer、Chrome骡男、Firefox淆游、Opera 以及 Safari
window.innerHeight
window.innerWidth
// 對于 Internet Explorer 8、7隔盛、6犹菱、5
document.documentElement.clientHeight
document.documentElement.clientWidth
// 或者
document.body.clientHeight
document.body.clientWidth
// 實用的 JavaScript 方案（涵蓋所有瀏覽器）
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
// 關(guān)于offsetHeight、clientHeight吮炕、scrollHeight腊脱、offsetWidth、clientWidth来屠、scrollWidth
// 我們先看個例子虑椎，如下圖
image.png
image.png
// 從得到的數(shù)據(jù)可以看出
// offsetHeight = 普通高度 + 填充部分（內(nèi)邊距）高度 + 邊框高度
// clientHeight = 紅色區(qū)域內(nèi)的高度震鹉，即普通高度 + 填充部分（內(nèi)邊距）高度 - 底下滾動條的高度
// scrollHeight 此時等于 clientHeight
// 其它的三種寬度同理
// 到這里還沒結(jié)束哦俱笛，因為沒有實際出現(xiàn)滾動條，所以還得下一步去驗證
// 如下圖
image.png
// 可以看出 scrollHeight传趾、scrollWidth 變了迎膜，所以
// 當(dāng)y軸未出現(xiàn)滾動條時，那么
// scrollHeight = clientHeight
// 當(dāng)y軸出現(xiàn)滾動條時浆兰，那么
// scrollHeight = 內(nèi)容高度 + 上半部填充部分（內(nèi)邊距）高度
// 關(guān)于 offsetLeft磕仅、clientLeft、scrollLeft簸呈、offsetTop榕订、clientTop、scrollTop
// 如下圖
image.png
// 從圖可知
// offsetLeft = 邊框外 距離左邊有多少px
// offsetTop = 邊框外 距離頂部有多少px
// clientLeft = 邊框?qū)挾?// clientTop = 邊框高度
// 接下來看有滾動條的情況
// 如下圖
image.png
// 可知
// scrollLeft = scrollWidth - clientWidth
// scrollTop = scrollHeight - clientHeight
// 在設(shè)置寬高的情況下蜕便，獲取寬高的屬性值為 px 字符串
// 如下圖
image.png
// 在未設(shè)置寬高的情況下劫恒，獲取寬高的屬性值為空字符串
// 如下圖
image.png
