前端基础——CSS盒子模型

如今很多网页都是由很多个“盒子”拼接、嵌套而成，所以多少接触过网页设计的朋友一定都对CSS盒子模型有所了解。

为了更好的说明，先举个通俗的样例：在一个仓库中放了10个纸箱，每一个纸箱之间有一定距离，每一个纸箱内放的是一台电脑而且纸箱和电脑之间都有一层泡沫来隔绝防震（这里如果纸箱和电脑都是正方体）。以这个样例为背景接着说盒子模型。

事实上一张图片就能够把CSS盒子模型形象地表述出来。网上一搜一大堆：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaHV5dXlhbmc2Njg4/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

正如上图所看到的：CSS中的盒子模型通常由四部分组成：内容（content）、填充（padding）、边框（border）、边界（margin）。

这里的内容就相当于箱子里的电脑，填充就相当于泡沫。边框就相当于纸箱，边界就相当于每一个纸箱之间的距离。

对这四部分进行说明：

内容（content）：盒子模型中的内容，能够是文字、图片、表格等等。

填充（padding）：内容与盒子边框的距离。可拆分为padding-top;padding-right;padding-bottom;padding-left；

边框（border）：盒子的边框，可拆分为border-top;border-right;border-bottom;border-left；

边界（margin）：盒子与其它相邻元素之间的距离。可拆分为margin-top;margin-right;margin-bottom;margin-left；

例如以下图：

图中须要注意的是，虚线部分表示的是该“盒子”中存放的内容的宽度（width）和高度（height），也就是上例箱子中电脑的宽度和高度。

通常情况下能够设置填充和边界四个方向的宽度（即厚度），对边框的设置有样式（style）、颜色（color）、宽度（width）几个属性。

在CSS中，觉得网页中的全部元素都包装在一个矩形盒子中，比方经常使用的div、span、ul、li、img、table等，都能够在CSS中对它们的内容（content）、填充（padding）、边框（border）和边界（margin）进行格式化。

假设一个盒子的margin为30px。border为5px，padding为20，width为240，height为160px，那么这个盒子实际上占用的空间为  宽：（30+5+20）×2+240=350px，高（30+5+20）×2+160 =270px

以往的网页都是用表格来布局，可是表格布局有非常多缺点，限于篇幅，下篇将介绍易于控制和互动的CSS+DIV布局方式。