CSS：关于盒子模型的那些事

标准盒子模型：

宽度=内容宽度（content）+ border + padding

 

怪异盒子模型（低版本IE盒子模型）：

宽度=内容宽度（content+border+padding）

 

相关CSS3属性——box-sizing

box-sizing:content-box(标准盒子模型，宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框)

box-sizing:border-box(怪异盒子模型，指定宽度和高度（最小/最大属性）确定元素边框。也就是说，对元素指定宽度和高度包括了 padding 和 border 。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。)

 

javascript相关拓展：

1.clientWidth//宽度+padding

2.offsetWidth//宽度+padding+border

3.width         //宽度