2种盒子模型

标签：padding 盒子 模型 content 宽度 border 200px

1.标准盒子模型：(适用于除IE外浏览器)

包括：content(height+width);  padding;  margin;  border;

其width的宽度只包括content的宽度，不包括padding+ margin+ border的宽度

Box-sizing: content-box -;   //标准W3C盒子模型；

例如：当我定义一个div  宽度为200px时 ，我设置其padding和border后，其div的大小发生了变化(变大)；200px的宽度变成了200+padding+border的宽度；content的宽度仍为200px

 

2.IE盒子模型：(IE适用)

包括：content(height+width);  padding;  margin;  border;

其width的宽度不仅包括content的宽度，还包括padding+ border的宽度

Box-sizing: border-box ;    //IE盒子模型;

例如：当我定义一个div  宽度为200px时 ，我设置其padding和border后，其div的大小没有变化；200px的宽度仍是200px的宽度,只是其content的宽度发生了变化(变小)，以适应200px的宽度。

标签：padding,盒子,模型,content,宽度,border,200px
From： https://www.cnblogs.com/onlyperfect/p/17227747.html