css当中的盒子模型

一、盒子模型的种类

1.w3c盒子/内容盒子/标准盒子（box-sizing:content-box）

2.边框盒子/IE盒子/怪异盒子(box-sizing:border-box)

二、两个盒子的区别

1.w3c盒子：

（1）宽高是设置给内容的

（2）设置了padding、border之后整个盒子是由内容区向外扩

（3）宽高的计算公式

        宽：width + padding-left + padding-right + border-left + border-right

        高：height + padding-top + padding-bottom + border-top + border-bottom

  (4)w3c盒子页面所占宽高的计算公式

        宽：w3c盒子的宽 + margin-left + margin-right

        高：w3c盒子的高 + margin-top + margin-bottom

 

 

2.边框盒子

（1）如果设置了padding和border宽高是给内容+padding+border设置的内容占据的空间会随着padding和border的设置而变少

（2）宽高的计算公式

        宽：width=contentWidth + padding-left + padding-rigth + border-left + border-right

        高：height=contentHeight + padding-top + padding-bottom + border-top + border-bottom

 (3)边框盒子页面所占宽高计算公式

        宽：width + margin-left + margin-right

        高：height + margin-top + margin-bottom