CSS3 放飞自我1——margin,padding,border到底有啥关系？

在开始严肃地讨论技术之前，我想先说几句题外话。从今天开始呢，我将陆续更新一些有关于CSS3的一些我觉得很有必要了解的知识，也包括一些干货。这些东西不一定是难点，也不一定都是CSS3新出的，却是我觉得重要的。也请各位看官有选择地浏览，并提出宝贵意见，谢谢。话不多说，开始本章的讨论。

来，让我们画个示意图。

一个DIV的DOM结构式这样的：

先说margin，我把它写在DIV外面，说明它的大小与DIV的大小无关。

什么是content,它就是单纯的width和height，不包括padding和border。

整个DIV，从里到外的顺序为，content,padding,border.他们的大小，直接影响DIV的大小。

总结：DIV的大小即content+padding+border。

在谷歌浏览器上的验证：

.box{
width: 300px;
height: 300px;
background: skyblue;
} 

 

 

.box{
width: 300px;
height: 300px;
padding:20px;
background: skyblue;
border:10px solid black;
margin:40px;
}

其中360=300+20*2+10*2