css-盒子模型

最近在工作中遇到很多样式的问题，虽然是解决了但是总觉得自己知其然而不知其所以然。今天简单的了解了盒子模型，解开了我的一些疑惑，与大家分享。

盒子模型主要是针对块级元素的，行级元素有相应的行内布局模型 (inline layout model)。在文档中每一个元素都被表示为一个矩形的盒子，这个盒子的各种属性是浏览器渲染的目标。一个标准的盒模型表示如下，包括四个边框：margin,border,padding,content

1.盒子模型结构

1.content

包含元素真实内容的区域，大小为内容宽高或者content-box宽高。如果 box-sizing
为默认值， width
, min-width
, max-width
, height
, min-height
与 max-height
控制内容大小。

2.padding

如果内容区域content area设置了背景、颜色或者图片，这些样式将会延伸到padding上(译者注：而不仅仅是作用于内容区域)。它位于内边距边界内部, 它的大小为 *padding-box * 宽与 *padding-box *高。
内边距与内容边界之间的空间可以由 padding-top
, padding-right
, padding-bottom
, padding-left
和简写属性 padding
控制。

3.border

包含边框的区域，扩展了内边距区域。它位于边框边界内部，大小为 *border-box * 宽和 *border-box *高。由 border-width
及简写属性 border
控制。

4.margin area

用空白区域扩展边框区域，以分开相邻的元素。它的大小为 *margin-box *的高宽。
外边距区域大小由 margin-top
, margin-right
, margin-bottom
, margin-left
及简写属性 margin
控制。

盒子模型的布局和机构了解清楚了之后，然后再来看看实际遇到的问题。

问题1：IE样式不兼容

这个问题是因为IE坚持了自己的盒子模型，我们对比一下W3C的盒子模型和IE的盒子模型有什么不同。

2.W3C VS IE

IE在计算宽高时将padding和border区域也计算在内了，这是导致在IE下样式不兼容的原因之一。另外一个原因是IE引擎使用了“布局”的概念。如果一个元素没有布局，则由最近的拥有布局的祖先元素控制它的尺寸和位置。

问题2:宽度100%也未能充满父元素？

这个很好解释就是因为还有margin和padding的宽度。需要初始化{margin:0px;padding:0px}

问题3：position影响宽度

如果不设置宽度，则元素宽度应为父元素的100%。但是如果把position设置为float或者absolute，则元素的宽度为元素内容的宽度。

问题4：margin叠加效应

纵向的无定位(static)元素的相邻外边距会叠加合成为其中一个较大宽度的外外边距的值，并非两者之和。这就意味当计算实际上需要存放一个元素的区域大小时，并不是从外边距的边缘开始算起，只有最宽的外边距会生效，并且较窄的外边距会与较大的叠加在一起，请阅读CollapsingMargins来了解更多有关这相当复杂的一个主题。

3.margin叠加

本文参考：http://www.cnblogs.com/hh54188/archive/2010/12/28/1919078.html