网页就是由许多个盒子通过不同的排列方式堆积而成，网页上每个HTML元素都被浏览器看成一个矩形的盒子，这个盒子由元素的内容，填充，边框，边界组成。默认盒子边框背景色透明，默认看不到盒子。下图说明了盒子模型
不同部分的说明：
- 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采用标准盒子模型渲染页面。
我们常见的<!DOCTYPE html>就是，它是指示 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
扫一扫
1038
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
