【HTML】width和height受box-sizing的影响

box-sizing设置为以下值时，width指向的高度：

box-sizing:content-box
在宽度和高度之外绘制元素的内边距和边框，即宽度和高度不包含padding和border的，此时的width和height指的是下图中用红框框起来的蓝色部分：

 

box-sizing:border-box
在已设定的宽度和高度内绘制内边距和边框,即宽度和高度包含padding和border的，此时的width和height如下图：

 

box-sizing:inherit
从父元素继承 box-sizing 属性的值，看父元素的啦。

另：一般不设置box-sizing时，默认用content-box（个别浏览器除外）