盒子模型总结

1、CSS盒子模型

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

 

 

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

 

 

 

 

 

 

 

 

 

 

 

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

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

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

 

 

怪异盒子模型（IE）

 

 

 width=content+padding+border

 盒子的总高度=width+margin

 

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

 

3、css3指定盒子模型类型

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

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

 

来源：https://www.cnblogs.com/xingxyx/p/11669663.html