css中盒模型是什么意思

小编给大家分享一下css中盒模型是什么意思，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

创新互联公司自2013年创立以来，先为大竹等服务建站，大竹等地企业，进行企业商务咨询服务。为大竹企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

CSS3盒模型是CSS技术所使用的一种思维模型，指在一个网页文档中，每个元素都被呈现为一个矩形的盒子，描述了元素所占空间的内容。css有两种盒模型：W3C盒模型（标准盒模型）和IE盒模型（怪异盒模型）。

1、什么是CSS盒模型

CSS3盒模型就是CSS技术所使用的一种思维模型，指在一个网页文档中，每个元素都被呈现为一个矩形的盒子，描述了元素所占空间的内容。

盒模型，顾名思义，就是一个盒子。生活中的盒子，有长宽高，盒子本身也有厚度，可以用来装东西。页面上的盒模型我们可以理解为，从盒子顶部俯视所得的一个平面图，盒子里装的东西，相当于盒模型的内容（content）；东西与盒子之间的空隙，理解为盒模型的内边距（padding）；盒子本身的厚度，就是盒模型的边框（border）；盒子外与其他盒子之间的间隔，就是盒子的外边距（margin）。

元素的外边距（margin）、边框（border）、内边距（padding）、内容（content）就构成了CSS盒模型。

图1. 盒模型示意图

2、IE盒模型和W3C盒模型

CSS盒模型分为IE盒模型（图2）和W3C盒模型（图3）。其实，IE盒模型是怪异模式（Quirks Mode）下的盒模型，而W3C盒模型是标准模式（Standards Mode）下的盒模型。

IE6及其更高的版本，还有现在所有标准的浏览器都遵循的是W3C盒模型，IE6以下版本的浏览器遵循的是IE盒模型。

图2. IE盒模型

图3. W3C盒模型

从上图直观的可以看出，IE盒模型的宽度或者高度计算方式为：width/height = content + padding + border，W3C盒模型的宽度或者高度计算方式为：width/height = content。

举一个简单的例子：一个div的宽度和高度为100px，内边距为10px，边框为5px，外边距为30px。图4为不同模型下显示的结果，W3C盒模型下显示的div所占的总宽度和总高度（包括外边距、边框、内边距、内容）为100 + 10 + 5 + 30 = 145px，IE盒模型下显示的div所占的总宽度和总高度（包括外边距、边框、内边距、内容）为100 + 30 = 130px。很明显的区别，如果元素的宽度（width）一定的情况下，W3C盒模型的宽度（width）不包括内边距和边框，IE盒模包括。

代码如下：

  div01