CSS盒模型

两种盒模型

盒模型的组成，由里向外分别是：content, padding, border, margin

盒模型又分为标准盒模型和 IE 盒模型

 

从上面两图可以看出，在标准模型中，盒模型的宽高只是 内容(content)的宽高；而在 IE 模型中，盒模型的宽高是 内容(content) + 填充(padding) + 边框(border) 的总宽高

 

如何设置两种盒模型

  1. 标准模型：

box-sizing:content-box;

  2. IE 模型

box-sizing: border-box;