CSS盒子模型
2012-05-24 19:10
274 查看
CSS是网页设计的一项重要技术,而盒子模型又是CSS的核心内容。因此,正确理解盒子模型对网页的设计起着极其重要的作用。那么,关于盒子模型我们需要掌握哪些内容呢?
首先,什么是盒子模型?
CSS盒子模式具备的属性: 内容(content)、填充(padding)、边框(border)、边界(margin)。如下图所示:
![](http://my.csdn.net/uploads/201205/24/1337857494_5853.png)
为什么叫它盒子模型呢?这是由于它和我们日常生活中的盒子完全类似。内容(CONTENT)就是盒子里装的东西;而填充(PADDING)就是怕盒子里装的东西(贵重的)损坏而添加的泡沫或者其它抗震的辅料;边框 (BORDER)就是盒子本身了;至于边界(MARGIN)则说明盒子摆放的时候的不能全部堆在一起,要留一定空隙保持通风,同时也为了方便取出。而在网页 设计上,最重要的内容常指文字、图片等元素,但是也可以是小盒子(DIV嵌套)。
下面举个小例子具体介绍一下盒子模型。
实例一:
HTML代码:
CSS代码:
下图是second盒子在网页的显示情况:
![](http://my.csdn.net/uploads/201205/24/1337857472_9202.png)
由内向外不同的颜色区域分别对应盒子模型的内容(content)、填充(padding)、边框(border)、边界(margin)属性。下图是各属性对应的数值大小:
![](http://my.csdn.net/uploads/201205/24/1337857477_8148.png)
我们可以看到设置的width、height属性对应的仅仅是内容区域,而不是整个盒子。相信看了上面这个例子,大家对盒子模型的内部结构有了一定的了解。
下面就让我们来看看两个盒子之间的关系。同样以上面的例子讲解,我们稍作改动:
实例二:
HTML代码:
CSS代码不变。
下图是最终的显示情况:
![](http://my.csdn.net/uploads/201205/24/1337857482_5559.png)
从HTML代码中我们知道second盒子是“装在”first盒子中的,而从CSS代码中我们发现:first盒子的总高度是30px,而second盒子的总高度是:height + 2 * padding + 2 * border + 2 * margin =30px + 2 * 20px + 2 * 10px + 2 * 5px = 100px ,这样first盒子的高度就小于second盒子的高度,而在浏览器中我们却发现一切都显示正常,比较人性化吧,这也是CSS盒子模型与我们日常生活中盒子的本质区别。
不过,我们也不要为这种人性化设计太过高兴,万事都有利弊之分,我们只要稍作改动,问题立马就出来了,下面让我们试试:
实例三:
HTML代码:
同样,CSS代码不变。
显示结果如下:
![](http://my.csdn.net/uploads/201205/24/1337857486_2387.png)
看到结果了吧,你还会为它的人性化设计而高兴吗?下面让我们分析一下原因。由于second盒子是包含在first盒子中的,所以在确定third盒子的位置时不会考虑second盒子,仅会考虑first盒子,这样就会导致上面的悲剧。
相信看了以上三个例子,大家对CSS盒子模型的内部结构和盒子之间的位置关系有了一定的了解,但想要更好、简洁的布局网页内容,还必须了解浮动(float)技术。 所谓浮动呢,我理解就是要有一个文字围绕图片(当然也可以是别的)的效果,效果图如下:
![](http://my.csdn.net/uploads/201205/24/1337857502_5358.png)
关于浮动呢,我还没有深入了解,这里就不误人子弟了,CSS盒子模型也就介绍到这里了。
首先,什么是盒子模型?
CSS盒子模式具备的属性: 内容(content)、填充(padding)、边框(border)、边界(margin)。如下图所示:
![](http://my.csdn.net/uploads/201205/24/1337857494_5853.png)
为什么叫它盒子模型呢?这是由于它和我们日常生活中的盒子完全类似。内容(CONTENT)就是盒子里装的东西;而填充(PADDING)就是怕盒子里装的东西(贵重的)损坏而添加的泡沫或者其它抗震的辅料;边框 (BORDER)就是盒子本身了;至于边界(MARGIN)则说明盒子摆放的时候的不能全部堆在一起,要留一定空隙保持通风,同时也为了方便取出。而在网页 设计上,最重要的内容常指文字、图片等元素,但是也可以是小盒子(DIV嵌套)。
下面举个小例子具体介绍一下盒子模型。
实例一:
HTML代码:
<div class="first"> <div class="second"> womendoushi </div> </div>
CSS代码:
.first { width:202px; height:30px; } .second { width:180px; height:30px; padding:20px; border:10px solid #f00; margin:5px; }
下图是second盒子在网页的显示情况:
![](http://my.csdn.net/uploads/201205/24/1337857472_9202.png)
由内向外不同的颜色区域分别对应盒子模型的内容(content)、填充(padding)、边框(border)、边界(margin)属性。下图是各属性对应的数值大小:
![](http://my.csdn.net/uploads/201205/24/1337857477_8148.png)
我们可以看到设置的width、height属性对应的仅仅是内容区域,而不是整个盒子。相信看了上面这个例子,大家对盒子模型的内部结构有了一定的了解。
下面就让我们来看看两个盒子之间的关系。同样以上面的例子讲解,我们稍作改动:
实例二:
HTML代码:
<div class="first"> <div class="second"> womendoushi </div> </div>
CSS代码不变。
下图是最终的显示情况:
![](http://my.csdn.net/uploads/201205/24/1337857482_5559.png)
从HTML代码中我们知道second盒子是“装在”first盒子中的,而从CSS代码中我们发现:first盒子的总高度是30px,而second盒子的总高度是:height + 2 * padding + 2 * border + 2 * margin =30px + 2 * 20px + 2 * 10px + 2 * 5px = 100px ,这样first盒子的高度就小于second盒子的高度,而在浏览器中我们却发现一切都显示正常,比较人性化吧,这也是CSS盒子模型与我们日常生活中盒子的本质区别。
不过,我们也不要为这种人性化设计太过高兴,万事都有利弊之分,我们只要稍作改动,问题立马就出来了,下面让我们试试:
实例三:
HTML代码:
<div class="first"> <div class="second"> womendoushi </div> </div>
<div class="third">
现在还正常吗?
</div>
</div>
同样,CSS代码不变。
显示结果如下:
![](http://my.csdn.net/uploads/201205/24/1337857486_2387.png)
看到结果了吧,你还会为它的人性化设计而高兴吗?下面让我们分析一下原因。由于second盒子是包含在first盒子中的,所以在确定third盒子的位置时不会考虑second盒子,仅会考虑first盒子,这样就会导致上面的悲剧。
相信看了以上三个例子,大家对CSS盒子模型的内部结构和盒子之间的位置关系有了一定的了解,但想要更好、简洁的布局网页内容,还必须了解浮动(float)技术。 所谓浮动呢,我理解就是要有一个文字围绕图片(当然也可以是别的)的效果,效果图如下:
![](http://my.csdn.net/uploads/201205/24/1337857502_5358.png)
关于浮动呢,我还没有深入了解,这里就不误人子弟了,CSS盒子模型也就介绍到这里了。