浏览器在计算元素宽度时的默认行为是将计算出的宽度和高度应用到内容区域，而不考虑任何填充、边框和边距。
这种方法被证明是相当复杂的工作。
您可以通过设置box-sizing属性来更改此行为。
box-sizing属性是一个很大的帮助。它有两个值:
border-boxcontent-box
content-box是默认的，在box-sizing成为一种东西之前，我们已经有很多年了。
border-box是我们正在寻找的新的伟大的东西。如果你在一个元素上设置它:
.my-div {
box-sizing: border-box;
}宽度和高度的计算包括填充和边框。只有边际被省略了，这是合理的，因为在我们的脑海中，我们通常也把它看作一个独立的东西:边际是在盒子之外的。
这个属性的变化很小，但影响很大。CSS技巧甚至宣布了一个国际box-sizing awareness 节日，只是说，它建议应用到页面上的每一个元素，开箱，用下面的方法:
*, *:before, *:after {
box-sizing: border-box;
}