理解 .item{width: 100%;}

一、item 的宽度（content）等于它父亲的宽度（content）

• 测试代码

<div class="parent">
  <div class="child"></div>
</div>

.parent{
  margin:20px;
  border:20px solid red;
  padding:20px;
  width:40px;
  height:40px;
}
.child{
  border:10px solid blue;
  padding:10px;
  width:100%;
  height:10px;
}

• 效果展示：显然，item 的宽度（content）等于它父亲的宽度（content），且由于子标签设置了 border 和 padding，所以父标签的 content 无法全部容纳子标签，产生溢出现象，此例子的宽度和高度都已经产生了溢出。

二、如果设置了 box-sizing: border-box，那么，item 的宽度（包括 border、padding、content）等于它父亲的宽度（content）

• 测试代码

*{box-sizing:border-box}
.parent{
  margin:20px;
  border:20px solid red;
  padding:20px;
  width:200px;
  height:40px;
}
.child{
  border:10px solid blue;
  padding:10px;
  width:100%;
  height:10px;
}

• 效果展示

三、结论

• 没有设定 box-sizing: border-box 时，子元素的 width: 100%，等价于子元素 content = 父元素的 content。
• 设定 box-sizing: border-box 后，子元素的 width: 100%，等价于子元素 content+padding+border = 父元素的 content。