IE的为是一个bug,但是IE的非标准盒模型通常也很有用。所以CSS3引进了 box-sizing 属性，默认值是 content-box ,它指定了上面描述的标准的盒模型。如果替换为 box-sizing:border-box ,浏览器将会为那个元素应用IE的盒模型，即width和height属性将包括border和padding,当想以百分比形式为元素是指总体尺寸，又想以像素单位指定border和padding时，边框盒模型特别有用
box-sizing 属性再当今所有浏览器中都支持，但是还没有不带前缀通用的实现。再Chrome和Safari中，使用 -webkit-box-sizing .在Firefox中，使用 -moz-box-sizing .在Opera和IE8及其更高的版本中，可以使用不带前缀的 box-sizing .
边框盒模型在未来CSS3中的一个可选方案是使用盒子尺寸计算值；
在IE9中支持使用 cale() 计算CSS的值，在Firefox为 -moz-cale()
转自 菜鸟教程
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括： 边距（外边距） ， 边框 ， 填充（内边距） ，和 实际内容 。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model)：
转自 链接
盒子模型有两种，分别是W3C盒子模型(标准盒模型)和IE盒子模型(怪异盒模型)
1.标准盒模型中width指的是内容区域content的宽度；height指的是内容区域content的高度。
2.标准盒模型下盒子的大小 = content + border + padding + margin
1.怪异盒模型中的width指的是内容、边框、内边距总的宽度（content + border + padding）；height指的是内容、边框、内边距总的高度
2.怪异盒模型下盒子的大小=width（content + border + padding） + margin
建议不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。
即box-sizing属性可以指定盒子模型种类，content-box指定盒子模型为W3C（标准盒模型），border-box为IE盒子模型（怪异盒模型）。
一、不能继承的属性
① 盒子模型所有属性：margin、padding、border、width、height。
② 轮廓及背景属性：outline、background。
③ 定位、显示、浮动属性：display、position、top、left、right、bottom、max-*（如max-height等）、overflow、clear、float、content、z-index。
④ 其他：vertical-align、text-decoration、text-shadow、white-space。
注意：内联元素不能继承：text-indent和text-align，但是块级元素可以。
二、元素可继承属性
① 所有元素可继承：visibility、cursor。
② 列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。
③ 字体属性：line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、font-size-adjust。
④ 文本属性：text-transform、direction，除了（text-decoration、text-shadow 内联元素不能继承 ） 块级 可继承。
⑤ 表格布局属性：caption-side、border-collapse、border-spacing、empty-cells、table-layout。
⑥ 其它属性：letter-spacing、word-spacing。
如果还有您知道的，希望可以留言补充。
如果喜欢，不要吝啬你的爱心“❤”哦！
