【CSS】盒子模型宽度计算（包括offsetWidth和clientWidth）

1. 前言

  在 CSS 中，形如 <div> 标签形成的方块，就是盒子模型。盒子模型的宽度会由多个因素引起变化，具体的计算方法如下部分所示。

2. 盒子模型宽度计算

1）这里先列出几个重要的概念

• clientWidth：可视内容的宽度
  

• scrollWidth：实际内容的宽度
  

• offsetWidth：控件元素的实际宽度
  

2）首先抛出一个问题，如下代码，不考虑滚动条宽度， offsetWidth 和 clientWidth 分别是多少？

① box-sizing: content-box

#div {
	height: 100px;
	width: 100px;
	margin: 10px;
	padding: 3px;
	border: 6px solid #ff66cc;
}

在没有设置 box-sizing 属性，默认情况下该盒子为 content-box 类型，因此

offsetWidth = width + padding(包含左右内边距) + border(包含左右边框) = 118px

clientWidth = width + padding(包含左右内边距) = 106px

② box-sizing: border-box

#div {
	height: 100px;
	width: 100px;
	margin: 10px;
	padding: 3px;
	border: 6px solid #ff66cc;
    box-sizing: border-box;
}

在 box-sizing 设置了 border-box 后，计算方式发生了改变，如下：

offsetWidth = width = 100px

clientWidth = width - border(包含左右边框) = 88px

而真正的内容区域宽度 = offsetWidth - border(包含左右边框) - padding(包含左右内边距)

3）box-sizing

由上述可知，box-sizing 会影响到盒子模型的宽度计算

当值为 content-box 时，盒子宽度只等于 内部的内容宽度

当值为 border-box 时，盒子宽度包含了 边框和内边距

3. 结论

	content-box	border-box
offsetWidth	width + padding + border	width
clientWidth	width + padding	width - border