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