CSS关于盒子模型真实宽高怎么计算

关于css盒子模型真实宽高怎么计算

例如：一个盒子宽为200px，高为100px，边框border为10px，内边距padding是20px
如图；

计算：
实际宽：width+左border+左padding+右border+右padding=实际width
（10px+20px+200px+20px+10px=260px）
注意：（这里的padding值是可变的 因为是上右下左 四个属性，可以设置不同的四个值，所以为了区分写成了左右paddin）border同理

实际高：height+上border+上padding+下border+下padding=实际height
（10px+20px+100px+20px+10px=160px）