css基础知识复习（10）盒子模型

[image:51FA8EE2-1D3C-4489-92A6-DB6D906B2795-1144-00000144D3498A04/box-model-standard-small.png]
这节来学习css的盒子模型。盒子模型非常重要，是以后我们写页面经常用到的一个知识点。如果盒子模型弄不明白，那你要按照设计图画出一个页面来，恐怕要费很大的力气。
我个人的经验是，掌握不了盒子模型，一个页面布局要花上你预计的三倍以上的时间，如果你要写的和设计图一摸一样的话。
不说废话了，下面进入正题。

什么是盒子模型？

本节一进来就给大家祭上了一张大图，仔细看，它像什么呢？
我个人觉得它很像一个相框，大家可以借助像框来理解盒子模型。

margin

margin是盒子模型的外边距，用来推开其它的盒子。它一般简写为
margin:20px;
它可以拆分为上下左右四个属性，上面的简写属性与下面的拆分属性效果相同，如下：

1
2
3
4
margin-top: 20px;
margin-right: 20px;
mergin-bottom: 20px;
margin-left: 20px;

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

1
margin:20px 30px 40px 35px;

这个简写方法的顺序依次为上右下左。
如果上下相同，左右相同时，你还可以这么写：
1
margin:20px 40px;

这个时候，它的顺序是上下，左右。第一个值代表上下，第二个代表左右。
聪明的你，是不是知道了怎么写上下相同，左右不同或者左右相等，上下不同时怎么写了吧？
注意：两个盒子在一个时，如果他们都有margin，那他们之间margin的间距就取较大的那个。

border

border是边界的一个分割层。它可以写的很宽，但是很多时候，我们写代码是，都是只将它写成一条线。
borde和margin一样，有简写和分开写两种，规则也是一样的。
简写形式如下：border:1px solid red;
详细写则是挨个写下来，如下：

1
2
3
4
border-top:1px solid red;
border-bottom: 1px solid red;
border-left:1px solid red;
border-right:1px solid red;

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

padding

padding是内边距，写法如margin。

width 和 height

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