div盒子究竟占多大面积实际的宽度高度如何计算

作者：佚名字体：[增加减小] 来源：互联网时间：2017-08-06

本文主要包含div盒子等相关知识,佚名希望在学习及工作中可以帮助到您

div：width---300px,height---300px,border---50px,padding---50px,margin---50px

实际的宽度是：300(width)+50(padding-left)+50(padding-right)+50(border-left)+50(border-right)+50(margin-left)+50(margin-right);

实际高度:300(height)+50(padding-top)+50(padding-bottom)+50(border-top)+50(border-bottom)+50(margin-top)+50(margin-bottom);

文字部分是width*height,文字部分外蓝色部分是padding,红色部分是border,margin部分在图中没显示。