CSS的两种盒模型

通过学习，我现在的理解是
盒模型就是盒子包裹HTML元素，四个属性从内到外分别是，content（内容），padding（内填充），border（边框），margin（外边距）
用一个例子来说明
设一个类名为box的盒子固定宽高 width:100px hight:100px
边框为1px 实线 黑色 border : 1px solid black
内填充 padding：10px
外边距 margin：50px

1.W3C盒模型（正常的盒模型）

box-sizing: content-box
此刻类名为box盒子
宽 width=122px
高 hight=122px
此刻盒子的宽 width=content（100px）+左右padding（2 x 10px = 20px）+ 左右border（2 x 1px = 2px）
盒子的高同理
padding和border加在了盒子外（可以撑大盒子）
具体盒模型的则还需要加上margin的值

2.IE盒模型（怪异盒模型）

box-sizing:border-box
此刻类名为box盒子
宽 width=100px
高 hight=100px
此刻盒子的宽 width= content(78px) + 左右padding（20px）+ 左右border（2px）
盒子的高同理
“可理解成固定了宽高” padding和border是加在了盒子里面
具体盒模型的则还需要加上margin的值