css基础知识复习盒子模型

这节来学习css的盒子模型。盒子模型非常重要，是以后我们写页面经常用到的一个知识点。如果盒子模型弄不明白，那你要按照设计图画出一个页面来，恐怕要费很大的力气。

我个人的经验是，掌握不了盒子模型，一个页面布局要花上你预计的三倍以上的时间，如果你要写的和设计图一摸一样的话。

不说废话了，下面进入正题。

什么是盒子模型？

本节一进来就给大家祭上了一张大图，仔细看，它像什么呢？

我个人觉得它很像一个相框，大家可以借助像框来理解盒子模型。

margin

margin是盒子模型的外边距，用来推开其它的盒子。它一般简写为

它可以拆分为上下左右四个属性，上面的简写属性与下面的拆分属性效果相同，如下：

如果上面的四个值都是相等的，那直接用来搞定就可以。但是有时后四个值不一样，又不想拆分开写时，还有一种简写方法，如下：

这个简写方法的顺序依次为上右下左。

如果上下相同，左右相同时，你还可以这么写：

这个时候，它的顺序是上下，左右。第一个值代表上下，第二个代表左右。

聪明的你，是不是知道了怎么写上下相同，左右不同或者左右相等，上下不同时怎么写了吧？

注意：两个盒子在一个时，如果他们都有margin，那他们之间margin的间距就取较大的那个。

border

border是边界的一个分割层。它可以写的很宽，但是很多时候，我们写代码是，都是只将它写成一条线。

borde和margin一样，有简写和分开写两种，规则也是一样的。

简写形式如下：

详细写则是挨个写下来，如下：

下面我们来进一步了解，它实际上是由border-width,border-style,border-color组成，如果你想进一步来细写，也可以这样。不过我不太喜欢这么细的写。

padding

padding是内边距，写法如margin。

width 和 height

width和height一般是不包括外面间距（包括margin，padding，border）的宽度的，但是当你把设置如下属性时，它会包括padding。