盒子模型总结

1、CSS盒子模型

      所有的HTML元素都可以看做盒子，包括：实际内容（content），内边距（padding），边框       （border），外边距（margin）四个属性

2、标准盒子模型和IE盒子（怪异）模型

盒子的实际内容content的width/height=我们设置的width/height

盒子总宽度=width/height+padding+margin+border

.box {
   200px;
  height: 200px;
  border: 20px solid black;
  padding: 50px;
  margin: 50px;
  }

怪异盒子模型（IE）

 

 width=content+padding+border

 盒子的总高度=width+margin

.box {
   200px;
  height: 200px;
  border: 20px solid black;
  padding: 50px;
  margin: 50px;
  }

3、css3指定盒子模型类型

标准盒模型：box-sizing：content-box

IE（怪异）盒模型：box-sizing:border-box