css一个盒子的实际大小 |css3 图片特效

.box {
width: 200px;
height: 100px;
padding: 20px;
border: 2px solid black;
margin: 10px;
}

上面这个CSS代码定义了一个宽200像素、高100像素的盒子。其中padding属性设置了内边距为20像素，border属性给盒子加上了2像素的黑色实线边框，margin属性设置了外边距为10像素。

因此，这个盒子的实际宽度是：200px + 2px（左右边框宽度） + 20px（左右内边距宽度） + 10px（左右外边距宽度）= 234px。

同样地，这个盒子的实际高度是：100px + 2px（上下边框宽度） + 20px（上下内边距宽度） + 10px（上下外边距宽度）= 134px。