盒子模型

其实这篇文章应该写在前面的，毕竟就CSS这一内容来说盒子模型可以说是基础中的基础，今天这篇文章我就以此为核心来展开吧。

就我个人的理解来说，盒子模型我们可以根据语义直接去理解，我们可以把每一个页面中的块级元素都看作一个盒子，这里不单纯指本就是块级元素的内容，也包括display:block和display:inline-block。但其实这些内容理解起来会有一定的困难，有更多的细节需要我们去把握。在初学时我觉得以div为样本，有利于大家的理解。

当大家能够接受我上面所说的概念后，我们就来具体的看一看盒子模型的一些内容。我们找来一个盒子，平放，然后俯视，这里会注意到一些什么性质呢？

相信大家最先注意到的都是宽和高，这里就可以引出两个属性width和height，即这个元素的宽和高，转回到我们实体的例子中就是盒子内的空间。

然后大家应该能注意到的是盒子的实体，也就是盒子的外壳，而这个内容对应到模型中就是边框，也就是border属性。

到这里我们可以直观观察到的属性就没有了，但如果我们考虑上具体使用，就会发现一些别的属性了。

首先第一个是我们考虑使用多个盒子装东西的时候，盒子与盒子之间就存在间距，这在我们的盒子模型中就是margin属性。

第二个情况就是盒子里面要装东西的时候，东西要不要贴着盒子的外壳放置呢？如果不贴着，放置的东西和盒子的外壳之间又存在一个距离，这里我们称之为补白，即padding属性。

好的，到这里盒子模型所涉及的基本属性就讲完了，上面也就是我个人的一些理解，接下来我想对这些属性做一个总结，我将写一个具体的例子，并通过注释来讲解一下。

<style>
  .demo{
    width:250px;  //宽，取值是任意长度值，自选
    height:250px;  //高，取值也是任意的长度值，自选
    border:1px solid #000;  //三个值分别对应边框的宽、样式、颜色
    margin:1px 1px 1px 1px;  //上、右、下、左的边距
    padding:1px 1px 1px 1px;  //上、右、下、左的边距
  }
</style>

看了上面的解析和例子相信大家对于盒子模型已经有了一定的了解，可惜我制图水准不行，不然图文并茂可以更轻松的理解。

接下来我想给大家分享一些细节上的内容

1，box-sizing 属性

这个属性决定了宽、高的计算方式。有两个取值，分别是content-box，宽、高不算边框和间距；border-box，宽、高算入边框和间距，即整个盒子模型。其中content-box是标准模式。

2，边框值的组合

边框的三个值顺序可以打乱，但必须三个都有，否则无效，划重点，必须三个都有！

3，margin和padding快捷取值和具体意义。

首先上面的总结中我写的margin和padding内容都是4个值，分别对应上、右、下、左，也就是顺时针的方向。这四个是可以分开来写的，margin-top、margin-left、margin-bottom、margin-right。其实单写margin然后写4个对应值已经算快捷写法了，但我们做程序的，偷懒的思想一定要彻底，能更简单，一定要更简单！所以这一属性还有两种快捷写法，但先声明更快捷的写法自然就存在一些局限性，这个后面大家应该能看出来，这就需要就具体问题分析了。另外两个快捷写法如下：

• margin:1px 1px //分别对应上下和左右
• margin:1px //即上下左右全一个值

这个部分我就只以margin为例子了，反正padding也是一样的，机智的读者肯定能理解的。