HTML CSS盒子模型 属性意思求解
有大佬能简短的阐述一下吗?
我们都知道div可以通过width设定宽度，但是设置的仅仅是内容区的宽度，一个盒子的宽度你所看见的宽度不止有内容区，还有padding和border，至于margin应该不属于盒子本身了我们不考虑。
而设定盒子模型就是box-sizing这个属性，盒子的默认模型是content-box。有时候我们想要固定一个盒子的宽度为100px，如果padding和border都为20一左一右共计就占了80px，那么盒子的实际宽度就成了180px。如果我们想要它实际为100px我们只能设置width为20px，每次padding和border存在时我们可能得去计算它们的宽度再用100减去之后再赋值给width，太麻烦了。这时候不同的盒子模型就能帮我们解决。
而box-sizing这个属性，设定为border-box以后，你只要固定了width为100px，你接下来如何设置padding和border，盒子都会自动计算内容区还剩多少可用，反正会让这个盒子固定为100px。
一般用的最多的就是默认box-sizing为content-box和设置box-sizing为border-box