前端基础——CSS盒子模型

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://cloud.tencent.com/developer/article/1336915

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

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

       其实一张图片就可以把CSS盒子模型形象地表述出来，网上一搜一大堆：

       正如上图所示：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布局方式。