网页就是由许多个盒子通过不同的排列方式堆积而成，网页上每个HTML元素都被浏览器看成一个矩形的盒子，这个盒子由元素的内容，填充，边框，边界组成。默认盒子边框背景 {MOD}透明，默认看不到盒子。下图说明了盒子模型 不同部分的说明：

• Margin(外边距) - 清除边框外的区域，外边距是透明的。
• Border(边框) - 围绕在内边距和内容外的边框。
• Padding(内边距) - 清除内容周围的区域，内边距是透明的。
• Content(内容) - 盒子的内容，显示文本和图像。

 

两种盒子模型

一种是W3C的标准盒子模型；一种是IE的盒子模型。 首先是W3C的标准盒子模型 在标准盒子模型中，width指的是content 第二种是IE的盒子模型 在IE的盒子模型中，width表示content+padding+border这三部分的宽度。 这些我们在浏览器调试的时候都能看的到每个元素的盒子说明图。  

盒子模型与DOCTYPE

        那到底该用哪种模型呢？当然是W3C标准盒子模型了，W3C标准盒子模型兼容所有浏览器。那该怎么确定页面渲染是按照W3C标准盒子模型呢？只要在页面顶部加上DOCTYPE 申明（申明说明），浏览器就会按照W3C标准渲染，如果不加DOCTYPE申明，浏览器会按照本身默认标准去渲染页面，除IE外所有浏览器按照W3C标准盒子模型渲染页面，至于IE吧，当然会按照IE盒子模型渲染页面了，只要加上DOCTYPE强制IE采用标准盒子模型渲染页面。 我们常见的就是，它是指示 web 浏览器关于页面使用 HTML5 版本进行编写的指令。  

举个例子

我们设置了内容（content）、外边距（margin）、边框（border）、内边框（padding）。 如果是标准盒子模型，那么width=300(content)，height=400(content) 如果是IE盒子模型，那么 width=300(content)+20(padding)*2+5(border)*2 height=400(content)+20(padding)*2+5(border)*2  

切换盒子模型：使用box-sizing

box-sizing: content-box 这个是W3C盒子模型 box-sizing: border-box 这个是IE盒子模型 默认box-sizing的属性是content-box