所谓框模型，例如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
您算对了吗？
8736
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
