普通盒子和IE盒子的区别

我们一般所说的普通盒子就是正常设定宽高的盒子，也就是W3C盒子

这种盒子的设定方法width和height就是盒子的内容区域有多宽有多高，如果加入内边距padding和border将会把盒子撑大，因此这类盒子的计算为：

内容区大小：宽=width   高=height

盒子的宽

width+paddingLeft+paddingRight+borderLeft+borderRight

盒子的高

height+paddingTop+paddingBottom+borderTop+borderBottom

所占屏幕空间的宽

width+paddingLeft+paddingRight+borderLeft+borderRight +marginLeft+marginRight

所占屏幕空间的高

height+paddingTop+paddingBottom+borderTop+borderBottom +marginTop+marginBottom

 

第二种盒子就是IE盒子

 在代码中所设定的width和height就是包括了内边距padding和border的大小，所以当内边距很大的时候，将会挤压内部内容区域的空间

设定的width = 内容的width

+ padding-left + padding-right

+ border-left + border-right

  内容区的宽

width-paddingLeft-paddingRight-borderLeft-borderRight

内容区的高

height-paddingTop-paddingBottom-borderTop-borderBottom

  盒子的宽

width

盒子的高

height

所占屏幕空间的宽

width+marginLeft+marginRight

所占屏幕空间的高

height+marginTop+marginBottom

IE盒子的设定一般是固定了盒子的大小不能改变，为方便计算padding和border的值，而设置的。