关于 100vw ，100% ，offsetWidth，clie

以下 DEMO 均在 Chrome 浏览器下运行，转载请署名，效果请核实，错误请指出

一、关于 100vw 和 100%

• 背景条件
  1.通过添加元素，使得垂直方向总高度超出页面，撑出垂直滚动条
  2.设置蓝色 100vw，灰色 100%（两个元素平级，且父级均为 body 标签）

关于 100 VW 和 100%
关于 100 VW 和 100%
关于 100 VW 和 100%

• 结论如下：

  1. 见表格

  名称	100 VW	100%
  定义	浏览器可视区宽度	占父级的 100%
  滚动条	包含滚动条	不包含

  2. html 的 offsetWidth 取到的值为：不包含滚动条的页面的宽度

---

二、关于 offsetWidth 和 clientWidth

• 概念
  引用《高程》上的定义及图片：

  • offsetWidth：元素在水平方向上占用的空间大小，以像素计。包括元素的宽度、（可见的）垂直滚动条的宽度、左边框宽度和右边框宽度

    
    offsetWidth

  • clientWidth：元素内容宽度加上左右内边距的宽度

    
    clientWidth

• 背景条件

  <div class="father">    // 黑
    <div class="orange"></div>    // 橙
  </div>
  <div class="blue"></div>    // 蓝
  <div class="green"></div>    // 绿
  

不同情况下的 offsetWidth 和 clientWidth 对比

• 结论：

1. 上下两个元素 offsetWidth 的值都为 500px，可以得出结论：offsetWidth 包含边框和滚动条
2. clientWidth 与 offsetWidth 的差别就在于：clientWidth 不包含边框及滚动条

---

三、矛盾点

• 以上两个问题出现了一个矛盾，offsetWidth 到底包不包含滚动条？
  答：包含。
  第一个例子的滚动条虽然是我们 "撑" 出来的，但不属于任何标签，是浏览器自带的，而第二个例子才是我们创建出来的滚动条，它属于 div.father 的一部分。