CSS布局之-盒子(Box)

一、 前言 盒子（一个块）是CSS布局中最基础的东西，如果你没完全搞清楚盒子是怎么回事，那么你在布局中将会很纠结，今天把它搞明白吧。文章中有误的地方，麻烦您指正。

二、 什么是CSS盒子呢？ 现在很多的书籍和教程都在说“DIV+CSS”，首先，我不太喜欢这个名字，原因很简单，难道写页面只用到DIV吗？为什么不说HTML+CSS呢，这样不是更好？所以,任何事情都不能走极端，(DIV用多了也不好)。好了，这里不再讨论这个名字有多么不好了，上面所说的DIV就是最典型的Box，让我们从最basic的东西开始讲起吧。 1. 盒子由哪些东西组成呢？ 一个盒子由margin(外边距)、border(边框)、padding(内边距)、content(内容)组成，您看下面这个图就一目了然了：

三、 常见问题 1. 盒子支持width和height属性吗？怎么有时候起作用，有时候不起作用呢？ 盒子有的时候会失效的,HTML+CSS中，HTML中的元素可分为行内元素(inline)和块级(block)元素,DIV就是一个很听话的块级元素（“DIV+CSS”这个名字这么流行，估计就是这个原因……），不错，DIV支持宽和高，但是他也会变异哦，什么情况下会呢？那就是DIV变成了行内元素的情况下，怎么样才会变成行内元素呢？我们可以给DIV添加一个display:inline,我们来测试一下： 下面是HTML中的内容：

<div class="normal"> 我是一个正常的DIV</div> <div class="special"> 我是一个变异的DIV</div>

下面是CSS中的内容：

.normal{width:100px;height:100px;border:1px solid #000;} .special{width:100px;height:100px;border:1px solid #000;display:inline;}

两个都是DIV，CSS的区别显而易见，那么会出现什么效果呢？请看图：

可以看到变异的DIV是不支持宽和高的，它现在已经是一个行内元素了。 我们现在让另一个也被感染一下,让其变异： 
可以看到：他们不但不支持宽高，而且在同一行中显示了，说明行内元素是从左往右排列的，在同一行显示。 好了，以上说的这种情况并不常见，因为我们很少会把DIV设置成行内元素。相反，我们通常会把行内元素设置成块级元素(比如说span、a标签等)。Span元素是比较常用的行内元素，所以它不支持宽高，也经常做为配角出现,那么怎么把它支持宽高呢？给它添加display:block就OK了。 测试一下： 下面是HTML中的内容：

<span class="special"> 我是一个变异的span </span> <span class="normal"> 我是一个正常的span </span>

下面是CSS中的内容：

.normal{width:100px;height:100px;border:1px solid #000;} .special{width:100px;height:100px;border:1px solid #000;display:block;}

有什么效果呢？看图说话：

结论显而易见，变异的span支持了宽高,并且本来是行内元素的span，现在不在同一行中显示了。 2. 盒子的width和height的值到底是如何计算的呢？ 废话不多说，测试一下：
下面是HTML中的内容：

<div> 这里是内容</div>

下面是CSS中的内容：

body{margin:0;} div{width:100px;height:100px;border:1px solid #000;padding:1px;margin:1px;}

这里之所以将body的margin设置为0，是因为body本身是有margin值的。 看一下在浏览器里的效果： 
看不出来宽高的值……下面用Photoshop看一下这个盒子到底是个什么情况吧： 
可以看到，图像的宽度和高度并不是我们设置的100px,而变成了106px,那么那六个像素你应该知道是从哪里来的吧。 得出结论：我们所设置的width和height的值只是盒子当中content的大小，而实际上盒子的宽高值是两个margin+两个border+width。 3. 盒子之间的margin值如何计算呢？ 我们首先看看左右的margin是如何处理的： 下面是HTML中的内容：

<span class="span1"> 这里是内容1 </span> <span class="span2"> 这里是内容2 </span>

下面是CSS中的内容：

.span1{ width:100px ;height:100px; border:1px solid #000; padding:1px; margin:1px;} .span2{ width:100px; height:100px; border:1px solid #000; padding:1px; margin:2px;}

会出现什么效果呢？请看图：

那么两个span之间的距离是多少呢？我们用Photoshop看一下：

可以看到，两个span之间的距离为3px,很容易想明白这3px是从哪里来的。 现在再来看看上下margin吧，千万不要由“左右理论”而得到“上下理论”哦。 开始测试，我们把上面的代码稍微改一下就好了： 下面是HTML中的内容（不做变化）：

<span class="span1"> 这里是内容1 </span> <span class="span2"> 这里是内容2 </span>

下面是CSS中的内容(给body加一个margin:0,将第一个span的margin调的大一点，给第二个span添加display:block;)：

body{margin:0;} .span1{ width:100px ;height:100px; border:1px solid #000; padding:1px; margin:10px;} .span2{ width:100px; height:100px; border:1px solid #000; padding:1px; margin:2px; display:block;}

这样会出现什么效果呢?

可以看到，他们之间居然没有一点的缝隙，原来行内元素只有左右margin的值在起作用，上下的margin是不起作用的（莫非行内元素是狐狸精？要不怎么搞出这么变态的勾引？谁遇到它谁倒霉！）。 好了，现在再看看都是块级元素的情况吧： 下面是HTML中的内容（不做变化）：

<span class="span1"> 这里是内容1 </span> <span class="span2"> 这里是内容2 </span>

下面是CSS中的内容(将第一个span也设置成块级元素)：

body{margin:0;} .span1{ width:100px; height:100px; border:1px solid #000; padding:1px;margin:10px; display:block;} .span2{width:100px; height:100px; border:1px solid #000; padding:1px;margin:2px; display:block;}

看图：

它(span1)还真聪明（知道别人看到它是狐狸，马上把尾巴收起来了），好了，现在都是块级元素了，可以看出上下的margin是起作用的，但是值是多少呢？看图：

原来只有一个元素的margin在起作用，那就是margin值较大的那一个，好了，终于搞明白了！
4. 盒子的父子关系是怎么样的呢？ 下面是HTML里的内容：

<div class="father"> <div class="son">这里是内容</div> </div>

下面是CSS里的内容：

body{margin:0;} .father{border:1px solid #000;padding:10px;width:100px;} .son{border:1px solid #000;margin:10px;}

直接看细节图：

到底是儿子听老子的话！不过，父子关系有时候是很复杂的，如果父子出现不和的情况，不同的调解员的调解方法也不一样，有的出好招，有的出损招(你懂的)，但是，谁会自找麻烦呢？建议大家一定要搞好父子关系，不要出现冲突，家和万事兴！ 好了，就说到这儿吧，Bye-Bye!