盒模型：

代码：

<div class="content-box">Content box</div>
<br />
<div class="border-box">Border box</div>
div {
  width: 160px;
  height: 80px;
  padding: 20px;
  border: 8px solid red;
  background: yellow;
}

.content-box {
  box-sizing: content-box;
  /* Total width: 160px + (2 * 20px) + (2 * 8px) = 216px
     Total height: 80px + (2 * 20px) + (2 * 8px) = 136px
     Content box width: 160px
     Content box height: 80px */
}

.border-box {
  box-sizing: border-box;
  /* Total width: 160px
     Total height: 80px
     Content box width: 160px - (2 * 20px) - (2 * 8px) = 104px
     Content box height: 80px - (2 * 20px) - (2 * 8px) = 24px */
}


标准盒模型（默认模型）

box-sizing: content-box;

内容宽度: 160
内容高度: 80

盒模型以及相关dom API_JavaScript


怪异盒模型

box-sizing: border-box;

总共宽度: 104+20+20+8+8 = 160

总共高度:  8+20+24+20+8 = 80

内容宽度: 160px - (2 * 20px) - (2 * 8px) = 104px
内容高度:  80px - (2 * 20px) - (2 * 8px) = 24px

盒模型以及相关dom API_JavaScript_02


宽度属性以及API（高度类似）:

（1）clientWidth

  • 包含内边距，不包括边框、外边距和垂直滚动条宽度
  • 值是整数

   按上面的例子（值是不带单位的）：

   content-box: 200

   border-box: 144

盒模型以及相关dom API_JavaScript_03


（2）offsetWidth

  • 包含边框、内边距和垂直滚动条宽度
  • 如果元素隐藏或者父节点style.display的值设置为none，返回0
  • 值是整数

   按上面的例子（值是不带单位的）：

   content-box: 216

   border-box: 160

盒模型以及相关dom API_JavaScript_04


（3）scrollWidth

  • 包括内边距，不包括边框、外边距和垂直滚动条宽度
  • 包含伪元素::before和::after
  • 没有水平滚动条，等同于clientWidth
  • 值是整数

   按上面的例子（值是不带单位的,水平没有滚动条）：

   content-box: 200

   border-box: 144

（4）getBoundingClientRect

  • 值可以为小数，需要比较精确可以用这个api

盒模型以及相关dom API_JavaScript_05


 按上面的例子（值是不带单位的）：

 宽度 = 内容宽度+ 内边距 + 边框

  content-box: {
    "x": 8,
    "y": 8,
    "width": 216,
    "height": 136,
    "top": 8,
    "right": 224,
    "bottom": 144,
    "left": 8
}

  border-box: {
    "x": 8,
    "y": 162.40000915527344,
    "width": 160,
    "height": 80,
    "top": 162.40000915527344,
    "right": 168,
    "bottom": 242.40000915527344,
    "left": 8
}

最后

最近在搞web端自定义打印模板，需要去计算元素的各种属性值，记录下来做知识点的归纳

盒模型以及相关dom API_JavaScript_06