编辑今天学做九宫格，刚开始我是想着一个一个往上面写方块，填颜色，

日写出来是一个黑色的正方形，本来我的思路是一个一个往上写，写9个，就写了第2个，是这样的

...第2个是这样的，如上图，然后我觉得这样可能是对的，然后我继续向下写

写到这里我的本意是绿色图片在第一行红片图片的右面，可它是在红色图片的下面，然后师兄告诉我每个图片其实是那一行的都是的，向上是覆盖，然后我就将他向上移动，

出现的是这样子，和我的预想还是不符，因为图片与图片直接没有隔开（上图）

然后改成这样了

然后到这里以后我知道我的思路不对，我在网上看别人是怎么做的，然后照抄了一遍

出现了这样，和我想要的还是不一样，继续改

首先我想的是每个格子分开，我加了一个内边距

加了内边距以后，出现上图，得到的不对，我想会不会是总的d0没改所以才会出现这样的，在上面又加了内边距向下

还是不对，我在想加上高度会怎样，还是不对

这时我在d1那里外边距加了高度  margin-top :2px;    然后我发现

我第一个格子向下移动一点，突然想到上面3个是不动的，然后从第d4开始改，加了 margin-top:2px;  ,发现和我想要的效果很接近了

受到启发（上图），剩下的d4  d5  d6  d7  d8  d9  都加上了margin-top:2px;

从开始做九宫格的时候，我想的是内边距向下，所以一直不成功，后来一次次试，后来是外边距向下才成功

明天计划可以学会九宫格可以动的九宫格

遇到的问题：

对于内边距，外边距，  内边距向上，向下，   外边距向上，向下不是很明白，为什么margin-left  都是向左移动，不应该是向右吗？

收获：

制作了九宫格，把我最想知道的每个格子之间怎么分开，怎么写出来的知道了，今天试了很多次，每次都是那不对都有了一定的印象

border-radius 边距半径    border-radius:8px;  / border-radius:8%;    是可以调弧度的，  px / % 效果相同

刚才又重新写了一遍发现margin外边距，“四周都有”就可以省略一些，不用再写margin-left:2px;

margin-top:2px;   直接只写margin:2px;就行。