css3盒模型有W3C盒子模型(标准盒模型)和IE盒子模型(怪异盒模型)、弹性盒子模型(Flex Box Model)三种。
一、W3C盒子模型(标准盒模型)
根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。
即在标准模式下的盒模型，盒子实际内容（content）的width/height=我们设置的width/height;盒子总宽度/高度=width/height+padding+border+margin。
二、IE盒子模型(怪异盒模型)
在该模式下，浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
在怪异模式下的盒模型，盒子的（content）宽度+内边距padding+边框border宽度=我们设置的width(height也是如此)，盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin。
如果想要切换盒模型也很简单，这里需要借助css3的box-sizing属性
box-sizing: content-box 是W3C盒子模型
box-sizing: border-box 是IE盒子模型
三、CSS3 弹性盒子模型(Flex Box Model)
弹性盒子是 CSS3 的一种新的布局模式。
CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
推荐：css3手册
以上就是css3盒子模型有几种？的详细内容，更多请关注易知道|edz.cc其它相关文章！
