前段时间为了面试疯狂背诵八股文，但是到笔试的时候，却被一道很简单的窗口大小的题目给难住了。也是在背诵八股文过程看的太粗糙，并没有深入理解元素每种宽度或高度代表的真正含义。撰写本文也是为了深入了解，防止混淆。

一、CSS 盒子模型

HTML文档中的每个盒子都可以看成是由从内到外的四个部分构成，即内容区（content）、内边距(padding)、边框(border)和外边距(margin)。

（1）内容区（content）

内容区是盒子模型的中心，它呈现了盒子的主要信息内容，这些内容可以是文本、图片等多种类型。

内容区有三个属性：width、height 、overflow。

width：指定盒子内容区的宽度。
height：指定盒子内容区的高度。
overflow：当内容信息太多，超出内容区所占范围时，可以使用 overflow 溢出属性来指定处理方法。
- hidden：溢出部分将不可见；
- visible：溢出的内容信息可见，只是被呈现在盒子的外部；
- scroll：滚动条将被自动添加到盒子中，用户可以通过拉动滚动条显示内容信息；
- auto：由浏览器决定如何处理溢出部分。

（2）内边距（padding）

内边距是内容区和边框之间的空间。设置盒子背景色属性时，可使背景色延伸到填充区域。

（3）边框（border）

边框是环绕内容区和填充的边界。

边框的属性有border-style、border-width和border-color 以及综合了以上三类属性的快捷边框属性 border。

border-style：边框最重要的属性，如果没有指定边框样式，其他的边框属性都会被忽略，边框将不存在。
border-width：指定边框的宽度，其属性值可以是长度计量值，也可以是CSS规定的thin、medium 和thick
border-color：为边框指定相应的颜色，其属性值可以是 RGB 值，也可以是CSS 规定的17个颜色名。

（4）外边距（margin）

外边距位于盒子的最外围，是添加在边框外周围的空间。空白边使盒子之间不会紧凑地连接在一起。

box-sizing 属性

定义如何计算一个元素的总宽度和总高度。其实就是确定width 和 height 属性指的是内容区的宽高，还是整个盒子模型的宽高。

content-box（默认）
- height = 内容区高度
- width = 内容区宽度
- width(宽度) + padding(内边距) + border(边框) = 元素实际宽度
- height(高度) + padding(内边距) + border(边框) = 元素实际高度
border-box
- height = 元素实际高度
- width = 元素实际宽度
- 内容区宽度 = width(宽度) - padding(内边距) - border(边框)
- 内容区高度 = height(高度) - padding(内边距) - border(边框)

二、几何大小

第一节简单介绍了一下盒子模型，但本文的重点并不在此，而是各种几何大小。

我们由内向外来看上图：

2.1 clientWidth / clientHeight

元素边框内区域的大小，即它们包括了 “content width” 和 “padding”，但不包括滚动条宽度（scrollbar）

clientWidth = content width + padding - scroll width
clientHeight = content height + padding - scroll height

2.2 offsetWidth / offsetHeight

元素完整的大小，即包含了 “content width” 、 “padding”、以及“border”

offsetWidth = content width + padding + border width
offsetHeight = content height + padding - border height

2.3 scrollWidth / scrollHeight

该属性与clientWidth/clientHeight类似，但它们还包括滚动出（隐藏）的部分

scrollWidth = content width + padding + 滚动部分宽度 - scroll width
scrollHeight = content height + padding+ 滚动部分高度 - scroll height

2.4 scrollLeft / scrollTop

属性 scrollLeft/scrollTop 是元素的隐藏、滚动部分的 width/height。

换句话说，scrollTop 就是“已经滚动了多少”。

2.5 clientLeft / clientTop

边框的宽度

clientLeft = 左边框宽度
clientTop = 上边框宽度

2.6 offsetParent offsetLeft / offsetTop

offsetParent 是最接近的祖先（ancestor），在浏览器渲染期间，它被用于计算坐标。

offsetLeft/offsetTop 提供相对于 offsetParent 左上角的 x/y 坐标。

我们通过一个例子来看如上的几何属性：
代码如下：

<style>
    #example {
        width: 300px;
        height: 200px;
        border: 25px solid #E8C48F;
        margin: 10px;
        padding: 20px;
        overflow: auto;
    }
</style>
    
<div id="example">
        开头
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        结尾
    </div>

各个几何大小如下所示：

clientWidth： 323  ——  283 + 20 + 20
clientHeight： 240  ——  200 + 20 + 20

offsetWidth： 390  ——  300 + 25 + 25 + 20 + 20
offsetHeight： 290  ——  200 + 25 + 25 + 20 + 20

scrollWidth： 323
scrollHeight： 2541

scrollLeft： 0
scrollTop： 0

clientLeft： 25
clientTop： 25

offsetParent： <body>…</body>
offsetLeft： 10
offsetTop： 10

小结

以 client 开头的几何属性一般与元素边框内部区域相关。clientLeft / clientTop 是元素内部与边框的距离
以 offset 开头的几何属性一般与整个元素相关（带边框），offsetLeft / offsetTop 是边框与父级的距离
以 scroll 开头的集合属性一般与滚动区域相关。
滚动条的宽度不包含在元素内部，但包含着整个元素内。

上述这些几何属性不会受到 box-sizing 属性的影响

三、浏览器和屏幕大小

（1）Window.innerWidth / window.innerHeight

浏览器的视口大小，即显示内容的区域。

Window.innerWidth: （只读）返浏览器窗口的视口（viewport）宽度（以像素为单位）；如果垂直滚动条存在，则这个属性将包括它的宽度。
window.innerHeight:（只读）浏览器窗口的视口（viewport）高度（以像素为单位）；如果有水平滚动条，也包括滚动条高度

（2）Window.outerWidth / Window.outerHeight

浏览器窗口大小，包括地址栏、标签栏等

Window.outerWidth：（只读）获取浏览器窗口外部的宽度（单位：像素）。包括侧边栏（如果存在）、窗口镶边（window chrome）和调正窗口大小的边框（window resizing borders/handles）。
Window.outerHeight：（只读）整个浏览器窗口的高度（单位：像素），包括侧边栏（如果存在）、窗口镶边（window chrome）和窗口调正边框（window resizing borders/handles）。

（3）window.screen.availWidth / window.screen.availHeight

window.screen.availWidth：返回浏览器窗口在屏幕上可占用的水平空间，即最大宽度。（屏幕宽度减去系统组件的宽度）
window.screen.availHeight:返回浏览器窗口在屏幕上可占用的垂直空间，即最大高度。（屏幕高度减去系统组件的高度）

（4）window.screen.width / window.screen.height

height：返回屏幕的高度。
width：返回屏幕的宽度。

以我的电脑为例：

window.innerWidth： 1440
window.innerHeight： 366

window.outerWidth： 1440
window.outerHeight： 912

window.screen.availWidth： 1440
window.screen.availHeight： 912

window.screen.width： 1440
window.screen.height： 960

小结

Window.innerWidth / window.innerHeight 和 Window.outerWidth / Window.outerHeight是针对于浏览器而言的，浏览器大小改变时，它们的值会相应改变。两者的区别在于是否包含标签栏、地址栏等
window.screen.availWidth / window.screen.availHeight 与 window.screen.width / window.screen.height是针对于屏幕而言的，针对不同的设备会有不同的值，两个区别在于是否包含系统组件。

最后需要注意的是：document.documentElement 和 document.body 分别指的是HTML文档中的 HTML 元素和 body 元素，它们的一些几何属性看第二节中的描述，不要与浏览器和屏幕的大小混淆。

本文到此就结束啦！

参考：元素大小和滚动

浏览器窗口以及元素的大小