css 盒模型：学习整理，仅供参考，没有详细测试

浏览数：45 / 时间：2015年06月09日

CSS的盒模型存在两种模型：标准(W3C)和非标准(IE)

从上图可以看到标准 W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分

从上图可以看到 IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading。

以上部分内容来自网络：http://www.cnblogs.com/releaseyou/archive/2009/04/16/1437456.html

下面是我们遇到的一些CSS问题

1. 外边距的垂直合并：

　　外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者,只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。（来源w3school.com）。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>垂直外边距合并</title>
<style>
.top{width:160px; height:50px; background:#ccf;}
.middle{width:160px; background:#cfc;margin-top:10px}
.middle .firstChild{margin-top:20px;}
</style>
</head>
<body>
<div class="top"></div>
<div class="middle">
<div class="firstChild">我其实只是想和我的父元素隔开点距离。</div>
<div class="secondChild"></div>
</div>
</body>
</html>

　　上面就是在工作中常遇见的情况：父元素包含一个拥有子元素，父元素margin-top:10px.子元素margin-top：20px,期望的总margin- top:30px,实际只有20px，且效果上相当于设置父元素margin-top:20px，子元素margin-top:0px。(FF和CHROME测试。IE好像不存在这个现象，没有测试过)。

解决方法：

　　1、正确的使用元素的margin和padding。

　　　　何时应当使用margin：
　　　　　　需要在border外侧添加空白时。
　　　　　　空白处不需要背景（色）时。
　　　　　　上下相连的两个盒子之间的空白，需要相互抵消时。如15px + 20px的margin，将得到20px的空白。
　　　　何时应当时用padding：
　　　　　　需要在border内测添加空白时。
　　　　　　空白处需要背景（色）时。
　　　　　　上下相连的两个盒子之间的空白，希望等于两者之和时。如15px + 20px的padding，将得到35px的空白。

2、为元素添加浮动效果。如在bootstrap(v3)框架中，定义了row和col(class)，其中col就是设置了float:left，为col设置margin就没有这个问题了。

参考链接：

　　http://www.w3school.com.cn/css/css_margin_collapsing.asp

　　http://www.jb51.net/css/37633.html

2. 设置padding是撑破容器：

在标准浏览器中（遵循W3C标准）中存在一个常见的问题，如当我们设置一个元素的width:100%时，元素的宽度则为容器的宽度。但是如果这个需要是元素内容右移10px，可以设置margin-left:10px,或者padding-left:10px,这是在W3C标准下就会子元素的宽度就会撑破容器的宽度。

解决方法：

　　1、设置具体的值，通过精确的计算来控制（适合margin-left,如果使用padding需要考虑IE）;

　　2、设置box-sizing属性为border-box(将盒模型转换为IE的模式，也就是width =content+padding)

　　　　在css的中定义（在bootstrap v3中就是使用这种方式实现的）：

　　　　　　box-sizing:border-box;

　　　　　　-moz-box-sizing:border-box; /* Firefox */

　　　　　　-webkit-box-sizing:border-box; /* Safari */

　　　在文档的<!DOCTYPE ...>中定义

　　3、通过css3的calc()函数来计算，eg：margin-left:10px;width:calc(100%-10px);

　　　　http://blog.sina.com.cn/s/blog_42cdca7d01014pzj.html

　　　　　width: -webkit-calc(100%/6);

　　　　　width: calc(100%/6);