所謂框模型，例如div標簽，你就可以直接把它理解成一個相框。
這個相框里面的相片有高度和寬度，框本身也有一定的寬度。相框和別的相框之間，還有一定的邊距。
div設置常見屬性
border：邊框
padding：內邊距
margin：外邊距
- 圖上的element，就是相片。
- padding就是相片與相框的間距。
- border就是相框本身的寬度。
- margin就是這個相框和別的相框之間的間距。
注意看此圖，元素本身的寬度是70px，加上左右兩邊各5px的內邊距，再加上左右兩邊各10px的外邊距。
這個div的實際寬度就達到100px了。
這一點要注意，設置div的寬度，其實只設置了里面元素的寬度。
div的實際的寬度=寬度+內邊距+邊框+外邊距。
由於外邊距是看不見的空白，所以
div的可見寬度=寬度+內邊距+邊框。
同理，div的高度，也是一樣的。
下面我們還是用代碼來演示。
<html><head><style>div {/* 設置寬度為300px */width:300px;/* 設置高度為300px */height:300px;/* 設置邊框為1px的線條 */border:1px solid;/* 設置內邊距為5px */padding:5px;/* 設置外邊距為10px*/margin: 10px;}</style></head><body><div></div></body></html>
那么請問，此時的div可見大小是多少呢？
312px*312px
此時div的實際大小是多少？
332px*332px
您算對了嗎？
