CSS总结（三）—— 盒子模型（标准/IE下）

若盒子模型中的margin：20px,padding:10px,border:1px,content宽：200px,content高：50px.

在标准W3C盒模型中：

盒子占据位置：宽：20*2+10*2+1*2+200 = 262px;

                    高：20*2+10*2+1*2+50  = 112px;

盒子实际大小：宽：1*2+10*2+200 = 222px;

                    高：1*2+10*2+50 = 72px;

在IE盒模型中：

盒子占据位置：宽：20*2 + 200 = 240px;

                    高：20*2 + 50 = 90px;

盒子实际大小：宽：200px;

                    高：50px;

 

★ 标准盒模型中包含margin，padding，border，content，并且content部分不包含其他部分；而IE盒子中的content包含了 border 和 padding。

为了让网页能兼容各个浏览器，选择标准的W3C盒子模型，需要在网页顶部加DOCTYPE声明。