什么是盒子模型

什么是盒子模型

把网页中所有的元素看作是一个盒子，具有content（内容），padding（内边距），border（边框），margin（外边距）四个属性，就构成了CSS中元素中的盒模型

盒模型的类型

1.标准盒模型：

width:100px;
height:100px;
padding:10px;
box-sizing:content-box;

此时盒子的实际宽高是120px,padding会将宽高撑开，content宽高是100px

如下图

2.ie盒模型：

width:100px;
height:100px;
padding:10px;
box-sizing:border-box;

此时盒子的实际宽高是100px,content宽高是80px

如下图：