关于学习css盒模型的总结

box-sizing：border-box;这样设置，width属性是所有可见部分的宽度和，即盒子的宽度=外边距margin+边框border+内边距padding+填充内容的宽度，盒子总宽度不会变，内容的宽度会随着边距的增加而减小；如果设置为content-box，那总的盒子的宽度会变大，所设置的width属性的值就是填充内容的宽度值，再加上内外边距和边框，这样总的盒子宽度就变大了。

如下图，我设置盒子宽度值为400px,盒模型为border-box，盒子总宽度不会因为设置内外边距和边框而变化，内容宽度会因为设置了内外边距和边框而变化。

如果我设置为content-box，则如下图所示，内容宽度就是盒子的总宽度，内容宽度不会变了，但是设置了内外边距和边框会导致盒子总宽度变化，这就是两者的区别，在实际应用中选择相应模式进行操作，有利于我们完成任务。