Css盒模型有哪几部分，标准盒模型和IE盒模型有哪些区别

首先介绍Css的盒模型也就是标准盒模型（BOX Model）

包含了 内容（content） 内边距（padding） 边框（border） 外边框（margin）

 

这是大家经常用到的，也是现在的标准，其实IE的盒子结构和标准基本一样，但是IE盒模型content包含了padding 和  border

 

 标准盒子实际宽 width = content +margin+padding+border IE盒子的实际宽 width = content+margin

 

box-sizing属性是用户界面属性里的一种，之所以介绍它，是因为这个属性跟盒子模型有关，而且在css reset中有可能会用到它。

box-sizing : content-box|border-box|inherit;

(1) content-box ,默认值，可以使设置的宽度和高度值应用到元素的内容框。盒子的width只包含内容。

　　即总宽度=margin+border+padding+width

(2) border-box , 设置的width值其实是除margin外的border+padding+element的总宽度。盒子的width包含border+padding+内容

　　即总宽度=margin+width

很多CSS框架，都会对盒子模型的计算方法进行简化。

(3) inherit , 规定应从父元素继承 box-sizing 属性的值

关于border-box的使用：

1 一个box宽度为100%，又想要两边有内间距，这时候用就比较好
2 全局设置 border-box 很好，首先它符合直觉，其次它可以省去一次又一次的加加减减，它还有一个关键作用——让有边框的盒子正常使用百分比宽度。