对盒子模型的理解

（整理自网络）

1、盒子模型有两种，W3C和IE盒子模型（padding-border-margin模型）

从直观上而言，margin用于控制块与块之间的距离。倘若将盒子模型比作展览馆里展出的一幅幅画，那么content就是画面本身，padding就是画面与画框之间的留白，border就是画框，而margin就是画与画之间的距离。

包括margin、border、padding、content ，元素的width=content的宽度

其与W3C盒子区别在于它的content 部分包含了 border 和 padding。

那应该选择哪中盒子模型呢？当然是“标准 w3c 盒子模型”了。怎么样才算是选择了“标准 w3c 盒子模型”呢？很简单，就是在网页的顶部加上 doctype 声明。假如不加 doctype 声明，那么各个浏览器会根据自己的行为去理解网页，即 ie 浏览器会采用 ie 盒子模型去解释你的盒子。

我个人认为W3C定义盒子模型与IE定义的盒子模型，IE定义的比较合理，元素的宽度应该包含border（边框）和padding（填充），这个和我们现实生活的盒子是一样的，W3C也认识到自己的问题了，所以在 CSS3 中新增了一个样式box-sizing，包含两个属性content-box 和 border-box。

语法：box-sizing:content-box|border-box|inherit

设置box-sizing:border-box以后，如果想要一个宽度为200px的盒子，那么我们直接设置宽度为200px。当再设置它的左右边框和左右补白后，它的内容区会自动调整（向里缩进）。

DOM是 Document Object Model的缩写，即“文档对象模型”。一个网页的所有元素组织在一起，就构成了一个棵“DOM”树。

一个HTML文档并不是一个简单的文本文件，而是一个具有层次结构的逻辑文档，每一个HTML元素都作为这个层次结构中的一个节点存在。每个节点反应在浏览器上回具有不同的表现形式，具体的表现形式是由CSS来决定的。

CSS的目的是使网页的表现形式与内容结构分离，CSS控制网页的表现形式，HTML控制网页的内容结构。

“标准文档流”简称“标准流”。指在不适用其他的与排版和定位相关的特殊CSS规则是，各种元素的排列规则。

1. 块级元素（blocklevel）

总是以一个块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右撑满。

2. 行内元素（inline）

标记本身不占有独立的区域，仅仅实在其他元素的基础上指出了一定的范围。

行内元素在DOM树种同样是一个节点。从DOM的角度来看，块级元素和行内元素是没有区别的，都是树上的一个节点；而从CSS的角度来看，二者有很大的区别，块级元素拥有自己的区域，行内元素则没有。

标准流就是CSS规定的默认的块级元素和行内元素的排列方式。

3. 标记和标记

是一个块级元素，他保卫的元素会自动换行。而仅仅是一个行内元素，在它的前后不会换行。

4. 盒子在标准流中的定位原则

（1）行内元素之间的水平margin

当两个行内元素紧邻时，他们之间的距离为 第一个元素的 margin-right 加上第2个元素的margin-left。

（2）块级元素之间的竖直margin

两个竖直块级元素之间的距离不是margin-bottom与margin-top的总和，而是两者中的较大者。这个现象称为 margin 的“塌陷”现象。

（3）嵌套盒子之间的margin

如果父div的高度值小于子块div的高度加上margin的值，此时IE浏览器会自动扩大，保持子元素的margin-bottom的空间以及父元素自身的padding-bottom。而firefox会保证父元素的高度完全吻合，子元素会超出父元素的范围。

CSS规范中有四个宽度和高度的相关属性，为：min-height、max-height、min-width、max-width。 IE浏览器不支持。

（4）将margin设置为负值

当margin设为负数时，会使被设为负数的块向相反的方向移动，甚至覆盖在另外的块上。

盒模型是CSS中一个十分重要的概念，掌握好它对网站的构建有十分深刻的作用。

盒子模型可分为两种，标准w3c盒模型以及IE盒模型。这篇文章就是探讨这两者以及具体应用。

html文档中的每个元素都被描绘成矩形盒子，这些矩形盒子通过一个模型来描述其占用空间，这个模型称为盒模型。

盒模型通过四个边界来描述：margin（外边距），border（边框），padding（内边距），content（内容区域）

概念： ie 盒子模型的范围包括 margin、border、padding、content，和标准 w3c 盒子模型不同的是：ie 盒子模型的 content 部分包含了 border 和 pading。

例如一个盒子模型如下：margin:40px,border:20px,padding:20pxwidth:200pxheight:100px

则用IE盒模型来解释为：

该盒子在网页中占据的大小有：

高：40x2+100=180px

宽：40x2+200=280px

盒子的实际大小为：高：100px；宽：200px；

概念：盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。

如上面的盒子模型：

margin:40px,border:20px,padding:20pxwidth:200pxheight:100px

则用w3c标准盒模型解释：

该盒子在网页中占用大小：

高：40x2+20x2+20x2+100=260px

宽：40x2+20x2+20x2+200=360px

盒模型实际大小：

高：20x2+20x2+100=180px

宽：20x2+20x2+200=280px

---